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
1# Mermaid MCP Server23> **AI-powered Mermaid diagram generation using Model Context Protocol (MCP)**45[](https://www.npmjs.com/package/@narasimhaponnada/mermaid-mcp-server)6[](https://www.npmjs.com/package/@narasimhaponnada/mermaid-mcp-server)7[](https://nodejs.org/)8[](LICENSE)9[](https://modelcontextprotocol.io/)10[](https://mermaid.js.org/)1112## 🎯 Overview1314The **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.1516### ✨ Key Features1718- 🤖 **AI-Powered Generation**: Create diagrams using natural language with GitHub Copilot or Claude19- 🎨 **Production-Ready SVGs**: XML-compliant, validated SVG files ready for any use20- 📦 **50+ Pre-built Templates**: Architecture patterns, workflows, and data models21- 🔧 **Multiple Integrations**: VS Code, Claude Desktop, Cursor IDE, CLI, and custom apps22- 🚀 **22+ Diagram Types**: Flowcharts, sequences, ERDs, state machines, Gantt charts, and more23- ⚡ **Fast & Reliable**: Browser-based rendering with Puppeteer for consistent output2425## 📋 What's Included2627```28Mermaid/29├── mermaid-mcp-server/ # Main MCP server30│ ├── src/ # TypeScript source code31│ ├── dist/ # Compiled JavaScript32│ ├── examples/architectures/ # 5 production-ready SVG samples33│ ├── package.json # Dependencies34│ └── README.md # Server documentation35├── Setup.md # Complete setup guide36├── UserGuide.md # Comprehensive usage guide37└── *.md # Analysis and documentation38```3940## 🚀 Quick Start4142### Prerequisites4344- Node.js 18 or higher45- npm or yarn46- GitHub Copilot (recommended) or Claude Desktop4748### Installation4950#### Option 1: Install from NPM (Recommended)5152```bash53# Global installation - easiest way to get started54npm install -g @narasimhaponnada/mermaid-mcp-server5556# Test the installation57mermaid-mcp --version5859# The server is now ready to use with Copilot/Claude!60```6162#### Option 2: Install from Source6364```bash65# Clone the repository66git clone https://github.com/Narasimhaponnada/mermaid-mcp.git67cd mermaid-mcp/mermaid-mcp-server6869# Install dependencies70npm install7172# Build the server73npm run build7475# Generate sample diagrams76node generate-svg-samples.js77```7879### Configure with GitHub Copilot8081Add to your VS Code settings (`Cmd+Shift+P` → "Preferences: Open User Settings (JSON)"):8283**If installed via NPM globally:**84```json85{86 "github.copilot.mcp.servers": {87 "mermaid": {88 "command": "mermaid-mcp"89 }90 }91}92```9394**If installed from source:**95```json96{97 "github.copilot.mcp.servers": {98 "mermaid": {99 "command": "node",100 "args": ["/absolute/path/to/mermaid-mcp-server/dist/index.js"]101 }102 }103}104```105106### Use with Copilot107108Open GitHub Copilot Chat and try:109110```111Create a microservices architecture diagram for an e-commerce platform112```113114```115Generate a CI/CD pipeline flowchart showing GitHub Actions workflow116```117118```119Show me a sequence diagram for user authentication with OAuth120```121122## 📚 Documentation123124- **[Setup.md](Setup.md)** - Complete installation and configuration guide (807 lines)125- **[UserGuide.md](UserGuide.md)** - Comprehensive usage guide with examples (2,349 lines)126- **[mermaid-mcp-server/README.md](mermaid-mcp-server/README.md)** - Server-specific documentation127- **[mermaid-mcp-server/PROJECT-SUMMARY.md](mermaid-mcp-server/PROJECT-SUMMARY.md)** - Technical deep-dive128129## 🎨 Diagram Types Supported130131- **Process Diagrams**: Flowcharts, Block Diagrams132- **Interactions**: Sequence Diagrams, User Journeys, Timelines133- **Structure**: Class Diagrams, ER Diagrams, C4 Diagrams, Architecture134- **Data Visualization**: Pie Charts, XY Charts, Sankey, Radar, Quadrant, Treemap135- **Project Management**: Gantt Charts, Requirement Diagrams, Kanban Boards136- **Specialized**: State Diagrams, Git Flow, Mindmaps, Packet Diagrams137138## 🔌 Integration Methods1391401. **GitHub Copilot in VS Code** - Daily development workflow1412. **Claude Desktop** - Standalone diagram generation1423. **Cursor IDE** - AI-first development1434. **Direct CLI** - Automation and scripting1445. **MCP Inspector** - Testing and debugging1456. **Custom Applications** - Build your own integrations146147## 💡 Use Cases148149- 📖 **Documentation**: Auto-generate architecture diagrams for docs150- 🔄 **Code Reviews**: Include diagrams in pull requests151- 👥 **Onboarding**: Visual guides for new developers152- 📊 **Technical Proposals**: Explain changes with visuals153- 🚨 **Incident Response**: Document incidents with timelines154- 💼 **Client Presentations**: Explain technical concepts visually155- 📚 **Training Materials**: Create consistent learning resources156157## 🌟 Example Output158159The server generates production-ready SVG files like these (included in `examples/architectures/`):160161- `microservices-architecture.svg` (27KB) - Microservices with API Gateway162- `cloud-infrastructure.svg` (31KB) - Cloud infrastructure components163- `cicd-pipeline.svg` (28KB) - Complete CI/CD workflow164- `data-pipeline.svg` (24KB) - ETL data processing pipeline165- `serverless-architecture.svg` (31KB) - Event-driven serverless166167All SVGs are XML-validated and render perfectly in browsers, documentation, and presentations.168169## 🛠️ Technology Stack170171- **Node.js** - Server runtime172- **TypeScript** - Type-safe development173- **Puppeteer** - Browser-based rendering174- **Mermaid v10** - Diagramming library (via CDN)175- **MCP SDK** - Model Context Protocol implementation176177## 📈 Project Status178179- ✅ **Production-Ready**: All core features implemented and tested180- ✅ **Validated**: All SVG outputs are XML-compliant181- ✅ **Documented**: Comprehensive guides and examples182- ✅ **Clean Codebase**: 43 essential files, no cruft183- ✅ **Battle-Tested**: Fixed HTML-to-XML tag issues, subgraph syntax, etc.184185## 🤝 Contributing186187Contributions are welcome! Please feel free to:188189- Report bugs and issues190- Suggest new diagram types or features191- Submit pull requests192- Share usage examples and best practices193194## 📄 License195196MIT License - see [mermaid-mcp-server/LICENSE](mermaid-mcp-server/LICENSE) for details197198## 🙏 Acknowledgments199200- **Mermaid.js** - Amazing diagramming library201- **Model Context Protocol** - Enabling AI tool integration202- **GitHub Copilot** - AI-powered development203- **Puppeteer** - Reliable browser automation204205## 📞 Support206207- 📖 Documentation: See [Setup.md](Setup.md) and [UserGuide.md](UserGuide.md)208- 🐛 Issues: Open an issue on GitHub209- 💬 Discussions: Start a discussion for questions210- 📧 Contact: Via GitHub profile211212## 🚀 Getting Started2132141. **Read the setup guide**: [Setup.md](Setup.md)2152. **Install and configure**: Follow the quick start above2163. **Try it out**: Generate your first diagram with Copilot2174. **Explore use cases**: Check [UserGuide.md](UserGuide.md)2185. **Integrate into your project**: Use one of 6 integration methods219220---221222**Last Updated**: October 30, 2025223**Author**: Narasimha Rao Ponnada224**Version**: 1.0.0225226**Start creating amazing diagrams with AI! 🎨📊✨**227
Full transparency — inspect the skill content before installing.