claude-mermaid

MCP server for rendering Mermaid diagrams in Claude Code with live reload functionality and a built-in skill for expert guidance.

Automatically renders diagrams in your browser with real-time updates as you refine them. Perfect for iterative diagram development and documentation workflows.

• 🔄 Live Reload - Diagrams auto-refresh in your browser as you edit
• 🎨 Multiple Save Formats - Export to SVG, PNG, or PDF
• 🌈 Themes - Choose from default, forest, dark, or neutral themes
• 📐 Customizable - Control dimensions, scale, and background colors
• 🪄 Interactive Preview - Pan diagrams by dragging, zoom with browser controls, reset position with one click
• ⬇️ Browser Export - Download diagrams as SVG or PNG directly from the preview
• 🗂️ Multiple Previews - Use preview_id to work on multiple diagrams simultaneously
• 💾 Persistent Working Files - Live previews are stored under ~/.config/claude-mermaid/live
• 🤖 Built-in Skill - Includes a Claude skill with best practices and expert guidance for creating diagrams

<details> <summary>Project Architecture Diagram</summary>

</details>

<details> <summary>User Workflow Diagram</summary>

</details>

<details> <summary>Dependencies Diagram</summary>

</details>

Plugin Install (Recommended)

In Claude Code, add the marketplace and install the plugin:

/plugin marketplace add veelenga/claude-mermaid
/plugin install claude-mermaid@claude-mermaid

The