How do I install the Mermaid MCP skill?

Run npx skillmds@latest add zekiwest/mermaid-mcp in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Mermaid MCP safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Mermaid MCP?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Mermaid MCP free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Mermaid MCP?

Zekiwest (@zekiwest) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Mermaid MCP by zekiwest — Agent Skill

Name: Mermaid MCP
Rating: 4.2 (5 reviews)
Author: Zekiwest

File contents

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

npx skills add Zekiwest/mermaid-mcp-skill

Step 2: Install Mermaid MCP Server

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

Step 3: Get Installation Path

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:

{
  "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:

Node.js is installed (v18+)
The package is installed globally
The path in mcp.json is correct

Multiple MCP Servers Conflict

If you see an error about multiple MCP servers:

Trae only supports one MCP server at a time
Remove other MCP server configurations from ~/.trae/mcp.json
Keep only the mermaid configuration
Restart Trae IDE

Diagram Generation Fails

Check the Mermaid syntax
Use validateDiagram tool to identify errors
Refer to Mermaid documentation

Quick Installation Script

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

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

---name: mermaid-mcpdescription: Generate Mermaid diagrams including swimlane diagrams, flowcharts, sequence diagrams, and more. Invoke when user needs to create diagrams, flowcharts, swimlane diagrams, or visualize processes.---# Mermaid MCP SkillThis 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 InvokeInvoke 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```bashnpx skills add Zekiwest/mermaid-mcp-skill```### Step 2: Install Mermaid MCP Server```bashnpm install -g @narasimhaponnada/mermaid-mcp-server```### Step 3: Get Installation Path```bashnpm 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 IDEAfter 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 FoundIf the MCP server is not found, verify:1. Node.js is installed (v18+)2. The package is installed globally3. The path in mcp.json is correct### Multiple MCP Servers ConflictIf you see an error about multiple MCP servers:1. Trae only supports one MCP server at a time2. Remove other MCP server configurations from `~/.trae/mcp.json`3. Keep only the mermaid configuration4. Restart Trae IDE### Diagram Generation Fails1. Check the Mermaid syntax2. Use `validateDiagram` tool to identify errors3. Refer to [Mermaid documentation](https://mermaid.js.org/)## Quick Installation ScriptFor macOS/Linux users, you can run this one-liner to get the full path:```bashecho "MCP Server Path: $(npm root -g)/@narasimhaponnada/mermaid-mcp-server/dist/index.js"```

Frequently asked questions

Mermaid MCP