技术图表绘制

技能文档

---
name: diagram
description: 一句话自然语言，生成架构图、流程图、时序图、领域模型图等各种类型的动态 SVG 图。支持系统架构图、调用链路图、部署架构图、数据流图、领域模型图、核心原理图等。
title: 技术图表绘制
category: 开发工具
---

# Diagram - 技术图表绘制

## ⚠️ 强制工作流（必须遵守）

**每次执行 diagram 技能时，必须按照以下工作流执行，不得跳过任何步骤！**

### 工作流选择规则

| 图类型 | 工作流 | 规范文件 |
|--------|--------|----------|
| **领域模型图** | 专属工作流（见下方） | [model-svg.md](references/model-svg.md) |
| **核心原理图** | 专属工作流（见下方） | [principle-svg.md](references/principle-svg.md) |
| **泳道图** | 专属工作流（见下方） | [swimlane-svg.md](references/swimlane-svg.md) |
| **其他所有图类型** | 标准工作流（见下方） | [svg-common.md](references/svg-common.md) |

### 标准工作流（适用于：系统架构图、调用链路图、部署架构图、数据流图、时序图、状态图、流程图）

**必须使用 `todo_write` 创建任务清单，依次执行：**

```
1. 需求分析 → 2. ASCII布局规划 → 3. SVG布局规划 → 4. 图形绘制 → 5. 连线标注 → 6. 动画配置 → 7. 输出文件 → 8. 验证文件 → 9. 修复循环 → 10. 结果展示
```

| 步骤 | 操作 | 输出 | 检查点 |
|------|------|------|--------|
| 1. 需求分析 | 确定架构图类型、层级数量、组件清单 | 架构草图 | ✅ 已明确图类型 |
| 2. ASCII布局规划 | 合理规划整体布局 | ASCII布局图 | ✅ 已输出ASCII图 |
| 3. SVG布局规划 | 计算 viewBox、确定每层 Y 坐标 | 布局参数 | ✅ 已计算坐标 |
| 4. 图形绘制 | 按层级绘制组件矩形、标签 | SVG 图形组 | ✅ 组件已绘制 |
| 5. 连线标注 | 添加连接线、协议标注 | 完整 SVG | ✅ 连线已完成 |
| 6. 动画配置 | 添加 CSS 动画、设置延迟 | 动态 SVG | ✅ 动画已配置 |
| 7. 输出文件 | 保存为 `{名称}.svg` | 文件路径 | ✅ 文件已保存 |
| 8. 验证文件 | 执行 `python3 scripts/llm_svg_validator.py {文件}.svg` | 验证报告 | ✅ **必须执行** |
| 9. 修复循环 | 验证不通过则修复，最多3次循环 | 通过为止 | ✅ 验证通过 |
| 10. 结果展示 | 对话返回SVG结果 | 包含SVG图的对话信息 | ✅ 已展示 |

**关键约束**：
- ❌ **禁止跳过 ASCII 布局规划**（步骤2）
- ❌ **禁止跳过 SVG 布局规划**（步骤3）
- ❌ **禁止跳过验证文件**（步骤8）- 必须执行 `llm_svg_validator.py`
- ❌ **禁止跳过修复循环**（步骤9）- 验证失败必须修复

### 核心原理图专属工作流

**必须使用 `todo_write` 创建任务清单，依次执行：**

```
1. 核心思考框架 → 2. 布局意图规划 → 3. 生成SVG → 4. 验证文件 → 5. 修复循环 → 6. 结果展示
```

| 步骤 | 操作 | 输出 | 检查点 |
|------|------|------|--------|
| 1. 核心思考框架 | 回答 4 个问题（主体/流转/决策/状态） | 机制分析 | ✅ 已明确运作机制 |
| 2. 布局意图规划 | 确定布局方向、英雄组件、尺寸梯度、间距语义 | 布局意图文档 | ✅ 已明确布局策略 |
| 3. 生成SVG | 根据布局直接编写SVG代码，包含组件、连线、便签等 | SVG文件 | ✅ 文件已保存 |
| | **⚠️ 必须严格遵循 line_standard.md 第12节箭头规范** | | ✅ 箭头符合标准 |
| | **⚠️ 必须遵循 principle-svg.md 的SVG结构模板** | | ✅ 结构正确 |
| 4. 验证文件 | 执行 `python3 scripts/llm_svg_validator.py {文件}.svg` | 验证报告 | ✅ **必须执行** |
| 5. 修复循环 | 验证不通过则修复，最多3次循环 | 通过为止 | ✅ 验证通过 |
| 6. 结果展示 | 对话返回SVG结果 | 包含SVG图的对话信息 | ✅ 已展示 |

**关键约束**：
- ❌ **禁止跳过核心思考框架**（步骤1）- 必须先回答 4 个问题
- ❌ **禁止跳过布局意图规划**（步骤2）- 明确布局方向、英雄组件、尺寸梯度
- ❌ **禁止跳过验证文件**（步骤4）- 必须执行 `llm_svg_validator.py`
- ❌ **禁止跳过修复循环**（步骤5）- 验证失败必须修复
- ✅ **连线规范（含箭头）复用** line_standard.md 第12节
- ✅ **直接编写SVG，不使用JSON中间格式**

详细规范见：[principle-svg.md](references/principle-svg.md)

### 泳道图专属工作流

**必须使用 `todo_write` 创建任务清单，依次执行：**

```
1. 需求分析 → 2. 生成JSON配置 → 3. 执行脚本生成SVG → 4. 预览调整
```

| 步骤 | 操作 | 输出 | 检查点 |
|------|------|------|--------|
| 1. 需求分析 | 确定纵向泳道（角色/系统）、横向泳道（阶段）、流程步骤、连线关系 | 泳道草图 | ✅ 已明确泳道和步骤 |
| 2. 生成JSON配置 | 按规范生成 JSON 配置文件 | JSON文件 | ✅ JSON已生成 |
| 3. 执行脚本生成SVG | `python3 scripts/swimlane_svg_generator.py --json xxx.json --svg xxx.svg` | SVG文件 | ✅ SVG已生成 |
| 4. 预览调整 | 预览 SVG，不满意则修改 JSON 后重新生成 | 最终SVG | ✅ 预览满意 |

**关键约束**：
- ✅ **使用脚本生成SVG**，LLM不直接编写SVG代码
- ✅ **JSON格式严格遵循** swimlane-svg.md 中的字段说明
- ✅ **连线出口入口自动分散**，无需手动指定
- ❌ **禁止跳过脚本生成**（步骤3）
- ❌ **不需要执行验证脚本**（脚本已自动处理布局）

详细规范见：[swimlane-svg.md](references/swimlane-svg.md)

### 领域模型图专属工作流

**必须使用 `todo_write` 创建任务清单，依次执行：**

```
1. 分析SQL → 2. 领域划分设计 → 3. 确定四色类型 → 4. 绘制ASCII布局图及连线关系 → 5. 生成JSON配置 → 6. 执行脚本生成SVG → 7. 预览
```

| 步骤 | 操作 | 输出 | 检查点 |
|------|------|------|--------|
| 1. 分析SQL | 读取 DDL SQL 文件，分析表结构和字段关系 | 表关系清单 | ✅ 已明确表结构 |
| 2. 领域划分设计 | 根据业务语义划分领域边界 | 领域划分图 | ✅ 已划分领域 |
| 3. 确定四色类型 | 为每个模型确定四色类型（MI/RO/GIP/PCL） | 类型标注 | ✅ 已标注类型 |
| 4. 绘制ASCII布局图 | 使用ASCII字符绘制布局和连线关系 | ASCII布局图 | ✅ 已输出ASCII图 |
| 5. 生成JSON配置 | 按规范生成 JSON 配置文件 | JSON文件 | ✅ JSON已生成 |
| 6. 执行脚本生成SVG | `python3 scripts/model_svg_generator.py --json xxx.json --svg xxx.svg` | SVG文件 | ✅ SVG已生成 |
| 7. 预览调整 | 预览 SVG，不满意则修改 JSON 后重新生成 | 最终SVG | ✅ 预览满意 |

**关键约束**：
- ✅ **使用脚本生成SVG**，LLM不直接编写SVG代码
- ✅ **JSON格式严格遵循** model-svg.md 中的字段说明
- ❌ **不需要执行验证脚本**（脚本已自动处理布局）
- ❌ **禁止跳过脚本生成**（步骤6）
- ❌ **禁止跳过四色类型标注**（步骤3）

详细规范见：[model-svg.md](references/model-svg.md)

---

## 支持的图类型

**公共规范**：[references/svg-common.md](references/svg-common.md)（配色、动画、SVG技术）  
**连线规范**：[references/line_standard.md](references/line_standard.md)

| 图类型 | 说明 | 规范文件 |
|--------|------|----------|
| 系统架构图 | 展示系统分层、组件、依赖关系 | [architecture-svg.md](references/architecture-svg.md) |
| 调用链路图 | 展示服务间调用关系、通信协议 | [callchain-svg.md](references/callchain-svg.md) |
| 部署架构图 | 展示物理/云部署拓扑 | [deployment-svg.md](references/deployment-svg.md) |
| 数据流图 | 展示数据流转、处理过程 | [dataflow-svg.md](references/dataflow-svg.md) |
| 时序图 | 展示对象间交互的时间顺序 | [sequence-svg.md](references/sequence-svg.md) |
| 状态图 | 展示状态流转关系 | [state-svg.md](references/state-svg.md) |
| 流程图 | 展示业务流程或算法流程 | [flowchart-svg.md](references/flowchart-svg.md) |
| 泳道图 | 按角色/系统划分协作流程 | [swimlane-svg.md](references/swimlane-svg.md) |
| 核心原理图 | 展示技术组件内部机制、执行流程 | [principle-svg.md](references/principle-svg.md) |
| 领域模型图 | 展示领域模型及关联关系 | [model-svg.md](references/model-svg.md) |

## 使用方法

### 命令格式

```
/diagram 绘制[类型]图 [描述]
```

### 参数说明

| 参数 | 可选值 | 说明 |
|------|--------|------|
| 类型 | 系统/调用链路/部署/数据流/时序/状态/流程/泳道/核心原理/领域模型 | 绘图类型 |
| 描述 | 任意文本 | 主题描述 |

## 输出规范

### 文件输出

| 项目 | 规范 |
|------|------|
| 格式 | SVG |
| 路径 | `/{图名称}.svg` |
| 编码 | UTF-8 |

### 文本语言策略

- **默认语言**：描述性信息优先使用中文
- **技术标识**：类名、方法名、表名等保持英文/代码风格
- **落盘兼容**：若存在编码风险，同时输出中文版和英文版

使用说明

# Diagram - 技术图表绘制

一句话描述你想表达的系统或流程，Agent 帮你画成技术图表。

## 能做什么

- **说人话出图** —— 告诉 Agent 你想画什么，直接生成专业的 SVG 技术图表
- **多种类型** —— 架构图、时序图、流程图、领域模型图等 10 种常用图表
- **基于素材生成** —— 可以结合代码、SQL、文档等素材来画图
- **脚本驱动** —— 泳道图、领域模型图支持 JSON 配置 + 脚本生成，可快速迭代调整

## 支持的图表

| 类型 | 什么时候用 |
|------|-----------|
| **系统架构图** | 展示系统分层、模块和组件依赖 |
| **调用链路图** | 展示服务之间的调用关系 |
| **时序图** | 展示接口调用或消息交互的时间顺序 |
| **流程图** | 展示业务流程或算法步骤 |
| **状态图** | 展示状态流转，比如订单生命周期 |
| **泳道图** | 展示跨角色、跨系统的协作流程（支持同步/异步连线） |
| **部署架构图** | 展示服务器、容器、云资源的部署拓扑 |
| **数据流图** | 展示数据从哪里来、到哪里去、怎么处理 |
| **核心原理图** | 展示技术组件的内部工作机制 |
| **领域模型图** | 展示领域实体、属性及关联关系 |

## 使用方法

推荐用 `/diagram` 显式调用：

```
/diagram 绘制[类型]图 [描述]
```

**示例**：

> /diagram 绘制电商架构图
>
> /diagram 根据 xxx.sql 生成电商领域模型图
>
> /diagram 结合 @README.md 生成订单售后时序图
>
> /diagram 绘制 Redis 缓存核心原理图
>
> /diagram 绘制电商下单履约结算泳道图

也可以直接跟 Agent 描述你想画什么，Agent 会理解你的需求。

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。