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 v16 or higher
• Bun or npm

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/mermaid.git
   cd mermaid
   

   Copy

2. Install dependencies for both frontend and backend:

   # Frontend dependencies
   cd mermaid-app
   bun install
   
   # Backend dependencies
   cd ../mcp-server
   bun install
   
   # Return to root
   cd ..
   

   Copy

3. Start the application:

   bun start.js
   

   Copy

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.

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.