mermaid-live-mcp
An MCP server that generates live Mermaid diagrams from any AI assistant.
mermaid-live-mcp
MCP server for generating Mermaid diagrams with live browser preview. Renders diagrams in real-time and supports SVG/PNG export.
Install
Claude Desktop
Add to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": ["-y", "mermaid-live-mcp"]
}
}
}
Cursor
Add to .cursor/mcp.json in your project root:
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": ["-y", "mermaid-live-mcp"]
}
}
}
Claude Code
claude mcp add mermaid -- npx -y mermaid-live-mcp
Windsurf
Add to ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": ["-y", "mermaid-live-mcp"]
}
}
}
Tools
| Tool | Description |
|---|---|
generate_mermaid | Generate a diagram from Mermaid syntax and open a live preview in the browser |
update_diagram | Replace a diagram's Mermaid syntax and re-render the live preview |
list_diagrams | List all diagrams generated in the current session |
export_diagram | Write a diagram's SVG to disk |
How it works
When you ask your AI assistant to create a diagram, mermaid-live-mcp will:
- Parse the Mermaid syntax
- Open a browser tab with a live preview
- Render the diagram as SVG in real-time via WebSocket
- Provide download buttons for SVG and PNG export
Updates to a diagram are pushed instantly to the browser — no page refresh needed.
Supported diagram types
All Mermaid diagram types are supported, including flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, git graphs, mindmaps, timelines, and more.
Development
pnpm install
pnpm build
Project structure
| Package | Description |
|---|---|
packages/mcp-server | MCP server (published as mermaid-live-mcp) |
packages/preview | Live browser preview via WebSocket |
packages/core | Diagram parsing, layout, and SVG rendering |
packages/cli | Command-line interface |
License
MIT
Serveurs connexes
Kone.vc
sponsorMonetize your AI agent with contextual product recommendations
aap-mcp
Ansible Automation Platform 2.4 management mcp
Unchained Engine
E-Commerce Engine with built-in MCP Server
Cal.com Calendar
Integrates with the Cal.com Calendar API for appointment scheduling.
EmoVideoAna
analytics emotion of video
Mimic AI
Transforms HTML into Figma using only your design system, enforcing correct component usage and falling back safely when needed, while improving accuracy with every build.
Odoo MCP Pro (cloud based)
A hosted or self-hosted cloud version of Odoo MCP
agent-reader
Glama AAA-certified MCP server for document beautification. It bridges the "last mile" of AI content delivery by instantly converting Markdown into professional Word, PDF, HTML, and Slideshows.
remi
Apple Reminders CLI and MCP server with section support and iCloud sync - the only tool that can create, manage, and sync sections across devices
floor plan generator
BuildFloorPlan is an AI floor plan generator for homeowners, interior designers, builders, and small planning teams who need to move from rough input to a reviewable layout faster. It turns short briefs, sketches, images, and PDFs into clearer floor plan outputs in seconds, supports technical 2D layouts, colored presentation-ready plans, and quick 3D previews, and helps users compare layout directions before renovation, client presentation, or internal review. It is designed for fast first drafts, supports editing and refinement workflows, and does not require CAD experience. You can start free with starter credits, and paid plans add more credits, longer history, and commercial usage options.
Outline MCP Server
MCP server for the Outline knowledge base and document management tool.