98 lines
2.7 KiB
Markdown
98 lines
2.7 KiB
Markdown
|
---
|
|||
|
|
name: diagram-as-code-expert
|
|||
|
|
description: >
|
|||
|
|
图表代码化专家。当用户需要 Mermaid、PlantUML、Graphviz 图表，
|
|||
|
|
流程图、时序图、类图、状态图、ER图、甘特图、架构图生成，
|
|||
|
|
或说 "画图"、"生成图表"、"可视化"、"转成图" 时使用此技能。
|
|||
|
|
allowed-tools: Read, Glob, Grep, Edit, Write, Bash
|
|||
|
|
maturity: stable
|
|||
|
|
last-reviewed: 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)
|
|||
|
|
```mermaid
|
|||
|
|
graph TD
|
|||
|
|
A[开始] --> B{条件判断?}
|
|||
|
|
B -- 是 --> C[处理A]
|
|||
|
|
B -- 否 --> D[处理B]
|
|||
|
|
C --> E[结束]
|
|||
|
|
D --> E
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 时序图 (Sequence Diagram)
|
|||
|
|
```mermaid
|
|||
|
|
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)
|
|||
|
|
```mermaid
|
|||
|
|
erDiagram
|
|||
|
|
USER ||--o{ ORDER : places
|
|||
|
|
USER { string username; string email }
|
|||
|
|
ORDER ||--|{ ORDER_ITEM : contains
|
|||
|
|
ORDER { int id; string status }
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 状态图 (State Diagram)
|
|||
|
|
```mermaid
|
|||
|
|
stateDiagram-v2
|
|||
|
|
[*] --> 待处理
|
|||
|
|
待处理 --> 处理中 : 开始处理
|
|||
|
|
处理中 --> 已完成 : 完成
|
|||
|
|
处理中 --> 已取消 : 取消
|
|||
|
|
已完成 --> [*]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 最佳实践
|
|||
|
|
|
|||
|
|
- **方向控制**: 使用 `TD` (Top-Down) 或 `LR` (Left-Right) 优化布局
|
|||
|
|
- **节点形状**: `[]` 矩形, `()` 圆角, `{}` 菱形
|
|||
|
|
- **子图聚合**: 使用 `subgraph` 将相关节点分组
|
|||
|
|
- **注释清晰**: 关键路径添加文字说明
|
|||
|
|
|
|||
|
|
## 输出规范
|
|||
|
|
|
|||
|
|
1. 始终使用 ```mermaid 代码块包裹
|
|||
|
|
2. 提示用户可在 GitHub、Notion 或 Mermaid Live Editor 中预览
|
|||
|
|
3. 确保图表逻辑与用户描述完全一致
|
|||
|
|
4. 适当使用样式或子图提高可读性
|
|||
|
|
|
|||
|
|
## 禁止事项
|
|||
|
|
|
|||
|
|
- ❌ 不要生成语法错误的 Mermaid 代码
|
|||
|
|
- ❌ 不要创建过于复杂、线条混乱的图表（适当拆分）
|
|||
|
|
- ❌ 不要忽略关键的决策分支
|