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

Install Mermaid MCP Server

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

Configure MCP Settings

Add the following to your MCP settings file:

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

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

Replace /path/to/ with the actual installation path. To find the path:

npm root -g

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

Available MCP Tools

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

Diagram Generation Fails

1. Check the Mermaid syntax
2. Use validateDiagram tool to identify errors
3. Refer to Mermaid documentation