Log inSubmit server
Mermaid MCP App logo

Mermaid MCP App

Renders editable Mermaid diagrams in an interactive MCP App with pan, zoom, themes, and source synchronization.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Mermaid MCP App

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "mermaid-mcp-app": {
      "command": "npx",
      "args": [
        "-y",
        "mermaid-mcp-app"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

We couldn’t confirm it starts correctly

The install command started, but didn't respond the way we expected when we tried to talk to it.

npx -y mermaid-mcp-app

initialize succeeded but no response to tools/list.

This is an experimental automated check and can have false negatives — missing environment variables, a slow cold install, etc. It doesn’t necessarily mean something’s wrong. Last checked 9d ago.

Overview

The mermaid-mcp-app MCP server renders Mermaid diagrams as an interactive viewer inside supported MCP hosts. It provides a split-view source editor, live updates, pan and zoom controls, theme selection, and a way to send edited source back to the LLM. Configure it over stdio in Claude Desktop or VS Code, then ask the LLM to create or render a supported diagram. Reach for it when diagram editing and visual inspection need to happen within the MCP conversation.

Use cases

  • Draw authentication and API flow diagrams
  • Edit Mermaid source while reviewing the rendered diagram
  • Send revised diagram source back to the LLM
  • Visualize project timelines and Git histories
  • Copy rendered diagrams as SVG

Key features

  • Interactive Mermaid diagram viewer
  • Split-view source editor with live rendering
  • Pan, zoom, and fit-to-container controls
  • 13 supported Mermaid diagram types
  • Light and dark theme support
  • Edited-source synchronization with the LLM

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 1d ago

Recent health check succeeded.

9/9 checks healthy over the last 47d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 5d ago via OSV.dev · mermaid-mcp-app (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars1Stargazers on the source repository.
npm downloads214Package downloads in the last 30 days.
Last commit7mo agoMost recent push to the default branch.
Install checkInconclusiveStarted but did not complete the MCP handshake in our test.
Directory activity1 viewsConfig copies, upvotes, and views on AllMCPs.

How Mermaid MCP App works

What mermaid-mcp-app does

The mermaid-mcp-app MCP server turns Mermaid diagram source into an interactive viewer for MCP-App-compatible hosts. It supports 13 diagram types: flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, pie charts, Git graphs, mindmaps, timelines, user journeys, requirement diagrams, and quadrant charts.

The viewer is intended for iterative work with an LLM. Users can edit the Mermaid source in a split view, inspect the updated rendering, and send the changed source back to the model. The source is also synchronized to the LLM context while typing, with a debounce applied to updates.

How it works

The server runs through the MCP stdio transport when launched with npx. An MCP host starts the process, and the app presents the rendered Mermaid diagram and its editing controls in the host UI. Prompts can request a new diagram, such as an authentication flow, an API request sequence, or a supplied Mermaid snippet.

Rendering updates after source edits with a 400 ms delay. The viewer automatically fits a diagram when it renders and includes a control to restore that fit. Users can drag to pan, use the scroll wheel to zoom, or use pinch gestures on touch devices. Rendered SVG can be copied to the clipboard.

Setup and configuration

For Claude Desktop, the project documents two installation paths. The recommended option is downloading the latest .mcpb package from GitHub Releases and opening it, which avoids manual terminal configuration. Alternatively, add an MCP server entry that runs npx -y mermaid-mcp-app --stdio to the Claude Desktop configuration file.

VS Code can use the same stdio command in .vscode/mcp.json or user settings. The documented configuration gives the server the name mermaid and starts it with npx.

Tools and capabilities

The interface includes a source editor that can be displayed below the diagram or beside it. The editor can be minimized into a bottom bar and reopened when needed. A vertical or horizontal layout toggle controls the expanded editor position; the minimized view stays at the bottom.

Themes include light and dark. Dark mode is detected from the system preference, and prompts may also request a theme explicitly. The app includes a “Send to AI” action for submitting edited source and continuing the conversation with the changes.

Limitations and notes

The README identifies Claude Desktop, VS Code, and MCP-App-compatible hosts as supported environments. It does not provide a list of named MCP tools, authentication settings, environment variables, or support claims for individual clients beyond those hosts.

Diagram support is limited to the 13 Mermaid types listed above. Mermaid syntax and rendering behavior therefore remain relevant when a diagram does not display as expected. The documentation describes live source re-rendering, but does not state that diagrams are saved or exported as files; the explicitly documented copy option copies the rendered SVG to the clipboard.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Mermaid MCP App

mermaid-mcp-app is an MCP server that connects MCP hosts to an interactive Mermaid diagram viewer. Its main capabilities are rendering 13 Mermaid diagram types, editing source in a split-view editor, synchronizing changes with the LLM, and providing pan, zoom, fit-to-container, theme, SVG copy, and send-to-AI controls.

Install it in Claude Desktop by opening the latest `.mcpb` release, or configure `npx -y mermaid-mcp-app --stdio` manually. VS Code uses the same stdio command in `.vscode/mcp.json` or user settings.

It states that the app works in Claude Desktop, VS Code, and any MCP-App-compatible host, so Cursor compatibility depends on whether its host support meets that requirement.

mermaid-mcp-app supports 13 types: flowchart, sequence, class, state, ER, Gantt, pie, Git graph, mindmap, timeline, user journey, requirement, and quadrant charts.

Related MCP servers

All in Data Visualization All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewMermaid MCP App AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/mermaid-mcp-app?style=directory)](https://allmcps.com/mcp/mermaid-mcp-app)
HTML Embed
<a href="https://allmcps.com/mcp/mermaid-mcp-app"><img src="https://allmcps.com/api/badge/mermaid-mcp-app?style=directory" alt="Mermaid MCP App on AllMCPs" /></a>