mermaid-mcp

An MCP server that renders Mermaid diagrams to PNG, SVG, or PDF — or converts them to editable draw.io files. Give your LLM the ability to turn diagram syntax into actual images and documents.

Quick start

Claude Code

claude mcp add mermaid -- npx -y mermaid-render-mcp

Claude Desktop

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-render-mcp"]
    }
  }
}

Note: the first run downloads headless Chromium (~150 MB), so the initial startup takes a few minutes.

From source

git clone https://github.com/tci-nebula/mermaid-mcp.git
cd mermaid-mcp
npm install
claude mcp add mermaid -- node /path/to/mermaid-mcp/server.js

Related MCP server: Mermaid-MCP

Tool: render_diagram

Returns the rendered image as base64-encoded data so MCP clients can display it inline — or, with output_path, writes the file to disk (handy for PDFs destined for printing or formal document submission).

Example

Ask your LLM:

"Draw me a flowchart of the OAuth login flow"

It generates the Mermaid syntax, calls render_diagram, and you get back a PNG.

How it works

PNG, SVG, and PDF rendering shells out to @mermaid-js/mermaid-cli (bundled as a dependency), which uses a headless Chromium to render diagrams. First npm install downloads Chromium (~150 MB), so it takes a few minutes.

draw.io export is pure JavaScript — a flowchart parser plus dagre layout (the same engine Mermaid uses) emit native mxGraphModel XML, so every shape stays individually editable in draw.io.

Requirements

• Node.js 18+

Roadmap

• PDF export (formal/legal document workflows)

• draw.io XML export (editable diagrams — flowcharts)

• npm package (mermaid-render-mcp)

• Remote-hosted server option

License

MIT