Agentic Mermaid — Claude Code MCP server: setup and features
Renders Mermaid diagrams into SVG, PNG, or terminal ASCII while giving coding agents structured tools to mutate nodes safely.
claude mcp add --transport http agentic-mermaid https://agentic-mermaid.dev/mcpWhat Agentic Mermaid does
This server gives coding assistants a dedicated pipeline to parse, inspect, and update Mermaid charts. Instead of asking the model to rewrite complete diagram strings, it applies typed mutations like adding single nodes. The internal SVG generator runs synchronously without launching Puppeteer or keeping a headless browser active.
Outputs include vector SVG, raster PNG, JSON layout data, plus plain ASCII or Unicode text for fast terminal reviews. Built-in styles include hand-drawn, blueprint, and watercolor. Running the package locally requires Node 22 or higher, because the codebase ships strictly as ECMAScript modules without CommonJS builds.
What it helps with
- Render Mermaid graphs to SVG or PNG without running Puppeteer
- Apply structured node mutations instead of rewriting complete diagram files
- Output terminal-friendly ASCII representations to inspect graph layouts
- Style diagrams using built-in themes like
blueprintorhand-drawn
Example prompts for the agent
- Generate an authentication flow diagram in SVG using the
blueprintvisual preset. - Add a Redis cache node to
architecture.mmdwithout altering existing connection syntax. - Render the service topology as pure ASCII text directly in this chat.
How to install Agentic Mermaid
1Platform CLI: remote server
claude mcp add --transport http agentic-mermaid https://agentic-mermaid.dev/mcp2Platform CLI
claude mcp add agentic-mermaid -- npx -y agentic-mermaid1Platform CLI: remote server
codex mcp add agentic-mermaid --url https://agentic-mermaid.dev/mcp2Platform CLI
codex mcp add agentic-mermaid -- npx -y agentic-mermaidConfig file
{
"mcpServers": {
"agentic-mermaid": {
"url": "https://agentic-mermaid.dev/mcp"
}
}
}{
"mcpServers": {
"agentic-mermaid": {
"command": "npx",
"args": [
"-y",
"agentic-mermaid"
]
}
}
}Config file
{
"servers": {
"agentic-mermaid": {
"type": "http",
"url": "https://agentic-mermaid.dev/mcp"
}
}
}{
"servers": {
"agentic-mermaid": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"agentic-mermaid"
]
}
}
}1Platform CLI: remote server
gemini mcp add -t http agentic-mermaid https://agentic-mermaid.dev/mcp2Platform CLI
gemini mcp add agentic-mermaid npx -y agentic-mermaidStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Agentic Mermaid
How to install Agentic Mermaid in Claude Code?
Add the hosted HTTP endpoint by running claude mcp add --transport http agentic-mermaid https://agentic-mermaid.dev/mcp. Alternatively, configure a local stdio instance with claude mcp add agentic-mermaid -- npx -y agentic-mermaid.
What makes Agentic Mermaid different from standard Mermaid CLI tools?
It provides typed mutation operations so agents can modify diagrams safely step by step. Its SVG engine is also synchronous and avoids browser dependencies like Puppeteer.
What runtime is required for local execution?
You need Node version 22 or higher. The project distributes ES modules exclusively, meaning CommonJS require() is not supported directly.
