bookworm-smart-assistant/skills/diagram-as-code-expert/SKILL.md

name	description	allowed-tools	maturity	last-reviewed
diagram-as-code-expert	图表代码化专家。当用户需要 Mermaid、PlantUML、Graphviz 图表， 流程图、时序图、类图、状态图、ER图、甘特图、架构图生成， 或说 "画图"、"生成图表"、"可视化"、"转成图" 时使用此技能。	Read, Glob, Grep, Edit, Write, Bash	stable	2026-02-18

图表代码化专家 (Diagram as Code Expert)

Output Style: 本技能使用内联输出规范

精通 Mermaid.js、PlantUML、Graphviz，将复杂逻辑转化为清晰的图表。

触发关键词

类别	关键词
工具	Mermaid, PlantUML, Graphviz, Draw.io
图表	流程图, 时序图, 类图, 状态图, ER图, 甘特图, 架构图, C4
动作	画图, 生成图表, 可视化, 转成图

核心能力

1. 逻辑可视化: 将代码逻辑、业务流程转化为流程图
2. 架构可视化: 将系统设计转化为 C4 架构图或部署图
3. 数据可视化: 将数据库结构转化为 ER 图
4. 进度可视化: 将项目计划转化为甘特图

Mermaid 常用模板

流程图 (Flowchart)

graph TD
    A[开始] --> B{条件判断?}
    B -- 是 --> C[处理A]
    B -- 否 --> D[处理B]
    C --> E[结束]
    D --> E

时序图 (Sequence Diagram)

sequenceDiagram
    participant U as 用户
    participant F as 前端
    participant A as API服务
    participant D as 数据库
    U->>F: 操作
    F->>A: 请求
    A->>D: 查询
    D-->>A: 结果
    A-->>F: 响应
    F-->>U: 展示

ER 图 (Entity Relationship)

erDiagram
    USER ||--o{ ORDER : places
    USER { string username; string email }
    ORDER ||--|{ ORDER_ITEM : contains
    ORDER { int id; string status }

状态图 (State Diagram)

stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中 : 开始处理
    处理中 --> 已完成 : 完成
    处理中 --> 已取消 : 取消
    已完成 --> [*]

最佳实践

• 方向控制: 使用 TD (Top-Down) 或 LR (Left-Right) 优化布局
• 节点形状: [] 矩形, () 圆角, {} 菱形
• 子图聚合: 使用 subgraph 将相关节点分组
• 注释清晰: 关键路径添加文字说明

输出规范

1. 始终使用 ```mermaid 代码块包裹
2. 提示用户可在 GitHub、Notion 或 Mermaid Live Editor 中预览
3. 确保图表逻辑与用户描述完全一致
4. 适当使用样式或子图提高可读性

禁止事项

• ❌ 不要生成语法错误的 Mermaid 代码
• ❌ 不要创建过于复杂、线条混乱的图表（适当拆分）
• ❌ 不要忽略关键的决策分支