Mermaid Diagram Generator

🚀 Mermaid MCP Server

This project provides a server for generating and managing various types of diagrams using Mermaid. It details the features, working principles, build instructions, usage methods, API information, etc.

✨ Features

• Support multiple diagram types, such as flowcharts, sequence diagrams, and class diagrams.
• Offer different themes (default, forest, dark).
• Support custom background colors.
• Provide command - line tools and programming interfaces for interaction.
• Support saving diagrams as files or direct output.

🔧 Technical Details

The Mermaid MCP server is implemented based on Puppeteer and Mermaid.js. It parses the JSON requests provided by users, generates corresponding Mermaid diagrams, uses Puppeteer to capture the generated SVG images, and finally converts them to PNG format and returns them to the client.

📦 Installation

1. Clone the repository:

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

2. Install dependencies:

npm install

3. Start the service:

npm run dev

🚀 Quick Start

Build Instructions

npm run dev # Start the server in development mode
npm run build # Build for the production environment

💻 Usage Examples

Basic Usage

{
  "code": "graph LR\nA --> B\nB --> C"
}

Set Theme and Background Color

{
  "code": "sequenceDiagram\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!",
  "theme": "forest",
  "backgroundColor": "#F0F0F0"
}

Save to a Specified Path

{
  "code": "classDiagram\n    Class01 <|-- AveryLongClass\n    Class03 *-- Class04\n    Class05 o-- Class06",
  "theme": "dark",
  "name": "Class Diagram Example",
  "folder": "/var/www/diagrams"
}

📚 Documentation

API Request Format

HTTP POST request with JSON body:

{
  "code": string,
  "theme": string,
  "backgroundColor": string,
  "name": string,
  "folder": string
}

API Response Format

On success:

{
  "status": "success",
  "data": {
    "url": "http://example.com/diagram.png"
  }
}

On failure:

{
  "status": "error",
  "message": "Error message"
}

Environment Variables

More Examples

Basic Flowchart

{
  "code": "graph LR\nA --> B\nB --> C"
}

Complex Sequence Diagram

{
  "code": "sequenceDiagram\n    Alice->>John: Hello John, how are you?\n    John-->>Bob: Great, thanks!",
  "theme": "forest",
  "backgroundColor": "#E6E6E6"
}

Class Diagram Example

{
  "code": "classDiagram\n    Class01 <|-- AveryLongClass\n    Class03 *-- Class04\n    Class05 o-- Class06",
  "theme": "dark",
  "name": "Class Diagram Example",
  "folder": "/var/www/diagrams"
}

Frequently Asked Questions

Q: Does it support direct client - side rendering of Mermaid?

A: Currently, it does not support direct client - side rendering. Diagrams must be parsed and generated through the server.

Q: How to handle large - sized diagrams?

A: You can optimize the rendering quality by adjusting the configuration parameters of Mermaid.js or load diagrams in chunks.

Project Structure

mermaid-mcp/
├── src/         # Source code directory
│   ├── index.ts     # Entry file
│   └── types.ts    # Type definitions
├── public/       # Static resource directory
└── package.json  # Dependency management file

📄 License

This project is licensed under the MIT License. Please refer to the LICENSE file for specific terms.