Claude Mermaid MCP Server

Render Mermaid diagrams in Claude Code with live-reload browser preview and SVG/PNG/PDF export.

Unverified

stdio (local)

No auth

TypeScript

View repo 170 Website npm

Add to your client

Copy the config for your MCP client and paste it into its config file.

Install / run

npm install -g claude-mermaid

Paste into ~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "claude-mermaid-mcp-server": {
      "command": "claude-mermaid",
      "args": []
    }
  }
}

Step-by-step guides: Add to Claude Desktop · Add to Cursor · Add to Windsurf

Before you start

Node.js with npm (for global install via 'npm install -g claude-mermaid')
An MCP-compatible client (Claude Code, Codex, Cursor, Cline, Windsurf, or Gemini CLI)
A web browser for viewing live previews

About Claude Mermaid MCP Server

MCP server that renders Mermaid diagrams in the browser with live reload, multiple themes, and SVG/PNG/PDF export. It opens an interactive preview (pan, zoom, reset, download) at http://localhost:3737/{preview_id} that auto-refreshes over WebSocket as the diagram is edited, and supports multiple concurrent diagrams via preview_id. Optimized for Claude Code with a bundled mermaid-diagrams skill, but compatible with any MCP client.

Tools & capabilities (2)

mermaid_preview

Render and open a live preview of a Mermaid diagram. Params: diagram (string, required), preview_id (string, required — identifies the preview session for concurrent diagrams), format (svg|png|pdf, default svg; live preview only for svg), theme (default|forest|dark|neutral, default default), background (default white), width (default 800), height (default 600), scale (default 2).

mermaid_save

Save the current live diagram to a path. Params: save_path (string, required — e.g. ./docs/diagram.svg), preview_id (string, required — must match the one used in mermaid_preview), format (svg|png|pdf, default svg; rendered on demand if the working file for that format does not yet exist).

When to use it

Iteratively developing Mermaid diagrams with instant live-reload feedback in the browser
Generating flowcharts, sequence diagrams, ER diagrams, and class diagrams from natural-language requests in Claude Code
Exporting diagrams to SVG, PNG, or PDF for documentation and READMEs
Working on multiple diagrams simultaneously using separate preview_id sessions
Browsing and exporting previously rendered diagrams via the standalone gallery server

Security notes

Runs locally over stdio with no authentication. Spawns a local preview web server on ports 3737-3747 (auto-selects an available port). Optional debug logging via the CLAUDE_MERMAID_LOG_LEVEL env var writes to ~/.config/claude-mermaid/logs/.

Claude Mermaid MCP Server FAQ

Which output formats and themes are supported?

Export to SVG, PNG, or PDF, with themes default, forest, dark, and neutral. The browser always shows SVG for live preview; live reload is available for the svg format only, while PNG/PDF are rendered without live reload.

How do I use it with clients other than Claude Code?

Add a standard mcpServers entry with command 'claude-mermaid' to your client's MCP config. The README documents specific setups for Codex (~/.codex/mcp_settings.json), Cursor (.cursor/mcp.json), Cline, Windsurf, and Gemini CLI.

How does live reload work and which ports does it use?

On first render it opens the diagram at http://localhost:3737/{preview_id}; subsequent edits are detected over a WebSocket and the browser auto-refreshes. The server uses ports 3737-3747 and automatically finds an available one. A status indicator shows green (connected) or red (reconnecting).

Can I run the preview server without an AI agent?

Yes. Run 'claude-mermaid --serve' to open the diagram gallery in your browser with all previously rendered diagrams, useful for browsing and exporting outside a Claude Code session.

#mermaid #diagrams #live-reload #claude-code #visualization #svg #documentation

Alternatives to Claude Mermaid MCP Server

Compare all alternatives →

Figma Context MCP (figma-developer-mcp)

Design & Media

15k

Popular community server that feeds Figma layout data to coding agents via a Figma API token.

Verified

stdio (local)

API key

TypeScript

2 tools

Updated 23 days agoRepo

21st.dev Magic MCP

Design & Media

5.2k

Generate beautiful, modern UI components from natural-language descriptions inside your IDE.

Unverified

stdio (local)

API key

TypeScript

4 tools

Updated 4 months agoRepo

Shadcn UI v4 MCP Server

Design & Media

2.8k

Give AI assistants full access to shadcn/ui v4 components, blocks, demos, and metadata across React, Svelte, Vue, and React Native.

Unverified

stdio (local)

API key

TypeScript

7 tools

Updated 1 month agoRepo

Compare Claude Mermaid MCP Server with:

vs Figma Context MCP (figma-developer-mcp)vs 21st.dev Magic MCP vs Shadcn UI v4 MCP Server vs MiniMax MCP Server (Official)