MERMAID-MCP-APP

What is Mermaid MCP App?

Mermaid MCP App is a streamable Model Context Protocol server that renders interactive Mermaid diagrams with live preview, theme switching, and fullscreen editing. It can be deployed as a remote server via Vercel or run locally, and is designed for integration with AI assistants that support MCP connectors.

How to use Mermaid MCP App?

To use the hosted version, add the endpoint https://mermaid-mcp-app.vercel.app/mcp as a custom connector in your MCP client (e.g., claude.ai: Settings → Connectors → Add custom connector). For local use, clone the repository, run npm install, then npm run serve to start the HTTP server, or node dist/index.js --stdio for stdio transport.

Key features of Mermaid MCP App

• Full diagram rendering waits for completion before display (no partial output)
• SVGO optimization reduces SVG file size by ~85%
• Auto-detects system dark mode with neutral gray palette
• Interactive pan/zoom and fullscreen editor with zoom controls
• Theme switching: Light, Dark, or custom agent-provided themes
• Supports all Mermaid diagram types (flowcharts, sequence, class, state, ER, Gantt, pie, git graphs, and more)

Use cases of Mermaid MCP App

• Generating flowcharts from natural language prompts via an AI assistant
• Creating sequence diagrams for API interaction documentation
• Visualizing system architectures with state and class diagrams
• Exporting optimized SVGs for presentations, documentation, or reports
• Editing and previewing Mermaid syntax in real time during AI conversations

FAQ from Mermaid MCP App

How does Mermaid MCP App handle diagram rendering?

The app waits for full diagram generation before displaying it, ensuring no