# veelenga/claude-mermaid [Health: Active]

**Category:** 📊 Data Visualization  
**Repository:** https://github.com/veelenga/claude-mermaid/  
**GitHub Stars:** 220  
**npm Downloads (last month):** 4624  
**Views:** 5  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/veelenga-claude-mermaid

## Description
A Mermaid diagram rendering MCP server for Claude Code with live reload functionality, supporting multiple export formats (SVG, PNG, PDF) and themes.

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

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

## Documentation

## What veelenga/claude-mermaid does

veelenga/claude-mermaid exposes Mermaid rendering through MCP tools, with Claude Code as its primary workflow. An agent can create a diagram, open it in a browser, revise the Mermaid source, and save the result to a local file. The browser preview supports interactive panning, browser-based zoom, recentering, and direct SVG or PNG downloads.

The server fits documentation and design tasks that benefit from repeated visual refinement. Separate `preview_id` values allow multiple diagrams to remain available at the same time, such as an architecture diagram and a deployment flow.

## How it works

Calling `mermaid_preview` renders the supplied Mermaid code and opens a local browser page at a URL based on the preview ID. The live service listens on an available port from 3737 through 3747. When the diagram changes, the browser receives the update over WebSocket and refreshes the preview. A status indicator shows whether the browser is connected or reconnecting.

Live previews use SVG. PNG and PDF requests are rendered without live reload. `mermaid_save` writes the current diagram associated with a preview ID to a destination path; if the requested output format has not been generated, it renders that format when saving.

## Setup and configuration

The recommended installation path is the Claude Code plugin marketplace:

```text
/plugin marketplace add veelenga/claude-mermaid
/plugin install claude-mermaid@claude-mermaid
```

After restarting Claude Code, the plugin configures the MCP server. Installation is also available through npm with `npm install -g claude-mermaid`, or from source by cloning the repository, installing dependencies, building, and installing the package globally.

For a global npm installation, add the server to Claude Code with:

```text
claude mcp add --scope user mermaid claude-mermaid
```

Other stdio-capable MCP clients can use `claude-mermaid` as the server command. The executable must be on the client’s PATH; an absolute executable path can be used when necessary.

## Tools and capabilities

`mermaid_preview` accepts Mermaid source, a required preview ID, an output format, a theme, a background color, dimensions, and a scale factor. Supported themes are `default`, `forest`, `dark`, and `neutral`; supported formats are SVG, PNG, and PDF. The `size` option controls the maximum diagram dimension, while `scale` can increase output resolution. Legacy `width` and `height` parameters are accepted for compatibility, with the larger value used as the size.

`mermaid_save` accepts a destination path and an existing preview ID, with SVG as the default format. It supports SVG, PNG, and PDF output.

The plugin includes a `mermaid-diagrams` skill with diagram creation guidance and workflow recommendations.

## Limitations and notes

Only SVG previews receive live updates. PNG and PDF output can be saved, but they do not provide live browser reload. Mermaid sequence diagrams do not support `style` directives inside `sequenceDiagram` definitions. Persistent live working files are stored under `~/.config/claude-mermaid/live`.

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