Draw.io MCP Server
OFFICIAL SERVEROfficial draw.io server that turns XML, Mermaid or CSV into diagrams shown in chat or opened in the editor
Render Mermaid diagram code into PNG, SVG, saved files or mermaid.ink links from a chat
By hustcc (individual) TypeScript Remote (hosted) · Streamable HTTPLocal · stdio Design
62 popularity score ★ 649 ↓ 818/wk
Opens the app, which asks before it adds the server.
claude mcp add mermaid -- npx -y mcp-mermaid{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": [
"-y",
"mcp-mermaid"
]
}
}
}{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": [
"-y",
"mcp-mermaid"
]
}
}
}{
"servers": {
"mermaid": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"mcp-mermaid"
]
}
}
}[mcp_servers.mermaid]
command = "npx"
args = ["-y", "mcp-mermaid"]gemini mcp add --scope user mermaid npx -- -y mcp-mermaidMCP Mermaid takes Mermaid diagram text (flowcharts, sequence diagrams, Gantt charts and the other Mermaid types) written by the assistant and turns it into a picture. It renders the diagram locally in a headless Chromium browser through Playwright, so a syntax error comes back as a tool error the assistant can read and correct on its next try.
The single tool, generate_mermaid_diagram, accepts a theme (default, base, forest, dark or neutral; default is default) and a background colour (white by default). The output form is picked per call with outputType: a base64 PNG image (the default), raw SVG text, the Mermaid source echoed back, a PNG written to disk, or an svg_url / png_url link on the public mermaid.ink service.
It runs over stdio by default, or as an HTTP server with --transport sse or --transport streamable, both on port 3033 unless --port is given. The code at version 0.4.1 also accepts a --host (-H) flag for the bind address, which the README's option list leaves out (src/index.ts). In file mode the PNG is saved under a generated name (mermaid-<timestamp>-<random>.png) in the server process's current working directory, with no setting to choose another folder (src/server.ts).
| To run it yourself | Node.js |
|---|
Node.js with npx. Installing the npm package runs a postinstall step, `playwright install --with-deps chromium`, which downloads Chromium and, on Linux, tries to install its system libraries; that needs network access and may need root rights on Linux. A Docker image (susuperli/mcp-mermaid) is offered for the HTTP transports.
Has one tool; it renders diagrams and does not read, edit or store existing diagram files. The rendering browser is started for every call, even when only a mermaid.ink link or the source text is asked for (src/server.ts). File output always goes to the working directory the server was started in. The svg_url and png_url modes rely on the public mermaid.ink service to draw the image when the link is opened. The README's Docker examples start SSE or streamable HTTP listeners, not stdio. With no --host the bind address is left to the HTTP library's default.
Suits someone who wants an assistant to draw architecture, flow or sequence diagrams and see the result inline, with no account or key. It runs locally and needs only Node and a downloadable Chromium, so it fits a desktop setup; where installing a browser is not possible, the hosted Smithery endpoint avoids that. For bar, line or map charts rather than Mermaid diagrams, its README points to mcp-server-chart from AntV. If only checking Mermaid syntax matters, a smaller validator may do.
generate_mermaid_diagram