# mermaid-mcp-app [Health: Active]

**Category:** 📊 Data Visualization  
**Repository:** https://github.com/finfin/mermaid-mcp-app  
**GitHub Stars:** 1  
**npm Downloads (last month):** 214  
**Views:** 1  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/mermaid-mcp-app

## Description
MCP App that renders Mermaid diagrams as interactive UI in Claude, VS Code and other MCP clients

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "mermaid-mcp-app": {
    "command": "npx",
    "args": ["-y","mermaid-mcp-app"]
  }
}
```

## Documentation

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

_Full upstream README: https://allmcps.com/mcp/mermaid-mcp-app/readme_