by hustcc
❤️ Generate mermaid diagram and chart with AI MCP dynamically.
# Add to your Claude Code skills
git clone https://github.com/hustcc/mcp-mermaidGenerate <img src="https://mermaid.js.org/favicon.svg" height="14"/> mermaid diagram and chart with AI MCP dynamically. Also you can use:
Timeline, Comparison, List, Process and so on.Fully support all features and syntax of Mermaid.
Support configuration of backgroundColor and theme, enabling large AI models to output rich style configurations.
Support exporting to base64, svg, mermaid, file, and remote-friendly svg_url, png_url formats, with validation for Mermaid to facilitate the model's multi-round output of correct syntax and graphics. Use outputType: "file" to automatically save PNG diagrams to disk for AI agents, or the URL modes to share diagrams through public mermaid.ink links.
To use with Desktop APP, such as Claude, VSCode, Cline, Cherry Studio, and so on, add the MCP server config below. On Mac system:
{
"mcpServers": {
"mcp-mermaid": {
"command": "npx",
"args": [
"-y",
"mcp-mermaid"
]
}
}
}
On Window system:
{
"mcpServers": {
"mcp-mermaid": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"mcp-mermaid"
]
}
}
}
Also, you can use it on aliyun, modelscope, glama.ai, smithery.ai or others with HTTP, SSE Protocol.
Install the package globally:
npm install -g mcp-mermaid
Run the server with your preferred transport option:
# For SSE transport (default endpoint: /sse)
mcp-mermaid -t sse
# For Streamable transport with custom endpoint
mcp-mermaid -t streamable