About Mermaid Live MCP
Mermaid Live MCP is an MCP server published by iishyfishyy in the Developer Tools category: mCP server: Mermaid Live MCP. It has been installed 0 times through Conduid.
The repository has 8 stars and 0 forks, with the last commit 7 months ago. Six months or more without a commit doesn't mean the server is broken, but check the open issues (0) before depending on it in production.
Install
npx mermaid-live-mcpThis server has no ConduID identity, so agent calls to it are not receipted. Pin the version you install and review the source before granting it credentials.
Ask AI
Ask AI about Mermaid Live MCP
Powered by Claude · Grounded in docs
Security checks
- ·README presentNot checked yet.
- ·License declaredNot checked yet.
- ·Tests presentNot checked yet.
- ·Dependencies pinnedNot checked yet.
- ·No dynamic code executionNot checked yet.
- !Scoped permissionsDoesn't declare a permission scope. Assume it can do anything its process can.
README
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
README mirrored from the source repository 3 months ago. The original is authoritative.