Claude Mermaid MCP Server

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_id to 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 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 .

2. Verify Installation

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

🔌 Other MCP Client Configurations

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:

Codex

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

Cursor

Add to your Cursor MCP config file (.cursor/mcp.json or settings):

{
  "mcpServers": {
    "mermaid": {
      "command": "claude-mermaid"
    }
  }
}

Or use Cursor's settings UI:

1. Open Cursor Settings (Cmd/Ctrl + ,)
2. Navigate to MCP Servers
3. Add a new server with command: claude-mermaid

VSCode with Cline Extension

If using the Cline extension for VSCode:

1. Open VSCode settings (Cmd/Ctrl + ,)
2. Search for "Cline MCP"
3. Add to MCP Settings JSON:

{
  "mcpServers": {
    "mermaid": {
      "command": "claude-mermaid"
    }
  }
}

Windsurf

Add to Windsurf's MCP configuration file:

{
  "mcpServers": {
    "mermaid": {
      "command": "claude-mermaid"
    }
  }
}

Configuration location varies by platform: