loading…
Search for a command to run...
loading…
AI-powered Mermaid diagram generation with 22+ diagram types including flowcharts, sequence diagrams, class diagrams, ER diagrams, architecture diagrams, state
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, SVG/PNG/PDF exports, and seamless integration with GitHub Copilot, Claude, and any MCP-compatible client. Install via NPM: npm install -g @narasimhaponnada/mermaid-mcp-server
AI-powered Mermaid diagram generation using Model Context Protocol (MCP)
npm version npm downloads Node.js License MCP Mermaid
The Mermaid MCP Server enables AI assistants like GitHub Copilot, Claude, and custom LLM applications to generate professional architecture diagrams, flowcharts, sequence diagrams, and more using natural language. It provides a Model Context Protocol interface for seamless integration with AI coding assistants.
Mermaid/
├── mermaid-mcp-server/ # Main MCP server
│ ├── src/ # TypeScript source code
│ ├── dist/ # Compiled JavaScript
│ ├── examples/architectures/ # 5 production-ready SVG samples
│ ├── package.json # Dependencies
│ └── README.md # Server documentation
├── Setup.md # Complete setup guide
├── UserGuide.md # Comprehensive usage guide
└── *.md # Analysis and documentation
# Global installation - easiest way to get started
npm install -g @narasimhaponnada/mermaid-mcp-server
# Test the installation
mermaid-mcp --version
# The server is now ready to use with Copilot/Claude!
# Clone the repository
git clone https://github.com/Narasimhaponnada/mermaid-mcp.git
cd mermaid-mcp/mermaid-mcp-server
# Install dependencies
npm install
# Build the server
npm run build
# Generate sample diagrams
node generate-svg-samples.js
Add to your VS Code settings (Cmd+Shift+P → "Preferences: Open User Settings (JSON)"):
If installed via NPM globally:
{
"github.copilot.mcp.servers": {
"mermaid": {
"command": "mermaid-mcp"
}
}
}
If installed from source:
{
"github.copilot.mcp.servers": {
"mermaid": {
"command": "node",
"args": ["/absolute/path/to/mermaid-mcp-server/dist/index.js"]
}
}
}
Open GitHub Copilot Chat and try:
Create a microservices architecture diagram for an e-commerce platform
Generate a CI/CD pipeline flowchart showing GitHub Actions workflow
Show me a sequence diagram for user authentication with OAuth
The server generates production-ready SVG files like these (included in examples/architectures/):
microservices-architecture.svg (27KB) - Microservices with API Gatewaycloud-infrastructure.svg (31KB) - Cloud infrastructure componentscicd-pipeline.svg (28KB) - Complete CI/CD workflowdata-pipeline.svg (24KB) - ETL data processing pipelineserverless-architecture.svg (31KB) - Event-driven serverlessAll SVGs are XML-validated and render perfectly in browsers, documentation, and presentations.
Contributions are welcome! Please feel free to:
MIT License - see mermaid-mcp-server/LICENSE for details
Last Updated: October 30, 2025
Author: Narasimha Rao Ponnada
Version: 1.0.0
Start creating amazing diagrams with AI! 🎨📊✨
Добавь это в claude_desktop_config.json и перезапусти Claude Desktop.
{
"mcpServers": {
"narasimhaponnada-mermaid-mcp": {
"command": "npx",
"args": []
}
}
}