Mermaid
๐ ๐ ๐ ๐ช ๐ง - A Mermaid diagram rendering MCP server for Claude Code with live reload functionality, supporting multiple export formats (SVG, PNG, PDF) and themes.
What is Mermaid?
Mermaid is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to ๐ ๐ ๐ ๐ช ๐ง - a mermaid diagram rendering mcp server for claude code with live reload functionality, supporting multiple export formats (svg, png, pdf) and themes.
๐ ๐ ๐ ๐ช ๐ง - A Mermaid diagram rendering MCP server for Claude Code with live reload functionality, supporting multiple export formats (SVG, PNG, PDF) and themes.
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- ๐ ๐ ๐ ๐ช ๐ง - A Mermaid diagram rendering MCP server for Claud
Use Cases
Maintainer
Works with
Installation
NPM
npx -y claude-mermaidManual Installation
npx -y claude-mermaidConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Mermaid
claude-mermaid is an MCP server that renders Mermaid diagram syntax into visual diagrams with live reload functionality directly inside Claude Code. When you describe a flowchart, sequence diagram, class diagram, or architecture diagram in natural language, Claude generates the Mermaid DSL and this server opens a browser preview that auto-refreshes as the diagram evolves. It supports SVG, PNG, and PDF export formats with configurable themes and background colors, making it useful for documentation, system design, and architecture visualization workflows without leaving the coding environment.
Prerequisites
- Node.js 18+ with npm installed
- Claude Code (the server is optimized for Claude Code's MCP plugin system)
- A modern browser for live preview rendering
- Mermaid CLI (mmdc) installed if using PNG or PDF export formats
Install the server via Claude Code plugin marketplace
The recommended installation method uses the Claude Code plugin system, which automatically handles setup and configuration.
/plugin marketplace add veelenga/claude-mermaid
/plugin install claude-mermaid@claude-mermaidAlternatively, install globally via npm
If you prefer a manual install, install the package globally with npm, then register it as an MCP server in Claude Code.
npm install -g claude-mermaid
claude mcp add --scope user mermaid claude-mermaidAdd to MCP client configuration (non-Claude Code clients)
For Claude Desktop or other MCP clients, add the server using the npx launch command.
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": ["-y", "claude-mermaid"]
}
}
}Configure logging verbosity (optional)
Set the CLAUDE_MERMAID_LOG_LEVEL environment variable to control how much output the server produces. Valid values are DEBUG, INFO (default), WARN, ERROR, and OFF.
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": ["-y", "claude-mermaid"],
"env": {
"CLAUDE_MERMAID_LOG_LEVEL": "WARN"
}
}
}
}Request your first diagram
Ask Claude to create any Mermaid diagram. The server will open a browser window with a live preview. As you refine the diagram through follow-up prompts, the browser auto-reloads.
Mermaid Examples
Client configuration
Example claude_desktop_config.json entry for the claude-mermaid MCP server.
{
"mcpServers": {
"mermaid": {
"command": "npx",
"args": ["-y", "claude-mermaid"],
"env": {
"CLAUDE_MERMAID_LOG_LEVEL": "INFO"
}
}
}
}Prompts to try
Sample requests that exercise live preview, theming, and export capabilities.
- "Create a Mermaid sequence diagram showing the OAuth2 authorization code flow."
- "Draw a flowchart for a CI/CD pipeline from code commit to production deployment."
- "Generate a class diagram for a User, Order, and Product e-commerce model with relationships."
- "Create a dark theme architecture diagram with transparent background showing our microservices."
- "Save the current diagram as a PNG file to /tmp/architecture.png"Troubleshooting Mermaid
Browser preview window does not open after requesting a diagram
Ensure a default browser is configured on your system. On Linux, set the BROWSER environment variable (e.g., export BROWSER=firefox). On macOS and Windows, the default browser should open automatically. Check server logs by setting CLAUDE_MERMAID_LOG_LEVEL=DEBUG.
PNG or PDF export fails with 'mmdc not found'
PNG and PDF export require Mermaid CLI. Install it with 'npm install -g @mermaid-js/mermaid-cli'. After installation, verify with 'mmdc --version'. SVG export works without this dependency.
Plugin install command not recognized in Claude Code
Ensure you are using a recent version of Claude Code that supports the /plugin command. Alternatively, use the npm global install method: 'npm install -g claude-mermaid' followed by 'claude mcp add --scope user mermaid claude-mermaid'.
Frequently Asked Questions about Mermaid
What is Mermaid?
Mermaid is a Model Context Protocol (MCP) server that ๐ ๐ ๐ ๐ช ๐ง - a mermaid diagram rendering mcp server for claude code with live reload functionality, supporting multiple export formats (svg, png, pdf) and themes. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Mermaid?
Install via npm with the command: npx -y claude-mermaid. Then add the server configuration to your AI client's JSON config file (e.g., claude_desktop_config.json or .cursor/mcp.json).
Which AI clients work with Mermaid?
Mermaid works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Mermaid free to use?
Yes, Mermaid is open source and available under the MIT License license. You can use it freely in both personal and commercial projects.
Mermaid Alternatives โ Similar Developer Tools Servers
Looking for alternatives to Mermaid? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
โ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
โ 155.8kJava ้ข่ฏ & ๅ็ซฏ้็จ้ข่ฏๆๅ๏ผ่ฆ็่ฎก็ฎๆบๅบ็กใๆฐๆฎๅบใๅๅธๅผใ้ซๅนถๅใ็ณป็ป่ฎพ่ฎกไธ AI ๅบ็จๅผๅ
Gemini CLI
โ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
โ 87.3kโญ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
โ 86.0kModel Context Protocol Servers
CC Switch
โ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Mermaid in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Mermaid?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.