Which integrations are available for this server?

Provides a visual editor for Mermaid diagrams, enabling drag-and-drop editing, live preview, and iterative refinement of flowcharts within a browser-based canvas.

How do I use software-design-mermaid-mcp?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@software-design-mermaid-mcp design a microservice architecture for a todo app" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

software-design-mermaid-mcp

by wzh4464

Overview Schema Related Servers Score Discussions

TypeScript

Local

🎨 Mermaid Visual Editor for Claude

Stop describing diagrams. Start designing them.

Turn Claude into a visual software design partner with a drag-and-drop Mermaid editor that opens right in your browser.

Tests License: MIT MCP TypeScript Node

Getting Started · Features · How It Works · Contributing

Visual diagram editor showing a microservice architecture with drag-and-drop nodes, subgraphs, edge labels, and live Mermaid preview

Claude generates the diagram, you refine it visually — drag nodes, edit labels, draw connections, then submit back for the next iteration

The Problem

When designing software with Claude, you're stuck in a text-only loop:

You: "Add a cache layer between the API and database"
Claude: *regenerates entire Mermaid diagram from scratch*
You: "No, move the cache node to the left..."
Claude: *guesses what you mean, regenerates again*

It's like directing a painter blindfolded.

The Solution

This MCP server gives Claude a visual canvas. When Claude generates a diagram, it pops open a browser-based editor where you can:

Drag nodes exactly where you want them
Edit labels inline with a double-click
Draw connections between any nodes
Rearrange everything and submit back to Claude

Claude sees your visual changes and continues the conversation with full context. Design together, visually.

What is MCP? Model Context Protocol lets AI assistants use external tools. This server gives Claude the ability to open a visual diagram editor — no plugins or extensions needed.

⚡ Getting Started

Claude Code (recommended)

git clone https://github.com/wzh4464/software-design-mermaid-mcp.git
cd software-design-mermaid-mcp
npm install && npm run build
claude mcp add software-design-mermaid node $(pwd)/dist/server/index.js

Then just ask Claude:

> Design a microservice architecture for a todo app

Your browser opens automatically with the visual editor. Edit, submit, iterate. ✨

Add to your VS Code settings.json:

{
  "claude.mcpServers": {
    "software-design-mermaid": {
      "command": "node",
      "args": ["/absolute/path/to/software-design-mermaid-mcp/dist/server/index.js"]
    }
  }
}

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "software-design-mermaid": {
      "command": "node",
      "args": ["/absolute/path/to/software-design-mermaid-mcp/dist/server/index.js"]
    }
  }
}

Add to your Cursor MCP settings (.cursor/mcp.json):

{
  "mcpServers": {
    "software-design-mermaid": {
      "command": "node",
      "args": ["/absolute/path/to/software-design-mermaid-mcp/dist/server/index.js"]
    }
  }
}

Any MCP-compatible client can use this server. The configuration pattern is the same:

Command: node
Args: ["/absolute/path/to/software-design-mermaid-mcp/dist/server/index.js"]
Transport: stdio

Refer to your client's documentation for the exact config file location.

✨ Features

	Feature	Description
🖱️	Drag-and-Drop Canvas	Full React Flow editor with zoom, pan, minimap, grid snapping
🔷	5 Shapes × 3 Edge Types	Rectangle, rounded, diamond, circle, stadium + arrow, dotted, thick
📦	Subgraphs & Auto-Layout	Group nodes into nested subgraphs; dagre auto-arranges (TD/LR/BT/RL)
📝	Live Mermaid Preview	See Mermaid code update in real-time as you edit
🔄	Multi-Round Iteration	Edit → Submit → Claude refines → Edit again. True visual collaboration.
⏪	Undo / Redo	Full history with Ctrl+Z / Ctrl+Y
⚙️	Zero Config	Auto-finds an open port and launches your browser

Horizontal LR layout showing load balancer, backend cluster, and storage subgraphs

🧩 How It Works

  Claude                    MCP Server                 Browser Editor
    │                          │                            │
    │── show_diagram() ───────>│                            │
    │                          │── starts HTTP server ─────>│
    │                          │── opens browser ──────────>│
    │<── { url, success } ─────│                            │
    │                          │                            │
    │                          │<── polls /api/diagram ─────│
    │                          │── returns diagram ────────>│
    │                          │                            │
    │                          │          user drags nodes, │
    │                          │          edits labels,     │
    │                          │          draws connections │
    │                          │                            │
    │                          │<── POST /api/submission ───│
    │── get_diagram_feedback()>│                            │
    │<── updated mermaid code ─│                            │
    │                          │                            │
    │── show_diagram() ───────>│  (Claude sends new version)│
    │   ...iterate...          │                            │

MCP Tools

Tool	What it does
`show_diagram`	Opens the visual editor with a Mermaid flowchart
`get_diagram_feedback`	Gets the user's visual edits back as Mermaid code
`close_diagram`	Closes the editor session

🏗️ Architecture

TypeScript monorepo with npm workspaces:

software-design-mermaid-mcp/
├── shared/          # Mermaid parser & serializer (bidirectional)
├── src/             # MCP server (stdio) + HTTP server (REST API)
├── editor/          # React Flow visual editor
└── dist/            # Pre-built artifacts

Parser: Full Mermaid flowchart syntax → structured FlowDiagram objects
Serializer: FlowDiagram → valid Mermaid code (round-trip safe)
Editor: React 19 + React Flow 12 with custom node/edge renderers

🧑‍💻 Development

npm install          # Install all workspace dependencies
npm test             # Run all tests (42 tests, 4 suites)
npm run build        # Build shared → server → editor
npm run dev:editor   # Editor dev mode with hot reload

🤝 Contributing

Contributions welcome! Some ideas to get started:

📊 Sequence diagram support — extend beyond flowcharts
🎨 Theme customization — dark/light modes, color schemes
📸 Export options — PNG, SVG, PDF export from the editor
👥 Collaborative editing — multiple users on the same diagram
🔶 More node shapes — hexagon, parallelogram, trapezoid

Please open an issue first to discuss what you'd like to change.

📄 License

MIT — use it however you want.

If this saves you time designing software, consider giving it a ⭐

Made with React Flow · MCP SDK · dagre

This server cannot be installed

license - permissive license

quality - not tested

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

–Release cycle

1Releases (12mo)

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

Lightport: Open-Sourcing Glama's AI Gateway
By punkpeye on April 27, 2026.
open source
OpenAI
Tool Definition Quality Score (TDQS)
By punkpeye on April 3, 2026.
mcp
The Hackers Who Tracked My Sleep Cycle
By punkpeye on March 26, 2026.
security

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/wzh4464/software-design-mermaid-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server