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 — 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.

Sequence Diagram

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

Class Diagram

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

State Diagram

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

ER Diagram

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

Gantt Chart

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

Pie Chart

pie — Proportional data as pie slices with percentage labels.

Git Graph

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

Mindmap

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

Timeline

timeline — Chronological events grouped by time period.

User Journey

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

Requirement Diagram

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

Quadrant Chart

`quad

... View full README on GitHub