mcp-101-mermaid

# Mermaid Diagram Creator A real-time diagram creation tool powered by Mermaid.js with React frontend and WebSocket communication. ## Overview This application enables users to create and visualize various types of diagrams using the Mermaid syntax. The system consists of two main components: - **Frontend**: A React application that renders diagrams using Mermaid.js - **Backend**: A server that processes requests and sends diagram data to the frontend via WebSockets ## Features - Real-time diagram rendering - Support for multiple diagram types: - Flowcharts - Sequence diagrams - Class diagrams - Gantt charts - Pie charts - Robust error handling with helpful syntax suggestions - Dark/light theme support - Zoom controls for diagram viewing - Export to SVG format ## Project Structure ``` mermaid/ ├── mermaid-app/ # React frontend application │ ├── src/ # Source code │ │ ├── App.jsx # Main application component │ │ └── App.css # Application styling │ ├── package.json # Frontend dependencies │ └── vite.config.js # Vite configuration │ ├── mcp-server/ # Backend server │ ├── server.js # Main server file │ ├── socket-server.js # WebSocket server implementation │ ├── diagram-generators.js # Diagram generation logic │ └── package.json # Backend dependencies │ └── start.js # Script to start both frontend and backend ``` ## Getting Started ### Prerequisites - [Node.js](https://nodejs.org/) v16 or higher - [Bun](https://bun.sh/) or [npm](https://www.npmjs.com/) ### Installation 1. Clone the repository: ```bash git clone https://github.com/yourusername/mermaid.git cd mermaid ``` 2. Install dependencies for both frontend and backend: ```bash # Frontend dependencies cd mermaid-app bun install # Backend dependencies cd ../mcp-server bun install # Return to root cd .. ``` 3. Start the application: ```bash bun start.js ``` 4. Open your browser and navigate to `http://localhost:5173` ## Usage 1. The application automatically connects to the WebSocket server 2. Diagrams sent from the server will be rendered in real-time 3. Use the zoom controls to adjust the view 4. Toggle between dark and light themes using the theme button 5. Export diagrams using the export button ## Diagram Syntax The application uses Mermaid.js syntax for creating diagrams. Here are some examples: ### Flowchart ``` graph TD A[Start] -->|Process| B(Process Data) B --> C{Decision} C -->|Yes| D[Result 1] C -->|No| E[Result 2] D --> F[End] E --> F ``` ### Sequence Diagram ``` sequenceDiagram participant User participant API participant Database User->>API: Request data activate API API->>Database: Query activate Database Database-->>API: Results deactivate Database API-->>User: Response deactivate API ``` For more syntax examples, visit the [Mermaid documentation](https://mermaid.js.org/syntax/). ## Error Handling The application provides helpful error messages and syntax suggestions when diagram code contains errors. ## Contributing Contributions are welcome! Please feel free to submit a Pull Request. ## License This project is licensed under the MIT License - see the LICENSE file for details.