Mermaid MCP App

What it does

Mermaid MCP App renders any Mermaid diagram syntax as an interactive, fully-featured UI panel inside your MCP client. Send a diagram definition and get back a live, pannable, zoomable diagram — no partial streaming, always fully rendered before display.

Key features

• Live fullscreen editor — edit Mermaid syntax with real-time preview, zoom controls (+/−/1:1), and drag-to-pan on large diagrams
• SVGO-optimized export — one-click SVG copy to clipboard with ~85% file size reduction (e.g. 334 KB → 51 KB)
• Auto dark mode — detects system theme and applies a neutral gray palette; agent can also force forest, dark, neutral, or base themes
• All diagram types — flowcharts, sequence, class, state, ER, Gantt, pie, git graphs, and more
• Zero server dependencies for rendering — client-side React 19 + Mermaid.js, single-file HTML bundle

Installation

Claude.ai (hosted — easiest): Go to Settings → Connectors → Add custom connector and paste:

https://mermaid-mcp-app.vercel.app/mcp

Claude Desktop (local stdio):

{
  "mcpServers": {
    "mermaid": {
      "command": "node",
      "args": ["/path/to/mermaid-mcp-app/dist/index.js", "--stdio"]
    }
  }
}

VS Code Copilot (remote HTTP):

{
  "github.copilot.chat.mcp.servers": {
    "mermaid": {
      "url": "https://mermaid-mcp-app.vercel.app/mcp"
    }
  }
}

Supported hosts

Claude Desktop (stdio), Claude.ai web (HTTP), VS Code Copilot (HTTP)