Generate mermaid diagram and chart with AI MCP dynamically. Also you can use
mcp-server-chart to generate chart, graph, map.
- Fully support all features and syntax of
Mermaid
. - Support configuration of
backgroundColor
andtheme
, enabling large AI models to output rich style configurations. - Support exporting to
png
,svg
, andmermaid
formats, with validation forMermaid
to facilitate the model's multi-round output of correct syntax and graphics.
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
Then you can access the server at:
- SSE transport:
http://localhost:3033/sse
- Streamable transport:
http://localhost:3033/mcp
You can also use the following CLI options when running the MCP server. Command options by run cli with -h
.
MCP Mermaid CLI
Options:
--transport, -t Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
--port, -p Specify the port for SSE or streamable transport (default: 3033)
--endpoint, -e Specify the endpoint for the transport:
- For SSE: default is "/sse"
- For streamable: default is "/mcp"
--help, -h Show this help message
Install dependencies:
npm install
Build the server:
npm run build
Start the MCP server:
npm run start
MIT@hustcc.