mermaid-live-mcp - From prompt to diagram in seconds
LocalAbout mermaid-live-mcp - From prompt to diagram in seconds
mermaid-live-mcp is an MCP server for generating Mermaid diagrams with a live browser preview. It supports diagram updates during a session and SVG or PNG export for AI assistant workflows.
Key features
- 01Generate Mermaid diagrams
- 02Open a live browser preview
- 03Update diagrams in real time
- 04List session diagrams
- 05Export diagrams as SVG or PNG
Use cases
- 01Preview a flowchart while drafting
- 02Revise a sequence diagram interactively
- 03Export a diagram for a document
- 04Review diagrams created in a session
MCP support
Exposes tools to generate, update, list, and export Mermaid diagrams to MCP clients. The generated diagram is rendered in a live browser preview.
Configuration
Local server config is the same for every client. Copy it into your client’s MCP config file.
Tools
4Saved tool list · updated 3w ago
| Parameter | Type | Required | Description |
|---|---|---|---|
| syntax | string | Yes | Mermaid diagram syntax (e.g. 'graph TD; A-->B;') |
| title | string | No | Optional title for the browser preview tab |
Details
From the project READMEmermaid-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
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.