# hustcc-mcp-mermaid

Lets your agent generate Mermaid diagrams and charts, set themes and background, and export to SVG, PNG or a file.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed · ★ 646
- Author: hustcc
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/hustcc/mcp-mermaid
- Updated: 2026-05-15
- HTML: https://affpapa.org/en/nevibecode/mcp/hustcc-mcp-mermaid

## What it 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.

## Requirements
- Needs: Node.js (commands run via npx)
- Remote server: `https://server.smithery.ai/@hustcc/mcp-mermaid/mcp`

## Install

### Claude Code (native platform)

**Platform CLI: remote server**
```bash
claude mcp add --transport http hustcc-mcp-mermaid https://server.smithery.ai/@hustcc/mcp-mermaid/mcp
```

### Codex

**Platform CLI: remote server**
```bash
codex mcp add hustcc-mcp-mermaid --url https://server.smithery.ai/@hustcc/mcp-mermaid/mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "hustcc-mcp-mermaid": {
            "url": "https://server.smithery.ai/@hustcc/mcp-mermaid/mcp"
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "hustcc-mcp-mermaid": {
            "type": "http",
            "url": "https://server.smithery.ai/@hustcc/mcp-mermaid/mcp"
        }
    }
}
```

### Gemini CLI

**Platform CLI: remote server**
```bash
gemini mcp add -t http hustcc-mcp-mermaid https://server.smithery.ai/@hustcc/mcp-mermaid/mcp
```

## When to use it
- 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
- 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

## Similar
- [pretty-mermaid](https://affpapa.org/en/nevibecode/skills/pretty-mermaid.md) — skill · 4500 installs
- [beautiful-mermaid](https://affpapa.org/en/nevibecode/skills/beautiful-mermaid.md) — skill · 1800 installs
- [mermaid-diagrams](https://affpapa.org/en/nevibecode/skills/mermaid-diagrams.md) — skill · 1180 installs
- [cli-anything-mermaid](https://affpapa.org/en/nevibecode/skills/cli-anything-mermaid.md) — skill · 519 installs
- [mermaid-diagram-generator](https://affpapa.org/en/nevibecode/skills/mermaid-diagram-generator.md) — skill · 331 installs
- [mermaid-studio](https://affpapa.org/en/nevibecode/skills/mermaid-studio.md) — skill · 324 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md