Config is the same across clients — only the file and path differ.
{
"mcpServers": {
"mermaid": {
"command": "claude-mermaid"
}
}
}Are you the author?
Add this badge to your README to show your security score and help users find safe servers.
MCP Server to previewing mermaid diagrams with live reload
This server supports HTTP transport. Be the first to test it — help the community know if it works.
Five weighted categories — click any category to see the underlying evidence.
No known CVEs.
Checked claude-mermaid against OSV.dev.
This server is missing a description. Tools and install config are also missing.If you've used it, help the community.
Add informationBe the first to review
Have you used this server?
Share your experience — it helps other developers decide.
Sign in to write a review.
Others in developer-tools / design
A Model Context Protocol (MCP) server and CLI that provides tools for agent use when working on iOS and macOS projects.
Workspace template + MCP server for Claude Code, Codex CLI, Cursor & Windsurf. Multi-agent knowledge engine (ag-refresh / ag-ask) that turns any codebase into a queryable AI assistant.
MCP server for accessing Figma plugin console logs and screenshots via Cloudflare Workers or local mode
MCP server for using the GitLab API
MCP Security Weekly
Get CVE alerts and security updates for Claude Mermaid and similar servers.
Start a conversation
Ask a question, share a tip, or report an issue.
Sign in to join the discussion.
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.

preview_id to work on multiple diagrams simultaneously~/.config/claude-mermaid/live


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 Claude Code to activate the plugin.
From npm:
npm install -g claude-mermaid
From source:
git clone https://github.com/veelenga/claude-mermaid.git
cd claude-mermaid
npm install && npm run build && npm install -g .
Plugin install: The MCP server is configured automatically. Just verify:
/mcp
You should see mermaid in the MCP server list.
npm install: Configure the MCP server manually:
claude mcp add --scope user mermaid claude-mermaid
Then verify:
claude mcp list
You should see mermaid: claude-mermaid - ✓ Connected
While this server is optimized for Claude Code, it can work with any MCP-compatible client. Here's how to configure it for other popular tools:
Add to your Codex MCP settings file (~/.codex/mcp_settings.json):
{
"mcpServers": {
"mermaid": {
"command": "claude-mermaid"
}
}
}
Or configure via Codex CLI:
codex mcp add mermaid claude-mermaid
Add to your Cursor MCP config file (.cursor/mcp.json or settings):
{
"mcpServers": {
"mermaid": {
"command": "claude-mermaid"
}
}
}
Or use Cursor's settings UI:
claude-mermaidIf using the Cline extension for VSCode:
{
"mcpServers": {
"mermaid": {
"command": "claude-mermaid"
}
}
}
Add to Windsurf's MCP configuration file:
{
"mcpServers"
... [View full README on GitHub](https://github.com/veelenga/claude-mermaid#readme)