mermaid-diagram

by pupujanet-eng

Install this Skill

curl -fsSL -o mermaid-diagram.zip https://skill.seembox.com/api/v1/skills/mermaid-diagram/download && unzip mermaid-diagram.zip

Download mermaid-diagram.zip

SKILL.md About

---
name: mermaid-diagram
description: Generate Mermaid diagrams for product managers and developers. Use when: (1) creating flowcharts, system architecture diagrams, sequence diagrams, or mind maps, (2) converting text descriptions or PRDs into visual diagrams, (3) drawing user journey maps, state machines, or ER diagrams, (4) any request that mentions "画图", "流程图", "架构图", "时序图", "脑图", "mermaid". Output valid Mermaid code blocks.
---

# Mermaid Diagram Generator

Generate valid Mermaid diagram code from text descriptions.

## Diagram Type Selection

| 需求 | 推荐类型 | Mermaid 关键字 |
|------|----------|----------------|
| 业务流程 / 逻辑流程 | Flowchart | `flowchart TD` |
| 系统交互 / API 时序 | Sequence | `sequenceDiagram` |
| 产品架构 / 系统结构 | Flowchart / C4 | `flowchart LR` |
| 状态机 / 用户状态 | State | `stateDiagram-v2` |
| 脑图 / 功能树 | Mindmap | `mindmap` |
| 数据库结构 | ER | `erDiagram` |
| 项目时间线 | Timeline | `timeline` |
| 用户旅程 | Journey | `journey` |

## Output Rules

1. Always wrap output in ` ```mermaid ` code blocks
2. Use Chinese labels when the user writes in Chinese
3. Add comments (`%%`) for complex diagrams to explain sections
4. Keep node names short (≤10 chars) to avoid layout issues
5. Validate syntax mentally before outputting — common mistakes:
   - Missing quotes around labels with spaces/Chinese
   - Wrong arrow syntax (`-->` vs `---` vs `->>`)
   - Unclosed brackets

## Quick Syntax Reference

```
flowchart TD
    A[开始] --> B{判断条件}
    B -- 是 --> C[执行操作]
    B -- 否 --> D[结束]
    C --> D
```

```
sequenceDiagram
    用户->>服务端: 发起请求
    服务端->>数据库: 查询数据
    数据库-->>服务端: 返回结果
    服务端-->>用户: 响应
```

```
mindmap
  root((产品名))
    功能A
      子功能1
      子功能2
    功能B
```

## Reference Files

- **references/diagram-patterns.md** — 产品经理常用图模式（带完整示例代码）

Read when: user asks for a specific diagram type or needs a complex multi-node diagram.

_meta.json Metadata

{
  "ownerId": "kn796w9h2zf7qzd750vfqf4g8d82x6kh",
  "publishedAt": 1773680428113,
  "slug": "mermaid-diagram",
  "version": "1.0.0"
}