Claude MermaidSAFE
MCP Server to previewing mermaid diagrams with live reload
Overview
From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.
MCP server for rendering Mermaid diagrams in Claude Code with live reload functionality and a built-in skill for expert guidance.
Automatically renders diagrams in your browser with real-time updates as you refine them. Perfect for iterative diagram development and documentation workflows.
✨ Features
- 🔄 Live Reload - Diagrams auto-refresh in your browser as you edit
- 🎨 Multiple Save Formats - Export to SVG, PNG, or PDF
- 🌈 Themes - Choose from default, forest, dark, or neutral themes
- 📐 Customizable - Control dimensions, scale, and background colors
- 🪄 Interactive Preview - Pan diagrams by dragging, zoom with browser controls, reset position with one click
- ⬇️ Browser Export - Download diagrams as SVG or PNG directly from the preview
- 🗂️ Multiple Previews - Use
preview_idto work on multiple diagrams simultaneously - 💾 Persistent Working Files - Live previews are stored under
~/.config/claude-mermaid/live - 🤖 Built-in Skill - Includes a Claude skill with best practices and expert guidance for creating diagrams
Architecture
Project Architecture Diagram
User Workflow Diagram
Dependencies Diagram
🚀 Quick Start
1. Install
Plugin Install (Recommended)
In Claude Code, add the marketplace and install the plugin:
/plugin marketplace add veelenga/claude-mermaid /plugin install claude-mermaid@claude-mermaid
Then restart
47fc9c7b0a9dOBSERVED · 2026-10-06Connect
Built from this server's own package name, version and transport as found in its source — not copied from anyone's documentation, so it cannot drift against a page we do not control.
claude mcp add claude-mermaid -- npx -y [email protected]
{
"mcpServers": {
"claude-mermaid": {
"command": "npx",
"args": [
"-y",
"[email protected]"
]
}
}
}Exposed tools (2)
1 read · 1 write · 0 destructive.
| Tool | Risk | Description |
|---|---|---|
mermaid_preview | read | Render a Mermaid diagram and open it in browser with live reload. |
mermaid_save | write | Save the current live Mermaid diagram to a file path. |
Trust audit
SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.
| Layer | What it checks | Result |
|---|---|---|
| L0 | Provenance & inventory | PASS |
| L1 | Static analysis of the code | PASS |
| L2 | Instruction surface (what it tells the agent) | PASS |
| L3 | Class-specific surface | PASS |
| L4 | Behavioural (sandbox) | SKIPPED |
What the source does
- Filesystem
- none-observed
- Network
- declared (5 observation(s))
- Shell
- none-observed
- Dependencies
- not all pinned
- Secrets in source
- none-found
Findings (11)
.prettierignore
.nojekyll
expect(() => getPreviewDir("/etc/passwd")).toThrow("Invalid preview ID format");expect(() => validateSavePath("/etc/diagram.svg")).toThrow(expect(() => validateSavePath("../../diagram.svg")).not.toThrow();expect(() => validateSavePath("./../../output/test.svg")).not.toThrow();import { getPreviewDir } from "../../src/file-utils.js";} from "../../src/live-server.js";
import { ensureLiveServer, closeLiveServer } from "../../src/live-server.js";@mermaid-js/mermaid-cli, @modelcontextprotocol/sdk, pako, ws, @types/node, @types/pako, @types/ws, prettier
assets/demo.gif
Gates applied: no_behavioural_pass.
47fc9c7b0a9dfull audit observations/trust-audit/mcp-server/veelenga__claude-mermaid.json · Report an issue / request a re-scanAudit history
Every audit this server has had. A grade with a past is a grade somebody is still checking.
| Date | Source | Verdict | Grade | Score | Change |
|---|---|---|---|---|---|
| 2026-10-06 | 47fc9c7b0a9d | SAFE | B | 89 | first audit |
Questions
What is the Claude Mermaid MCP server?
MCP Server to previewing mermaid diagrams with live reload
What tools does Claude Mermaid expose?
2 in total: 1 read-only, 1 that write, and 0 that can delete or overwrite. Every one is listed on this page with its risk.
Is Claude Mermaid safe to connect to an agent?
The audit found nothing in the source that contradicts what it says it does, and graded it B (89/100). Grade A is held back for packages that have also passed a sandboxed behavioural run, which is why a clean server reads B.
What credentials does Claude Mermaid need?
No credential environment variables were found in its source, so it appears to need none.
How does Claude Mermaid run?
It speaks stdio, so it runs as a local process your client starts. It is published on npm as claude-mermaid at 1.6.6.
How current is this page?
The grade is for one exact copy of the source (47fc9c7b0a9d), read on 2026-10-06. The repository is watched and re-audited when it changes.