Peng Shawn Mermaid MCP Server

🚀 Mermaid Chart MCP Server

The Mermaid Chart MCP Server is a text-based chart drawing tool that supports various chart types. It can be integrated with MCP clients to generate and share charts directly in the chat interface.

🚀 Quick Start

The Mermaid Chart MCP Server is a text-based chart drawing tool that supports multiple chart types, such as flowcharts, sequence diagrams, class diagrams, and timing diagrams. By integrating with MCP clients, you can directly use Mermaid charts in the chat interface to generate and share charts.

✨ Features

• Multiple Chart Type Support: Including flowcharts, sequence diagrams, class diagrams, timing diagrams, etc.
• Theme Switching: Comes with multiple built - in chart styles, allowing users to choose different themes according to their needs.
• Background Color Setting: Enables customizing the background color of the chart to enhance the visual effect.
• High Code Configurability: Complex charts can be generated through simple text input.
• Flexible Integration: Supports seamless integration with various MCP clients (e.g., Claude desktop, Cursor, etc.).

🔧 Technical Details

The Mermaid Chart Server receives user input commands, parses the chart descriptions and parameters, and then uses the Mermaid rendering engine to convert the text into graphics. The generated images can be transmitted to the client through the MCP protocol for display or saving.

📦 Installation

1. Clone the repository:

   git clone https://github.com/your-repo.git
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

💻 Usage Examples

Integration with Claude desktop

Claude desktop already has built - in support for Mermaid charts, but more custom features can be achieved through the MCP server.

Other Tools

• Cursor: When using in Cursor, set CONTENT_IMAGE_SUPPORTED=false.
• Glama: It can be directly integrated into the Glama platform.

Basic Usage

{
  "code": "flowchart\n    A -> B: Message from A to B\n    B -> C: Message from B to C"
}

Advanced Usage - Theme and Background Color

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

Advanced Usage - Save Locally

{
  "code": "classDiagram\n    Class01 <|-- AveryLongClass\n    Class03 *-- Class04\n    Class05 o-- Class06",
  "theme": "dark",
  "name": "class_diagram",
  "folder": "/path/to/diagrams"
}

📚 Documentation

API

The MCP server provides the following interface:

{
  "code": "your_mermaid_code",
  "theme": "forest|dark|light",
  "backgroundColor": "#hex_code",
  "name": "file_name",
  "folder": "/path/to/save"
}

Environment Variables

• CONTENT_IMAGE_SUPPORTED: Controls whether to support returning images directly in the response. The value can be true or false.

Frequently Asked Questions

• Why do we need this server when Claude desktop already supports Mermaid charts?
  • Claude's built - in support does not support the theme and backgroundColor parameters. Additionally, using an independent server makes it easy to share charts among different MCP clients.
• Why do we need to set CONTENT_IMAGE_SUPPORTED=false in Cursor?
  • Because Cursor currently does not support directly returning images in the response.

Release

The project is automatically released to npm through the GitHub Actions workflow.

Method 1: Use the release script (Recommended)

1. Commit your code and push it to the repository.
2. Run the release command:

   npm run release 0.1.4
   

   Or use semantic version increment:

   npm run release patch|minor|major
   

Method 2: Manual Release

1. Build the project.
2. Package and upload it to npm.

📄 License

This project is under the MIT License.