Mermaid
❤️ Generate mermaid diagram and chart with AI MCP dynamically.
What is Mermaid?
Mermaid is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to ❤️ generate mermaid diagram and chart with ai mcp dynamically.
❤️ Generate mermaid diagram and chart with AI MCP dynamically.
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- ❤️ Generate mermaid diagram and chart with AI MCP dynamicall
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx mcp-mermaidConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Mermaid
mcp-mermaid is an MCP server that enables AI assistants to generate, validate, and export Mermaid diagrams and charts dynamically through natural language. It supports the full Mermaid syntax including flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, and more, and can export results as base64-encoded images, SVG, PNG files, shareable URLs, or raw Mermaid source. Developers and technical writers use it to produce architecture diagrams, workflow charts, and documentation visuals directly within their AI-assisted workflows without leaving their editor.
Prerequisites
- Node.js 16+ and npx available on your system
- An MCP-compatible client such as Claude Desktop, Cursor, or Cline
- Optional: Docker if you prefer a containerized deployment
Run the server directly with npx (no install required)
The simplest way to use mcp-mermaid is to let npx download and run it on demand. This is the recommended approach for most MCP client configurations.
npx -y mcp-mermaidInstall globally for repeated use
If you prefer a persistent global install to avoid repeated npx downloads, install the package globally with npm.
npm install -g mcp-mermaidChoose a transport protocol
mcp-mermaid supports three transports. stdio is the default and works with all standard MCP clients. SSE runs on port 3033 and streamable on port 1122.
mcp-mermaid -t stdio # default, for Claude Desktop etc.
mcp-mermaid -t sse # SSE on port 3033
mcp-mermaid -t streamable # streamable HTTP on port 1122Run with Docker
Use the official Docker image if you prefer a containerized deployment. The SSE transport is used in Docker mode.
docker pull susuperli/mcp-mermaid:latest
docker run -p 3033:3033 susuperli/mcp-mermaid:latest --transport sseConfigure your MCP client
Add the server entry to your claude_desktop_config.json. On Windows, use the cmd wrapper shown in the examples section.
Mermaid Examples
Client configuration
Add this to your claude_desktop_config.json for macOS or Linux. On Windows, replace the command and args with the cmd variant shown in comments.
{
"mcpServers": {
"mcp-mermaid": {
"command": "npx",
"args": ["-y", "mcp-mermaid"]
}
}
}
// Windows:
// {
// "mcpServers": {
// "mcp-mermaid": {
// "command": "cmd",
// "args": ["/c", "npx", "-y", "mcp-mermaid"]
// }
// }
// }Prompts to try
Use these prompts in your AI assistant after connecting the mcp-mermaid server.
- "Generate a flowchart showing the user registration process with email verification."
- "Create a sequence diagram for an OAuth2 authorization code flow."
- "Draw a class diagram for a simple e-commerce system with Order, Product, and Customer."
- "Make a Gantt chart for a 4-week sprint with daily tasks."
- "Export the diagram as a PNG file and give me the download link."Troubleshooting Mermaid
Generated diagram shows syntax error or renders blank
mcp-mermaid has built-in syntax validation. Ask the AI to validate the Mermaid syntax first and refine iteratively. Complex diagrams sometimes need to be broken into smaller sections.
npx command hangs or takes too long on first run
The first run downloads the package from npm, which can take a moment. Install globally with `npm install -g mcp-mermaid` to avoid repeated downloads and improve startup time.
PNG export fails with a file write error
Ensure the process has write permissions to the current working directory. Specify an absolute output path in your request, or switch to SVG or base64 export formats which do not require file system access.
Frequently Asked Questions about Mermaid
What is Mermaid?
Mermaid is a Model Context Protocol (MCP) server that ❤️ generate mermaid diagram and chart with ai mcp dynamically. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Mermaid?
Follow the installation instructions on the Mermaid GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
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. 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.