{
  "markdown": "# Mermaid MCP App\n\nEnglish | [繁體中文](README.zh-TW.md)\n\nAn MCP App that renders [Mermaid](https://mermaid.js.org/) 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.\n\n## Usage\n\nOnce configured, ask the LLM to draw a diagram:\n\n```\n\"Draw a flowchart showing user authentication flow\"\n\n\"Create a sequence diagram for an API request lifecycle\"\n\n\"Render this mermaid diagram: `graph TD; A-->B; B-->C`\"\n```\n\nYou can also specify a theme explicitly:\n\n> \"Draw a class diagram with light theme\"\n\n## Features\n\n### Interaction with AI\n\nEdit the diagram source directly in the split-view editor, then send it back to the LLM to continue the conversation with your changes.\n\n![Send to AI](https://raw.githubusercontent.com/finfin/mermaid-mcp-app/master/assets/images/send-to-ai.png)\n\n- **Send to AI** — sends the edited diagram source back to the LLM, triggering a response\n- **Auto context sync** — LLM context is automatically updated as you type (debounced); the LLM always sees your latest source on the next message\n\n### Diagram Types (13 supported)\n\n#### Flowchart\n\n`flowchart` — General-purpose directed graphs. Supports top-down and left-right layouts, subgraphs, and various node shapes.\n\n![Flowchart](https://raw.githubusercontent.com/finfin/mermaid-mcp-app/master/assets/images/flowchart.png)\n\n#### Sequence Diagram\n\n`sequenceDiagram` — Interaction between participants over time. Shows messages, loops, and alternative flows.\n\n![Sequence Diagram](https://raw.githubusercontent.com/finfin/mermaid-mcp-app/master/assets/images/sequence-diagram.png)\n\n#### Class Diagram\n\n`classDiagram` — Object-oriented class structure with attributes, methods, and relationships (inheritance, composition, etc.).\n\n![Class Diagram](https://raw.githubusercontent.com/finfin/mermaid-mcp-app/master/assets/images/class-diagram.png)\n\n#### State Diagram\n\n`stateDiagram-v2` — Finite state machines with transitions, composite states, and concurrency.\n\n![State Diagram](https://raw.githubusercontent.com/finfin/mermaid-mcp-app/master/assets/images/state-diagram.png)\n\n#### ER Diagram\n\n`erDiagram` — Entity-relationship diagrams for data modeling with cardinality annotations.\n\n![ER Diagram](https://raw.githubusercontent.com/finfin/mermaid-mcp-app/master/assets/images/er-diagram.png)\n\n#### Gantt Chart\n\n`gantt` — Project timelines with tasks, milestones, dependencies, and critical paths.\n\n![Gantt Chart](https://raw.githubusercontent.com/finfin/mermaid-mcp-app/master/assets/images/gantt-chart.png)\n\n#### Pie Chart\n\n`pie` — Proportional data as pie slices with percentage labels.\n\n![Pie Chart](https://raw.githubusercontent.com/finfin/mermaid-mcp-app/master/assets/images/pie-chart.png)\n\n#### Git Graph\n\n`gitGraph` — Git branch and commit history visualization with merge and cherry-pick flows.\n\n![Git Graph](https://raw.githubusercontent.com/finfin/mermaid-mcp-app/master/assets/images/git-graph.png)\n\n#### Mindmap\n\n`mindmap` — Hierarchical tree of ideas radiating from a central root node.\n\n![Mindmap](https://raw.githubusercontent.com/finfin/mermaid-mcp-app/master/assets/images/mindmap.png)\n\n#### Timeline\n\n`timeline` — Chronological events grouped by time period.\n\n![Timeline](https://raw.githubusercontent.com/finfin/mermaid-mcp-app/master/assets/images/timeline.png)\n\n#### User Journey\n\n`journey` — User experience flows scored by satisfaction level across sections and actors.\n\n![User Journey](https://raw.githubusercontent.com/finfin/mermaid-mcp-app/master/assets/images/user-journey.png)\n\n#### Requirement Diagram\n\n`requirementDiagram` — System requirements with type, risk, and verification method, linked to design elements.\n\n![Requirement Diagram](https://raw.githubusercontent.com/finfin/mermaid-mcp-app/master/assets/images/requirement-diagram.png)\n\n#### Quadrant Chart\n\n`quadrantChart` — Four-quadrant scatter plot for prioritization and positioning analysis.\n\n![Quadrant Chart](https://raw.githubusercontent.com/finfin/mermaid-mcp-app/master/assets/images/quadrant-chart.png)\n\n### UI\n\n- **Pan & zoom** — mouse drag to pan, scroll wheel to zoom, pinch-to-zoom on touch\n- **Fit to container** — auto-fits diagram on render; reset button restores fit\n- **Copy SVG** — copies the rendered SVG to clipboard\n- **Split-view source editor** — always-visible editor panel with live re-render (400ms debounce)\n- **Minimizable editor** — collapse to a compact bottom bar; expand with one click\n- **Vertical / horizontal layout toggle** — source below (vertical) or to the right (horizontal); minimized state always snaps to the bottom\n- **Theme support** — `dark` (auto-detected from system preference) and `light`\n\n## Installation\n\n### Claude Desktop — Extension (recommended)\n\nDownload the latest `.mcpb` from [GitHub Releases](https://github.com/finfin/mermaid-mcp-app/releases) and double-click to install. No terminal or configuration needed.\n\n### Claude Desktop — Manual\n\nAdd to `~/Library/Application Support/Claude/claude_desktop_config.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"mermaid\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"mermaid-mcp-app\", \"--stdio\"]\n    }\n  }\n}\n```\n\n### VS Code\n\nAdd to `.vscode/mcp.json` or user settings:\n\n```json\n{\n  \"mcpServers\": {\n    \"mermaid\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"mermaid-mcp-app\", \"--stdio\"]\n    }\n  }\n}\n```\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Build (view + server)\nnpm run build\n\n# Watch mode (view only)\nnpm run dev\n\n# Start server\nnpm start\n```\n",
  "bytes": 5666,
  "sha": "513e5311aba72a96a16250cd9f0e1bd397a6d52c073b211a908bda0c2d2f6014",
  "repo_slug": "finfin/mermaid-mcp-app",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_finfin_mermaid_mcp_app_9ae27863/readme"
}