Server data from the Official MCP Registry
MCP App that renders Mermaid diagrams as interactive UI in Claude, VS Code and other MCP clients
MCP App that renders Mermaid diagrams as interactive UI in Claude, VS Code and other MCP clients
Valid MCP server (2 strong, 0 medium validity signals). No known CVEs in dependencies. Package registry verified. Imported from the Official MCP Registry.
5 files analyzed · 1 issue found
Security scores are indicators to help you make informed decisions, not guarantees. Always review permissions before connecting any MCP server.
This plugin requests these system permissions. Most are normal for its category.
Add this to your MCP configuration file:
{
"mcpServers": {
"io-github-finfin-mermaid-mcp-app": {
"args": [
"-y",
"mermaid-mcp-app"
],
"command": "npx"
}
}
}From the project's GitHub README.
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.
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"
Edit the diagram source directly in the split-view editor, then send it back to the LLM to continue the conversation with your changes.

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

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

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

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

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

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

pie — Proportional data as pie slices with percentage labels.

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

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

timeline — Chronological events grouped by time period.

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

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

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

dark (auto-detected from system preference) and lightDownload the latest .mcpb from GitHub Releases and double-click to install. No terminal or configuration needed.
Add to ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": ["-y", "mermaid-mcp-app", "--stdio"]
}
}
}
Add to .vscode/mcp.json or user settings:
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": ["-y", "mermaid-mcp-app", "--stdio"]
}
}
}
# Install dependencies
npm install
# Build (view + server)
npm run build
# Watch mode (view only)
npm run dev
# Start server
npm start
Be the first to review this server!
by Modelcontextprotocol · Developer Tools
Read, search, and manipulate Git repositories programmatically
by Toleno · Developer Tools
Toleno Network MCP Server — Manage your Toleno mining account with Claude AI using natural language.
by mcp-marketplace · Developer Tools
Create, build, and publish Python MCP servers to PyPI — conversationally.