Mermaid Render
About
Renders Mermaid diagram syntax to PNG or SVG images with configurable themes and backgrounds.
Details
- Author
- tci-nebula
- Categories
- Developer Tools, Other, Design
Jump to
Setup
Install Mermaid Render in your MCP client (Claude Desktop, Cursor, Windsurf, and others).
Repository: https://github.com/tci-nebula/mermaid-mcp
Follow the installation instructions in the repository README, then restart your MCP client.
AnMCPserver that rendersMermaiddiagrams to PNG, SVG, or PDF — or converts them to editabledraw.iofiles. Give your LLM the ability to turn diagram syntax into actual images and documents.
claude mcp add mermaid -- npx -y mermaid-render-mcp
{ "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. If you only need flowcharts and can work with editable files, thedrawiofast pathskips Chromium entirely.
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 useoutput_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 passoutput_path: "/out/figure.pdf"and the file appears inC:\diagrams.
The same server speaksStreamable HTTPwhenPORTis set (orMCP_TRANSPORT=http), so it can be deployed to any container host — Railway, Fly.io, etc. — straight from the Dockerfile:
- Endpoint:POST /mcp(health check at/healthz)
- SetAUTH_TOKENto requireAuthorization: Bearer <token>
- output_pathis disabled in HTTP mode; base64/XML responses only
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
Returns the rendered image as base64-encoded data so MCP clients can display it inline — or, withoutput_path, writes the file to disk (handy for PDFs destined for printing or formal document submission).
"Draw me a flowchart of the OAuth login flow"
It generates the Mermaid syntax, callsrender_diagram, and you get back a PNG.
format: "drawio"is the one output that never touches a browser. It's pure JavaScript — parse, lay out with dagre, emit XML — so there's no Chromium download, no ~150 MB install, and no multi-minute first run. Conversion is effectively instant.
- you want the diagrameditablerather than flat — every shape stays a real draw.io object
- you're on a constrained box (CI, a slim container, a locked-down laptop) where downloading Chromium isn't practical
- you just want the diagram now and don't need a raster image
{ "syntax": "flowchart TD\n A[Start] --> B{OK?}\n B -->|yes| C[Ship]\n B -->|no| A", "format": "drawio", "output_path": "flow.drawio" }
Open the result indraw.io(or the VS Code extension) and export to PNG/SVG/PDF from there if you do need an image — that's a complete Chromium-free round trip.
- Flowcharts only.flowchartandgraphdiagrams convert; sequence, class, state, ER, and gantt throw an error. Use PNG/SVG/PDF for those.
- theme,background, andwidthare ignored.Styling is draw.io's job once the file is open.
- Node sizes are estimatedfrom label length, not measured font metrics. draw.io re-measures text when it opens the file so boxes settle correctly — but treat the raw XML geometry as approximate.
Supported syntax: directionsTD/TB/BT/LR/RL; shapes[rect],(rounded),{rhombus},((circle)),([stadium]),[[subroutine]],[(cylinder)],{{hexagon}}; edges-->,---,-.->,==>,<-->, each optionally carrying a|label|.
PNG, SVG, and PDF rendering shells out to@mermaid-js/mermaid-cli(bundled as a dependency), which uses a headless Chromium to render diagrams. Firstnpm installdownloads Chromium (~150 MB), so it takes a few minutes.
draw.io export is pure JavaScript — a flowchart parser plusdagrelayout (the same engine Mermaid uses) emit native mxGraphModel XML, so every shape stays individually editable in draw.io.
- PDF export (formal/legal document workflows)
- draw.io XML export (editable diagrams — flowcharts)
- npm package (mermaid-render-mcp)
- Remote-hosted server option (Streamable HTTP transport)
This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.
AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform
Get access to MCP server SVG and MCP server PNG icons in your vibe-coding projects
745+ CSS3 animations and 9,000+ real SVG icons for AI coding agents. 10 MCP tools. Zero-clone setup via npx.
Create, validate, and render diagrams from D2 (Declarative Diagramming) code into SVG and PNG formats.
Extract and download usable website favicons and return direct icon URLs and metadata through an MCP server.
Quickly retrieve SVGs using the Iconify API, with no external data files required.
A MCP server that exposes SVGR functionality to convert SVG content into React components
Provides access to the Lucide icon library for use in LLM and agentic applications.
Search open SVG icon packs and fetch exact SVG markup from coding agents through MCP.
Render chart images from JSON configs with six themes, ten marks, PNG/SVG output.
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
