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:

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

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"