claude-mermaid

Claude Code users can leverage the Claude Mermaid MCP Server to render Mermaid diagrams with live reload directly in their workflow. The server exposes two tools: mermaid_preview, which renders a live preview of a Mermaid diagram in your browser, and mermaid_save, which saves the current live diagram to a specified path in your project. Use mermaid_preview to iterate visually, adjusting diagram code and seeing real-time updates, then use mermaid_save to export the final diagram to formats like SVG, PNG, or PDF. The server supports multiple preview sessions via preview_id, so you can work on several diagrams at once (for example architecture and flow) without clashing previews. The working files for live previews are stored under your home config directory, enabling persistent editing sessions across restarts.

Prerequisites:\n- Node.js and npm installed on your system.\n- Claude Code installed (optional, but recommended for best integration).\n\nInstallation steps:\n1) Install the MCP server package globally:\nbash\nnpm install -g claude-mermaid\n\n2) Verify the CLI is available:\nbash\nclaude-mermaid --version\n\n3) Ensure the MCP client configuration points to the mermaid command (the MCP config generator will typically handle this when you add the server):\njson\n{\n "mcpServers": {\n "mermaid": {\n "command": "claude-mermaid"\n }\n }\n}\n\n4) (Optional) If you prefer to install from source, clone the repository and install dependencies, then build if required by the workflow.\nbash\ngit clone https://github.com/veelenga/claude-mermaid.git\ncd claude-mermaid\nnpm install\nnpm run build\n

Tips and common considerations:\n- The MCP server command should be available in your PATH as claude-mermaid. If your environment requires an absolute path, use that path in your mcp.json instead.\n- The live preview supports SVG by default. If you need PNG or PDF exports, use mermaid_save with format set accordingly.\n- Manage multiple diagrams by assigning different preview_id values (e.g., architecture, flow).\n- If you encounter connectivity issues with Claude Code, restart the MCP client and verify that claude-mermaid is reachable from your shell.\n- For advanced usage, you can customize themes, dimensions, and background through mermaid_preview options.\n- The server stores persistent working files under ~/.config/claude-mermaid/live on Unix-like systems (adjust for your OS).