# Mermaid MCP

> Generate Mermaid diagrams including swimlane diagrams, flowcharts, sequence diagrams, and more. Invoke when user needs to create diagrams, flowcharts, swimlane diagrams, or visualize processes.

- Skill: `zekiwest/mermaid-mcp` (Agent Skill)
- Install (CLI): `npx skillmds@latest add zekiwest/mermaid-mcp`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zekiwest/mermaid-mcp/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: Zekiwest (https://skillmd.com/u/zekiwest)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/zekiwest/mermaid-mcp

---


# Mermaid MCP Skill

This skill provides the ability to generate Mermaid diagrams using the Mermaid MCP server.

## What This Skill Does

- Generates swimlane diagrams for business processes
- Creates flowcharts for workflows
- Produces sequence diagrams for API interactions
- Supports 22+ diagram types

## When to Invoke

Invoke this skill when:
- User asks to create a diagram
- User mentions "swimlane diagram" or "泳道图"
- User wants to visualize a process or workflow
- User needs flowcharts, sequence diagrams, or other Mermaid diagrams

## Installation

### Prerequisites

- Node.js 18+
- npm or yarn

### Step 1: Install Skill

```bash
npx skills add Zekiwest/mermaid-mcp-skill
```

### Step 2: Install Mermaid MCP Server

```bash
npm install -g @narasimhaponnada/mermaid-mcp-server
```

### Step 3: Get Installation Path

```bash
npm root -g
```

The full path to the MCP server would be:
```
{npm-root}/@narasimhaponnada/mermaid-mcp-server/dist/index.js
```

Example output:
```
/Users/zhansi/.nvm/versions/node/v20.19.6/lib/node_modules
```

So the full path is:
```
/Users/zhansi/.nvm/versions/node/v20.19.6/lib/node_modules/@narasimhaponnada/mermaid-mcp-server/dist/index.js
```

### Step 4: Configure MCP Settings

> ⚠️ **Important**: Trae currently supports only ONE MCP Server configuration at a time. If you already have another MCP server configured, you will need to replace it.

**macOS/Linux**: `~/.trae/mcp.json`

Replace the entire content with:

```json
{
  "mcpServers": {
    "mermaid": {
      "command": "node",
      "args": ["/path/to/@narasimhaponnada/mermaid-mcp-server/dist/index.js"],
      "env": {}
    }
  }
}
```

Replace `/path/to/` with your actual installation path from Step 3.

### Step 5: Restart Trae IDE

After saving the configuration, restart Trae IDE for the changes to take effect.

## Available MCP Tools

| Tool | Description |
|------|-------------|
| `generateDiagram` | Generate and render diagrams to SVG files |
| `validateDiagram` | Validate syntax with detailed error reporting |
| `getDiagramInfo` | Analyze diagram complexity and metadata |
| `listSupportedTypes` | List all 22+ supported diagram types |
| `convertDiagram` | Convert diagrams to different formats |
| `listTemplates` | Browse 50+ pre-built templates |
| `getTemplate` | Get specific template code |
| `searchTemplates` | Search templates by keyword |

## Usage Examples

### Generate a Swimlane Diagram

```
请生成一个用户购物流程的泳道图
```

### Generate a Flowchart

```
请创建一个登录流程图
```

### Generate a Sequence Diagram

```
请生成一个API调用序列图
```

## Supported Diagram Types

- Flowcharts
- Sequence diagrams
- Class diagrams
- State diagrams
- ER diagrams
- Gantt charts
- Git graphs
- Mindmaps
- Timelines
- And 13+ more types!

## Troubleshooting

### MCP Server Not Found

If the MCP server is not found, verify:
1. Node.js is installed (v18+)
2. The package is installed globally
3. The path in mcp.json is correct

### Multiple MCP Servers Conflict

If you see an error about multiple MCP servers:
1. Trae only supports one MCP server at a time
2. Remove other MCP server configurations from `~/.trae/mcp.json`
3. Keep only the mermaid configuration
4. Restart Trae IDE

### Diagram Generation Fails

1. Check the Mermaid syntax
2. Use `validateDiagram` tool to identify errors
3. Refer to [Mermaid documentation](https://mermaid.js.org/)

## Quick Installation Script

For macOS/Linux users, you can run this one-liner to get the full path:

```bash
echo "MCP Server Path: $(npm root -g)/@narasimhaponnada/mermaid-mcp-server/dist/index.js"
```