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. - 🤖 AI-Powered Generation: Create diagrams using natural language with GitHub Copilot
Add this skill
npx mdskills install Narasimhaponnada/mermaid-mcpWell-documented MCP server enabling AI agents to generate 22+ diagram types with comprehensive setup instructions
AI-powered Mermaid diagram generation using Model Context Protocol (MCP)
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! 🎨📊✨
Install via CLI
npx mdskills install Narasimhaponnada/mermaid-mcpMermaid MCP Server is a free, open-source AI agent skill. 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. - 🤖 AI-Powered Generation: Create diagrams using natural language with GitHub Copilot
Install Mermaid MCP Server with a single command:
npx mdskills install Narasimhaponnada/mermaid-mcpThis downloads the skill files into your project and your AI agent picks them up automatically.
Mermaid MCP Server works with Claude Code, Claude Desktop, Cursor, Vscode Copilot, Windsurf, Continue Dev, Gemini Cli, Amp, Roo Code, Goose. Skills use the open SKILL.md format which is compatible with any AI coding agent that reads markdown instructions.