Mermaid Render

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.

Docker

No Node.js or Chromium download needed — the image ships with everything (including CJK fonts for Japanese/Chinese/Korean labels):

claude mcp add mermaid -- docker run -i --rm tcinebula/mermaid-render-mcp

To use output_path, mount a host directory and write into it:

{
  "mcpServers": {
    "mermaid": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "-v", "C:\\diagrams:/out", "tcinebula/mermaid-render-mcp"]
    }
  }
}

Then pass output_path: "/out/figure.pdf" and the file appears in C:\diagrams.

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

Tool: render_diagram

Parameter	Type	Default	Description
syntax	string	(required)	Mermaid diagram definition
format	png | svg | pdf | drawio	png	Output format (drawio = editable draw.io XML, flowcharts only)
theme	default | dark | neutral | forest	default	Visual theme
background	string	white	CSS colour or transparent
width	number	1200	Canvas width in px (PNG only)
pdfFit	boolean	true	Scale the PDF page to fit the diagram (PDF only)
output_path	string	—	Write the result to this file path instead of returning base64

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