Mermaid Diagram Generator
๐ โ๏ธ ๐ ๐ช ๐ง - AI-powered Mermaid diagram generation with 22+ diagram types including flowcharts, sequence diagrams, class diagrams, ER diagrams, architecture diagrams, state machines, and more. Features 50+ pre-built templates, advanced layout engines
What is Mermaid Diagram Generator?
Mermaid Diagram Generator is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to ๐ โ๏ธ ๐ ๐ช ๐ง - ai-powered mermaid diagram generation with 22+ diagram types including flowcharts, sequence diagrams, class diagrams, er diagrams, architecture diagrams, state machines, and more. fea...
๐ โ๏ธ ๐ ๐ช ๐ง - AI-powered Mermaid diagram generation with 22+ diagram types including flowcharts, sequence diagrams, class diagrams, ER diagrams, architecture diagrams, state machines, and more. Features 50+ pre-built templates, advanced layout engines
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- ๐ โ๏ธ ๐ ๐ช ๐ง - AI-powered Mermaid diagram generation with 22+
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx mcp-mermiadConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Mermaid Diagram Generator
mcp-mermiad (Mermaid MCP Server) is a JavaScript MCP server that lets AI assistants generate professional Mermaid diagrams through natural language descriptions. It supports 22+ diagram types โ including flowcharts, sequence diagrams, class diagrams, ER diagrams, state machines, Gantt charts, C4 architecture diagrams, and more โ and produces XML-compliant SVG output ready for embedding in documentation or presentations. Developers, architects, and technical writers use it to create and iterate on complex diagrams conversationally without learning Mermaid syntax.
Prerequisites
- Node.js 18+ and npm installed
- An MCP-compatible client such as Claude Desktop, VS Code with GitHub Copilot, Cursor, or Claude Code
- Optional: npm global install for convenient CLI access (npm install -g @narasimhaponnada/mermaid-mcp-server)
Install the Mermaid MCP server globally via npm
Install the package globally so the mermaid-mcp command is available system-wide. This is the recommended approach for desktop MCP clients.
npm install -g @narasimhaponnada/mermaid-mcp-server
mermaid-mcp --versionOr install from source for development
Clone the repository and build locally if you want to modify or test the server. After building, generate sample SVG files to verify the setup.
git clone https://github.com/Narasimhaponnada/mermaid-mcp.git
cd mermaid-mcp/mermaid-mcp-server
npm install
npm run build
node generate-svg-samples.jsConfigure Claude Desktop to use the server
Edit claude_desktop_config.json to register the mermaid-mcp command. No environment variables are required.
{
"mcpServers": {
"mermaid": {
"command": "mermaid-mcp"
}
}
}Configure VS Code with GitHub Copilot (alternative client)
Add the server to your VS Code settings.json under the Copilot MCP servers key.
{
"github.copilot.mcp.servers": {
"mermaid": {
"command": "mermaid-mcp"
}
}
}Restart your client and generate your first diagram
Restart your MCP client and ask it to create a diagram. The server will return SVG output directly in the conversation.
Mermaid Diagram Generator Examples
Client configuration
claude_desktop_config.json entry for the globally installed Mermaid MCP server.
{
"mcpServers": {
"mermaid": {
"command": "mermaid-mcp"
}
}
}Prompts to try
Example prompts for the 22+ supported diagram types.
- "Create a microservices architecture diagram for an e-commerce platform with API gateway, product service, and order service"
- "Generate a CI/CD pipeline flowchart showing GitHub Actions triggering build, test, and deploy stages"
- "Show me a sequence diagram for OAuth2 authorization code flow"
- "Create an ER diagram for a blog database with users, posts, comments, and tags"
- "Draw a state machine for an order lifecycle: pending, confirmed, shipped, delivered, refunded"Troubleshooting Mermaid Diagram Generator
mermaid-mcp command not found after global npm install
Run 'npm bin -g' to find the global bin directory and ensure it is in your PATH. On macOS you may need to add $(npm bin -g) to your ~/.zshrc or ~/.bash_profile.
Server starts but diagram generation returns an error or empty SVG
Try building from source with 'npm run build' and running 'node generate-svg-samples.js' to confirm the Mermaid renderer is working. Check that your Node.js version is 18 or higher.
Diagram type is not recognized by the server
The server supports 22+ diagram types but the exact list depends on the installed Mermaid.js version. Try specifying the type explicitly in your prompt (e.g. 'flowchart', 'sequenceDiagram', 'classDiagram') and check the npm package version.
Frequently Asked Questions about Mermaid Diagram Generator
What is Mermaid Diagram Generator?
Mermaid Diagram Generator is a Model Context Protocol (MCP) server that ๐ โ๏ธ ๐ ๐ช ๐ง - ai-powered mermaid diagram generation with 22+ diagram types including flowcharts, sequence diagrams, class diagrams, er diagrams, architecture diagrams, state machines, and more. features 50+ pre-built templates, advanced layout engines It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Mermaid Diagram Generator?
Follow the installation instructions on the Mermaid Diagram Generator GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Mermaid Diagram Generator?
Mermaid Diagram Generator works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Mermaid Diagram Generator free to use?
Yes, Mermaid Diagram Generator is open source and available under the NOASSERTION license. You can use it freely in both personal and commercial projects.
Mermaid Diagram Generator Alternatives โ Similar Developer Tools Servers
Looking for alternatives to Mermaid Diagram Generator? 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 Diagram Generator 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 Diagram Generator?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.