What is Mcp 101 Mermaid

mcp-101-mermaid is a simple MCP server designed to create and visualize diagrams using Mermaid.js. It features a React frontend and WebSocket communication for real-time interaction.

Use cases

Use cases include creating flowcharts for process mapping, sequence diagrams for illustrating interactions, class diagrams for software design, Gantt charts for project timelines, and pie charts for data visualization.

How to use

To use mcp-101-mermaid, clone the repository, install the necessary dependencies for both the frontend and backend, and then start the application using the provided commands.

Key features

Key features include real-time diagram rendering, support for various diagram types (flowcharts, sequence diagrams, class diagrams, Gantt charts, pie charts), robust error handling, dark/light theme support, zoom controls, and the ability to export diagrams to SVG format.

Where to use

mcp-101-mermaid can be used in various fields such as software development, project management, education, and anywhere that requires visual representation of information.

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
   

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 ..
   

3. Start the application:

   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.

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.