Mermaid-MCP

by narasimhaponnada

Not rated
GitHub

About

Generat 22 types mermaid architecture diagrams with natural language description

Details

Author
narasimhaponnada
Categories
Productivity, Developer Tools, Other

Setup

Install Mermaid-MCP in your MCP client (Claude Desktop, Cursor, Windsurf, and others).

Repository: https://github.com/narasimhaponnada/mermaid-mcp

Follow the installation instructions in the repository README, then restart your MCP client.

AI-powered Mermaid diagram generation using Model Context Protocol (MCP)

TheMermaid MCP Serverenables 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 or Claude
- 🎨Production-Ready SVGs: XML-compliant, validated SVG files ready for any use
- πŸ“¦50+ Pre-built Templates: Architecture patterns, workflows, and data models
- πŸ”§Multiple Integrations: VS Code, Claude Desktop, Cursor IDE, CLI, and custom apps
- πŸš€22+ Diagram Types: Flowcharts, sequences, ERDs, state machines, Gantt charts, and more
- ⚑Fast & Reliable: Browser-based rendering with Puppeteer for consistent output

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

- Node.js 18 or higher
- npm or yarn
- GitHub Copilot (recommended) or Claude Desktop

# 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)"):

{ "github.copilot.mcp.servers": { "mermaid": { "command": "mermaid-mcp" } } }
{ "github.copilot.mcp.servers": { "mermaid": { "command": "node", "args": ["/absolute/path/to/mermaid-mcp-server/dist/index.js"] } } }
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

- Setup.md- Complete installation and configuration guide (807 lines)
-
UserGuide.md- Comprehensive usage guide with examples (2,349 lines)
-
mermaid-mcp-server/README.md- Server-specific documentation
-
mermaid-mcp-server/PROJECT-SUMMARY.md- Technical deep-dive

- Process Diagrams: Flowcharts, Block Diagrams
- Interactions: Sequence Diagrams, User Journeys, Timelines
- Structure: Class Diagrams, ER Diagrams, C4 Diagrams, Architecture
- Data Visualization: Pie Charts, XY Charts, Sankey, Radar, Quadrant, Treemap
- Project Management: Gantt Charts, Requirement Diagrams, Kanban Boards
- Specialized: State Diagrams, Git Flow, Mindmaps, Packet Diagrams
- GitHub Copilot in VS Code- Daily development workflow
- Claude Desktop- Standalone diagram generation
- Cursor IDE- AI-first development
- Direct CLI- Automation and scripting
- MCP Inspector- Testing and debugging
- Custom Applications- Build your own integrations

- πŸ“–Documentation: Auto-generate architecture diagrams for docs
- πŸ”„Code Reviews: Include diagrams in pull requests
- πŸ‘₯Onboarding: Visual guides for new developers
- πŸ“ŠTechnical Proposals: Explain changes with visuals
- 🚨Incident Response: Document incidents with timelines
- πŸ’ΌClient Presentations: Explain technical concepts visually
- πŸ“šTraining Materials: Create consistent learning resources

The server generates production-ready SVG files like these (included inexamples/architectures/):

- microservices-architecture.svg(27KB) - Microservices with API Gateway
- cloud-infrastructure.svg(31KB) - Cloud infrastructure components
- cicd-pipeline.svg(28KB) - Complete CI/CD workflow
- data-pipeline.svg(24KB) - ETL data processing pipeline
- serverless-architecture.svg(31KB) - Event-driven serverless

All SVGs are XML-validated and render perfectly in browsers, documentation, and presentations.

- Node.js- Server runtime
- TypeScript- Type-safe development
- Puppeteer- Browser-based rendering
- Mermaid v10- Diagramming library (via CDN)
- MCP SDK- Model Context Protocol implementation

- βœ…Production-Ready: All core features implemented and tested
- βœ…Validated: All SVG outputs are XML-compliant
- βœ…Documented: Comprehensive guides and examples
- βœ…Clean Codebase: 43 essential files, no cruft
- βœ…Battle-Tested: Fixed HTML-to-XML tag issues, subgraph syntax, etc.

Contributions are welcome! Please feel free to:

- Report bugs and issues
- Suggest new diagram types or features
- Submit pull requests
- Share usage examples and best practices

MIT License - seemermaid-mcp-server/LICENSEfor details

- Mermaid.js- Amazing diagramming library
- Model Context Protocol- Enabling AI tool integration
- GitHub Copilot- AI-powered development
- Puppeteer- Reliable browser automation

- πŸ“– Documentation: SeeSetup.mdandUserGuide.md
- πŸ› Issues: Open an issue on GitHub
- πŸ’¬ Discussions: Start a discussion for questions
- πŸ“§ Contact: Via GitHub profile
- Read the setup guide:
Setup.md
- Install and configure: Follow the quick start above
- Try it out: Generate your first diagram with Copilot
- Explore use cases: Check
UserGuide.md
- Integrate into your project: Use one of 6 integration methods

Last Updated: October 30, 2025
Author: Narasimha Rao Ponnada
Version: 1.0.0

Start creating amazing diagrams with AI! πŸŽ¨πŸ“Šβœ¨

An MCP server that equips your AI coding assistant with live, verified Android knowledge β€” so it builds from official sources, not from memory.

Access and analyze Overleaf projects and LaTeX files through Git integration.

Allows AI assistants to interact with the GitHub API for repository management, code collaboration, and other development tasks.

Self-hosted MCP server over your markdown notes: hybrid search and note reading with sourced answers. The same vault is also a website, so the agent's memory is readable, git-diffable markdown. Single Go binary + SQLite, MIT.

Secure MCP access to local repositories from ChatgptWeb without shell, Git, or arbitrary writes.

Creates commit messages from staged files in a local git repository.

Anchor is local repo and org memory for AI coding agents. It indexes GitHub PR history, current code, tests, regressions, architecture, and cross-repo impact locally, then exposes concise cited context through MCP and CLI workflows. Local-first. Read-only GitHub access. No CLI telemetry. No SaaS. No remote LLM calls.

An MCP server for interacting with the AtomGit API for version control and code hosting.

Design system MCP server β€” query tokens, components, icons, and WCAG contrast data from Git-backed design systems.

Provides code context from local git repositories.

No reviews yet β€” be the first

Sign in to leave a review

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.