Mermaid MCP App

What it does

Mermaid MCP App embeds a fully interactive Mermaid diagram renderer directly inside Claude Desktop and VS Code Copilot. Ask the LLM to draw any diagram type — flowcharts, sequence diagrams, ER diagrams, Gantt charts, and 9 more — and an interactive split-view panel opens with pan, zoom, and a live source editor. Edit the diagram inline and send it back to the LLM to continue the conversation with your changes.

Key features

• 13 diagram types — flowchart, sequence, class, state, ER, Gantt, pie, git graph, mindmap, timeline, user journey, requirement, quadrant chart
• Split-view editor — always-visible source panel with live re-render (400 ms debounce); collapse to a compact bottom bar
• Send to AI — one click sends your edited diagram source back to the LLM as context for the next turn
• Pan, zoom, fit — drag to pan, scroll to zoom, pinch on touch; fit-to-container button resets the view
• Dark / light themes — auto-detects system preference; overridable per diagram
• Copy SVG — exports the rendered diagram to clipboard

Installation

Claude Desktop (extension — recommended)

Download the latest .mcpb file from GitHub Releases and double-click to install. No terminal 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 Copilot

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

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

Supported hosts

Claude Desktop and VS Code Copilot confirmed in README.