hustcc-mcp-mermaid — Claude Code MCP server for Mermaid diagrams
Lets your agent generate Mermaid diagrams and charts, set themes and background, and export to SVG, PNG or a file.
claude mcp add --transport http hustcc-mcp-mermaid https://server.smithery.ai/@hustcc/mcp-mermaid/mcpWhat hustcc-mcp-mermaid does
The server takes a diagram description from the model and returns a rendered image. Full Mermaid syntax is supported, along with backgroundColor and theme settings, so the model can control styling. Output comes back as base64, svg, mermaid, file, or a link via svg_url and png_url. With outputType: "file" the PNG is written to disk.
Mermaid validation is built in. That matters when a diagram has many nodes: the model can fix syntax over several passes instead of handing you a broken chart. It runs like any other MCP server — through npx in the client config, a global npm install -g mcp-mermaid, or the Docker image susuperli/mcp-mermaid:latest. Transports are stdio, sse and streamable, default port 3033, endpoint /sse or /mcp.
HTTP setup through Smithery needs only the URL. A local run needs Node.js and npx. The validator catches syntax, not meaning, so check that your diagram still shows the relationships you meant.
What it helps with
- draw a service architecture diagram from a text description
- build a sequence diagram for a request flow
- render a chart with a specific theme and background
- save a finished diagram to disk as PNG
- get a shareable link to a diagram for docs
Example prompts for the agent
- Draw a sequence diagram for the OAuth login flow and save it as PNG
- Make a dark-theme diagram of the data flow between services
- Render a Gantt chart for the release stages and give me the link
How to install hustcc-mcp-mermaid
Platform CLI: remote server
claude mcp add --transport http hustcc-mcp-mermaid https://server.smithery.ai/@hustcc/mcp-mermaid/mcpPlatform CLI: remote server
codex mcp add hustcc-mcp-mermaid --url https://server.smithery.ai/@hustcc/mcp-mermaid/mcpConfig file
{
"mcpServers": {
"hustcc-mcp-mermaid": {
"url": "https://server.smithery.ai/@hustcc/mcp-mermaid/mcp"
}
}
}Config file
{
"servers": {
"hustcc-mcp-mermaid": {
"type": "http",
"url": "https://server.smithery.ai/@hustcc/mcp-mermaid/mcp"
}
}
}Platform CLI: remote server
gemini mcp add -t http hustcc-mcp-mermaid https://server.smithery.ai/@hustcc/mcp-mermaid/mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about hustcc-mcp-mermaid
How do I install hustcc-mcp-mermaid in Claude Code?
Run claude mcp add --transport http hustcc-mcp-mermaid https://server.smithery.ai/@hustcc/mcp-mermaid/mcp. The server connects over HTTP, so nothing is installed locally.
What does hustcc-mcp-mermaid do?
It generates Mermaid diagrams and charts on request from the model. Results come back as SVG, PNG, base64 or a file on disk.
Which export formats are supported?
base64, svg, mermaid, file, plus svg_url and png_url links through mermaid.ink. With outputType: "file" the diagram is saved as a PNG.
