MCP 服务器

Mermaid Chart MCP

Enables AI assistants to generate and render Mermaid diagrams (flowcharts, sequence diagrams, etc.) as PNG/SVG images with local file saving and HTTP access URLs. Supports batch processing and intelligent caching for efficient diagram creation.

README

🎨 Mermaid Chart MCP

🚀 A powerful Mermaid chart rendering tool based on MCP (Model Context Protocol) for AI editors

✨ Features

🎯 MCP Protocol Support - Seamlessly integrates with AI editors like Cursor, Claude Desktop, WindSurf
🎨 Multiple Formats - Export charts as PNG or SVG
🌈 Rich Themes - Support for default, dark, forest, and more themes
📏 Customizable - Adjust dimensions, background colors, and styling
⚡ Batch Processing - Render multiple charts simultaneously
🔗 Online Links - Automatically generate shareable online URLs
💾 Local Storage - Save charts to your local filesystem
📦 Zero Config - Works out of the box, no additional setup required

🚀 Quick Start

Installation

Install the package globally or use it directly with npx:

# Recommended: Use latest version with npx
npx @pickstar-2002/mermaid-chart-mcp@latest

# Or install globally
npm install -g @pickstar-2002/mermaid-chart-mcp@latest

Configuration in AI Editors

Cursor IDE

Add to your settings.json:

{
  "mcp.servers": {
    "mermaid-chart": {
      "command": "npx",
      "args": ["@pickstar-2002/mermaid-chart-mcp@latest"]
    }
  }
}

Claude Desktop

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "mermaid-chart": {
      "command": "npx",
      "args": ["@pickstar-2002/mermaid-chart-mcp@latest"]
    }
  }
}

WindSurf

Add to your MCP configuration:

{
  "mcp": {
    "servers": {
      "mermaid-chart": {
        "command": "npx",
        "args": ["@pickstar-2002/mermaid-chart-mcp@latest"]
      }
    }
  }
}

📖 Usage

Once configured, you can use the following tools in your AI editor:

🎯 renderMermaid

Render a Mermaid chart and get an online URL:

// Example usage in AI chat
"Please render this flowchart:
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
"

💾 saveMermaid

Render and save a chart to your local filesystem:

// The AI will save the chart locally and provide both local path and online URL
"Save this sequence diagram to ./diagrams/ folder:
sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob!
    B-->>A: Hello Alice!
"

⚡ batchRenderMermaid

Process multiple charts at once:

// Render multiple charts simultaneously
"Create these three charts:
1. A flowchart showing the login process
2. A sequence diagram for API calls  
3. A class diagram for the user model
"

🛠️ API Reference

renderMermaid

Parameter	Type	Required	Description
`mermaidCode`	string	✅	Mermaid diagram code
`format`	'png' \| 'svg'	❌	Output format (default: 'png')
`theme`	string	❌	Theme name (default, dark, forest, etc.)
`backgroundColor`	string	❌	Background color
`width`	number	❌	Image width in pixels
`height`	number	❌	Image height in pixels

saveMermaid

Parameter	Type	Required	Description
`mermaidCode`	string	✅	Mermaid diagram code
`localPath`	string	✅	Local directory path
`filename`	string	❌	Custom filename
`format`	'png' \| 'svg'	❌	Output format (default: 'png')
`createDir`	boolean	❌	Create directory if not exists (default: true)
`theme`	string	❌	Theme name
`backgroundColor`	string	❌	Background color
`width`	number	❌	Image width in pixels
`height`	number	❌	Image height in pixels