图表生成技能

重要：工具调用规则

必须直接使用 Bash 工具执行 shell 命令，绝对不要使用 Task 工具来执行命令。

所有 shell 命令通过 Bash 工具直接执行
不要将 Bash 作为 Task 的 subagent_type
不要使用 Task 工具来委托执行 shell 命令

触发条件

当用户输入包含以下关键词时触发：

"生成图表"、"画图"、"生成时序图"、"生成流程图"
"diagram"、"mermaid"、"sequence diagram"、"flowchart"
"画个流程图"、"帮我画"、"生成架构图"
"类图"、"状态图"、"ER图"、"甘特图"

支持的图表类型

1. 时序图 (Sequence Diagram)

用于展示对象之间的交互顺序。

sequenceDiagram
    participant A as 用户
    participant B as 系统
    A->>B: 请求
    B-->>A: 响应

2. 流程图 (Flowchart)

用于展示流程和决策。

flowchart TD
    A[开始] --> B{判断}
    B -->|是| C[执行]
    B -->|否| D[结束]
    C --> D

3. 类图 (Class Diagram)

用于展示类的结构和关系。

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog

4. 状态图 (State Diagram)

用于展示状态转换。

stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中
    处理中 --> 已完成
    处理中 --> 失败
    已完成 --> [*]
    失败 --> [*]

5. ER图 (Entity Relationship Diagram)

用于展示数据库实体关系。

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : "ordered in"

6. 甘特图 (Gantt Chart)

用于展示项目进度。

gantt
    title 项目计划
    dateFormat YYYY-MM-DD
    section 阶段1
    任务1 :a1, 2024-01-01, 30d
    任务2 :after a1, 20d

7. Git 分支图 (Git Graph)

用于展示 Git 分支历史。

gitGraph
    commit
    branch develop
    checkout develop
    commit
    checkout main
    merge develop

执行步骤

1. 理解用户需求

询问用户想要生成什么类型的图表
了解图表的具体内容和场景
确认是否需要保存为文件

2. 生成 Mermaid 代码

根据用户描述，生成对应的 Mermaid 语法代码。

时序图关键语法：

participant A as 名称 - 定义参与者
A->>B: 消息 - 同步消息
A-->>B: 消息 - 异步响应
alt/else/end - 条件分支
loop/end - 循环
par/and/end - 并行

流程图关键语法：

A[矩形] - 普通节点
B{菱形} - 判断节点
C([圆角]) - 圆角节点
D[(数据库)] - 数据库节点
A --> B - 箭头连接
A -->|文字| B - 带文字的箭头

类图关键语法：

+ public, - private, # protected
<|-- 继承, *-- 组合, o-- 聚合
..> 依赖, ..|> 实现

3. 输出格式

直接输出 Mermaid 代码块：

```mermaid
sequenceDiagram
    participant 用户
    participant 系统
    用户->>系统: 登录请求
    系统-->>用户: 返回 token
```

4. 保存文件（可选）

如果用户需要保存，询问文件名并保存为 .md 文件：

# 保存到当前目录
echo '```mermaid\n...\n```' > diagram.md

5. 提供使用建议

告知用户如何查看和使用生成的图表：

VS Code + Mermaid 插件
draw.io 导入（Arrange → Insert → Advanced → Mermaid）
在线工具：https://mermaid.live
GitHub/GitLab Markdown 原生支持

智能生成规则

时序图生成规则

识别参与者（用户、系统、服务、数据库等）
按时间顺序排列交互
区分同步调用（->>）和异步响应（-->>）
添加条件分支（alt/else）和循环（loop）

流程图生成规则

识别起点和终点
识别判断节点（if/else）
识别循环节点（for/while）
使用合适的节点形状

类图生成规则

识别类和接口
识别属性和方法
识别类之间的关系（继承、组合、依赖等）
使用访问修饰符（+/-/#）

示例场景

场景1：用户登录流程时序图

用户输入：

生成一个用户登录的时序图，包括前端、后端API、数据库

生成：

```mermaid
sequenceDiagram
    participant 前端
    participant API
    participant 数据库

    前端->>API: POST /login {username, password}
    API->>数据库: 查询用户信息
    数据库-->>API: 返回用户数据

    alt 认证成功
        API->>API: 生成 JWT token
        API-->>前端: 返回 {token, user}
        前端->>前端: 保存 token 到 localStorage
        前端-->>前端: 跳转到首页
    else 认证失败
        API-->>前端: 返回 {error: "用户名或密码错误"}
        前端-->>前端: 显示错误提示
    end
```

场景2：订单处理流程图

用户输入：

画一个订单处理的流程图

生成：

```mermaid
flowchart TD
    A[接收订单] --> B{库存充足?}
    B -->|是| C[扣减库存]
    B -->|否| D[通知用户缺货]
    C --> E{支付成功?}
    E -->|是| F[生成发货单]
    E -->|否| G[恢复库存]
    F --> H[发货]
    H --> I[订单完成]
    D --> J[订单取消]
    G --> J
```

注意事项

使用中文标签时，确保编码为 UTF-8
复杂图表建议分步骤生成，避免过于复杂
时序图参与者数量建议不超过 6 个
流程图节点数量建议不超过 15 个
生成后可以根据用户反馈调整和优化

高级功能

1. 样式定制

可以添加样式定义：

flowchart TD
    A[开始]:::startClass --> B[处理]
    classDef startClass fill:#f9f,stroke:#333,stroke-width:4px

2. 子图

可以使用子图组织复杂流程：

flowchart TD
    subgraph 前端
        A[页面] --> B[组件]
    end
    subgraph 后端
        C[API] --> D[数据库]
    end
    B --> C

3. 注释

可以添加注释说明：

sequenceDiagram
    Note over 用户,系统: 这是一个注释
    用户->>系统: 请求

diagram-gen