Server data from the Official MCP Registry
Renders Mermaid diagram syntax to PNG or SVG images for LLM clients
About
Renders Mermaid diagram syntax to PNG or SVG images for LLM clients
Security Report
Valid MCP server (2 strong, 3 medium validity signals). 3 known CVEs in dependencies (0 critical, 3 high severity) Package registry verified. Imported from the Official MCP Registry.
4 files analyzed · 4 issues found
Security scores are indicators to help you make informed decisions, not guarantees. Always review permissions before connecting any MCP server.
Permissions Required
This plugin requests these system permissions. Most are normal for its category.
How to Install
Add this to your MCP configuration file:
{
"mcpServers": {
"io-github-tci-nebula-mermaid-render-mcp": {
"args": [
"-y",
"mermaid-render-mcp"
],
"command": "npx"
}
}
}Documentation
View on GitHubFrom the project's GitHub README.
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
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
Reviews
No reviews yet
Be the first to review this server!
More Developer Tools MCP Servers
Git
Freeby Modelcontextprotocol · Developer Tools
Read, search, and manipulate Git repositories programmatically
Fetch
Freeby Modelcontextprotocol · Developer Tools
Web content fetching and conversion for efficient LLM usage
Toleno
Freeby Toleno · Developer Tools
Toleno Network MCP Server — Manage your Toleno mining account with Claude AI using natural language.
mcp-creator-python
Freeby mcp-marketplace · Developer Tools
Create, build, and publish Python MCP servers to PyPI — conversationally.
MarkItDown
Freeby Microsoft · Content & Media
Convert files (PDF, Word, Excel, images, audio) to Markdown for LLM consumption
MCP Marketplace
Freeby mcp-marketplace · Developer Tools
Search and install MCP servers from inside your AI client.