Log inSubmit server
Claude Mermaid logo

Claude Mermaid

by veelenga

Render Mermaid diagrams with browser live reload, selectable themes, and SVG, PNG, or PDF export.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Claude Mermaid

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": {
    "veelenga-claude-mermaid": {
      "command": "npx",
      "args": [
        "-y",
        "claude-mermaid"
      ]
    }
  }
}

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

We couldn’t confirm it starts correctly

We ran the install command but it didn't respond within our test window — this can mean a slow first-time install rather than a real problem.

npx -y claude-mermaid

No response to initialize.

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 5d ago.

Overview

veelenga/claude-mermaid provides Claude Code with tools for rendering Mermaid diagrams and opening live browser previews. Its preview workflow updates diagrams through WebSockets as an agent refines the source, while save operations export SVG, PNG, or PDF files. Use it for iterative diagram design, documentation assets, and concurrent previews identified by separate preview IDs. The server also works with other MCP clients through a standard stdio command configuration.

Use cases

  • Create architecture diagrams from Mermaid source
  • Iterate on flowcharts with browser live reload
  • Save diagrams as SVG, PNG, or PDF documentation assets
  • Preview multiple diagrams concurrently with separate IDs

Key features

  • Live browser preview with WebSocket updates
  • SVG, PNG, and PDF rendering and saving
  • Default, forest, dark, and neutral themes
  • Configurable size, scale, and background color
  • Interactive pan, zoom, reset, and browser export
  • Multiple concurrent previews identified by preview ID

Security & health

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

ActiveLast checked Today

Recent health check succeeded.

18/19 checks healthy over the last 79d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 6d ago via OSV.dev · claude-mermaid (npm)

Adoption & maintenance

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

GitHub stars220Stargazers on the source repository.
npm downloads4.6kPackage downloads in the last 30 days.
Last commit6d agoMost recent push to the default branch.
Install checkInconclusiveDidn't respond in our test window — often a slow first install.
Directory activity5 viewsConfig copies, upvotes, and views on AllMCPs.

How Claude Mermaid works

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:

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

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 Claude Mermaid

veelenga/claude-mermaid is an MCP server that connects Claude Code and other MCP clients to Mermaid diagram rendering. Its main tools are `mermaid_preview`, which opens a live browser preview, and `mermaid_save`, which exports the current diagram as SVG, PNG, or PDF.

Install it as a Claude Code plugin, globally with npm, or from source. The plugin uses `/plugin marketplace add veelenga/claude-mermaid` followed by `/plugin install claude-mermaid@claude-mermaid`; npm users can run `npm install -g claude-mermaid` and then register `claude-mermaid` with Claude Code.

Yes, Cursor can run it as a stdio MCP server. Add a server named `mermaid` with `claude-mermaid` as its command in `.cursor/mcp.json` or Cursor’s MCP settings.

Call `mermaid_preview` with Mermaid source and a `preview_id`, then open the local browser preview it creates. Changes to the diagram refresh through WebSocket updates; live reload is available for SVG previews, not PNG or PDF renders.

Yes, `mermaid_save` can write PNG and PDF files as well as SVG. Set the requested format and provide a destination path; PNG and PDF are rendered without the live browser reload used by SVG previews.

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 PreviewClaude Mermaid AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/veelenga-claude-mermaid?style=directory)](https://allmcps.com/mcp/veelenga-claude-mermaid)
HTML Embed
<a href="https://allmcps.com/mcp/veelenga-claude-mermaid"><img src="https://allmcps.com/api/badge/veelenga-claude-mermaid?style=directory" alt="Claude Mermaid on AllMCPs" /></a>