mermaid-mcp-app

Mermaid MCP App

English | 繁體中文

An MCP App that renders Mermaid diagrams in an interactive viewer with pan, zoom, and a built-in source editor. Edit diagrams directly in the split-view editor and send the updated source back to the LLM to continue the conversation with your changes. Works in Claude Desktop, VS Code, and any MCP-App-compatible host.

Usage

Once configured, ask the LLM to draw a diagram:

"Draw a flowchart showing user authentication flow"

"Create a sequence diagram for an API request lifecycle"

"Render this mermaid diagram: `graph TD; A-->B; B-->C`"

You can also specify a theme explicitly:

"Draw a class diagram with light theme"

Features

Interaction with AI

Edit the diagram source directly in the split-view editor, then send it back to the LLM to continue the conversation with your changes.

!Send to AI

• Send to AI — sends the edited diagram source back to the LLM, triggering a response
• Auto context sync — LLM context is automatically updated as you type (debounced); the LLM always sees your latest source on the next message

Diagram Types (13 supported)

Flowchart

flowchart — General-purpose directed graphs. Supports top-down and left-right layouts, subgraphs, and various node shapes.

!Flowchart

Sequence Diagram

sequenceDiagram — Interaction between participants over time. Shows messages, loops, and alternative flows.

!Sequence Diagram

Class Diagram

classDiagram — Object-oriented class structure with attributes, methods, and relationships (inheritance, composition, etc.).

!Class Diagram

State Diagram

stateDiagram-v2 — Finite state machines with transitions, composite states, and concurrency.

!State Diagram

ER Diagram

erDiagram — Entity-relationship diagrams for data modeling with cardinality annotations.

!ER Diagram

Gantt Chart

gantt — Project timelines with tasks, milestones, dependencies, and critical paths.

!Gantt Chart

Pie Chart

pie — Proportional data as pie slices with percentage labels.

!Pie Chart

Git Graph

gitGraph — Git branch and commit history visualization with merge and cherry-pick flows.

!Git Graph

Mindmap

mindmap — Hierarchical tree of ideas radiating from a central root node.

!Mindmap

Timeline

timeline — Chronological events grouped by time period.

!Timeline

User Journey

journey — User experience flows scored by satisfaction level across sections and actors.

!User Journey

Requirement Diagram

requirementDiagram — System requirements with type, risk, and verification method, linked to design elements.

!Requirement Diagram

Quadrant Chart

quadrantChart — Four-quadrant scatter plot for prioritization and positioning analysis.

!Quadrant Chart

UI

• Pan & zoom — mouse drag to pan, scroll wheel to zoom, pinch-to-zoom on touch
• Fit to container — auto-fits diagram on render; reset button restores fit
• Copy SVG — copies the rendered SVG to clipboard
• Split-view source editor — always-visible editor panel with live re-render (400ms debounce)
• Minimizable editor — collapse to a compact bottom bar; expand with one click
• Vertical / horizontal layout toggle — source below (vertical) or to the right (horizontal); minimized state always snaps to the bottom
• Theme support — dark (auto-detected from system preference) and light

Installation

Claude Desktop — Extension (recommended)

Download the latest .mcpb from GitHub Releases and double-click to install. No terminal or configuration needed.

Claude Desktop — Manual

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-mcp-app", "--stdio"]
    }
  }
}

VS Code

Add to .vscode/mcp.json or user settings:

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-mcp-app", "--stdio"]
    }
  }
}

Development

# Install dependencies
npm install

# Build (view + server)
npm run build

# Watch mode (view only)
npm run dev

# Start server
npm start