mirrors / skillhub-085-drawio-logical-diagrams

项目文件夹

skillhub-085-drawio-logical-diagrams
文件
main
T
wehub-skill-sync 105cbd62af chore: import zh skill drawio-logical-diagrams
2026-07-13 21:36:15 +08:00

233 行
15 KiB
Markdown
原始文件 永久链接 Blame 文件历史

此文件含有模棱两可的 Unicode 字符
此文件含有可能会与其他字符混淆的 Unicode 字符。 如果您是想特意这样的，可以安全地忽略该警告。 使用 Escape 按钮显示他们。
---
name: drawio-logical-diagrams
description: '创建专业的逻辑流程图和逻辑系统架构图，使用 draw.io XML 格式（.drawio 文件）。适用于创建：（1）显示系统组件间数据/流程流转的逻辑流程图，（2）不涉及云厂商具体信息的逻辑架构图，（3）BPMN 流程图，（4）UML 图（类图、序列图、活动图），（5）数据流图（DFD），（6）决策流程图，或（7）系统交互图。该技能侧重于通用/抽象表示，而非 AWS/Azure 特定架构（云架构图请使用 aws-drawio-architecture-diagrams）。'
allowed-tools: Read, Write, Bash
---
# Draw.io 逻辑图创建
## 概述
使用 draw.io 原生 XML 格式创建专业逻辑图，包括逻辑流程图、系统架构可视化以及抽象过程表示，采用通用形状和符号。
## 何时使用
- 创建显示系统组件间数据流转的逻辑流程图
- 设计逻辑架构图（抽象系统结构）
- 构建业务流程的 BPMN 流程图
- 绘制 UML 图（类图、序列图、活动图、状态图）
- 创建系统分析用的数据流图（DFD）
- 制作含分支逻辑的决策流程图
- 可视化系统交互和时序
- 记录不含云特定信息的逻辑系统设计
**请勿用于：** AWS/Azure/GCP 架构图（请使用 `aws-drawio-architecture-diagrams`）。
## 操作说明
### 创建逻辑图
1. **分析需求**：理解要绘制图表所描述的系统/流程
2. **选择图表类型**：流程图、架构图、BPMN、UML、DFD 等
3. **识别元素**：确定参与者、流程、数据存储、连接器
4. **起草 XML 结构**：创建包含正确根单元格的 mxGraphModel
5. **添加形状**：创建带有合适样式的 mxCell 元素
6. **添加连接线**：通过边元素连接各元素
7. **验证 XML**：检查 XML 格式是否正确，所有 ID 是否唯一（见下方验证清单）
8. **输出**：为用户写入 .drawio 文件
### XML 验证清单
在输出文件前，请验证：
- [ ] 所有标签均已正确闭合（没有未闭合的 `<mxCell>`、`</mxGeometry>` 等）
- [ ] 所有单元格 ID 唯一（0 和 1 为保留根单元格，请从 2 开始使用连续整数）
- [ ] 所有 `source` 和 `target` 属性引用了已存在的单元格 ID
- [ ] 所有 `parent` 属性引用了已存在的单元格 ID
- [ ] 所有坐标（x, y, width, height）均为正数
- [ ] 特殊字符已转义（`<` → `&lt;`，`>` → `&gt;`，`&` → `&amp;`）
- [ ] 多行标签使用 `&#xa;` 或在样式中使用 `html=1` 配合 `<br>`
### 关键 XML 组件
| 组件 | 说明 |
|-----------|-------------|
| `mxfile` | 根元素，包含 host 和 version |
| `diagram` | 包含图表定义 |
| `mxGraphModel` | 画布设置（网格、页面尺寸） |
| `root` | 所有单元格的容器（必须包含 id="0" 和 id="1"） |
| `mxCell` | 单个形状（顶点）或连接线（边） |
## Draw.io XML 结构
```xml
<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
<diagram id="logical-flow-1" name="Logical Flow">
<mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1"
tooltips="1" connect="1" arrows="1" fold="1" page="1"
pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- 此处放置形状和连接线 -->
</root>
</mxGraphModel>
</diagram>
</mxfile>
```
**关键规则：**
- ID "0" 和 "1" 保留给根单元格
- 从 "2" 开始使用连续整数 ID
- 架构图使用横向布局
- 所有坐标必须为正数并与网格对齐（10 的倍数）
## 通用形状和样式
### 基本形状类型
| 形状 | 样式 |
|-------|-------|
| 矩形 | `rounded=0;whiteSpace=wrap;html=1;` |
| 圆角矩形 | `rounded=1;whiteSpace=wrap;html=1;` |
| 椭圆/圆形 | `ellipse;whiteSpace=wrap;html=1;` |
| 菱形 | `rhombus;whiteSpace=wrap;html=1;` |
| 圆柱体 | `shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;` |
| 六边形 | `shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;` |
| 平行四边形 | `shape=ext;double=1;rounded=0;whiteSpace=wrap;html=1;` |
### 标准调色板
| 元素类型 | 填充色 | 边框色 | 用途 |
|--------------|------------|--------------|-------|
| 流程 | `#dae8fc` | `#6c8ebf` | 操作/动作 |
| 决策 | `#fff2cc` | `#d6b656` | 条件分支 |
| 开始/结束 | `#d5e8d4` | `#82b366` | 终止状态 |
| 数据/存储 | `#e1f5fe` | `#0277bd` | 数据库/文件 |
| 实体 | `#f3e5f5` | `#7b1fa2` | 外部系统 |
| 错误/停止 | `#f8cecc` | `#b85450` | 错误状态 |
| 参与者/用户 | `#ffe0b2` | `#f57c00` | 用户/参与者 |
| 容器 | `#f5f5f5` | `#666666` | 分组区域 |
### 连接线样式
**标准流程：**
```
edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;
```
**虚线（备选/可选）：**
```
edgeStyle=orthogonalEdgeStyle;dashed=1;dashPattern=5 5;strokeColor=#666666;
```
**箭头样式：**
- `endArrow=classic;endFill=1` — 实心三角
- `endArrow=open;endFill=0` — 开放箭头
- `endArrow=blockThin;endFill=1` — 块状箭头
## 图表类型
| 类型 | 关键元素 |
|------|--------------|
| 逻辑流程 | 参与者（橙色）、服务（蓝色）、数据存储（青色）、外部系统（紫色） |
| 逻辑架构 | 分层容器，内含嵌套组件 |
| BPMN | 圆形（开始/结束）、圆角矩形（活动）、菱形（网关） |
| UML 序列 | 垂直生命线，带消息箭头 |
| DFD | 正方形（实体）、圆形（流程）、开口矩形（数据存储） |
## 参考文件
有关详细的形状示例和样式参考，请参见：
- [shape-styles.md](references/shape-styles.md) — 完整形状示例和样式参考
- [diagram-templates.md](references/diagram-templates.md) — 可直接使用的模板
## 示例
### 示例 1：订单处理流程
**请求：** "创建一个显示订单处理的逻辑流程图：客户提交订单，系统验证，若验证通过则处理支付并发货，若验证不通过则通知客户。"
```xml
<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
<diagram id="order-flow-1" name="Order Processing">
<mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
<root>
<mxCell id="0"/><mxCell id="1" parent="0"/>
<mxCell id="2" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;" vertex="1" parent="1"><mxGeometry x="80" y="50" width="80" height="40" as="geometry"/></mxCell>
<mxCell id="3" value="Submit Order" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="1"><mxGeometry x="60" y="130" width="120" height="60" as="geometry"/></mxCell>
<mxCell id="4" value="Validate&#xa;Order?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;" vertex="1" parent="1"><mxGeometry x="80" y="230" width="80" height="80" as="geometry"/></mxCell>
<mxCell id="5" value="Notify&#xa;Customer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=12;" vertex="1" parent="1"><mxGeometry x="220" y="240" width="100" height="50" as="geometry"/></mxCell>
<mxCell id="6" value="Process&#xa;Payment" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="1"><mxGeometry x="60" y="350" width="120" height="60" as="geometry"/></mxCell>
<mxCell id="7" value="Ship Order" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="1"><mxGeometry x="60" y="450" width="120" height="60" as="geometry"/></mxCell>
<mxCell id="8" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;" vertex="1" parent="1"><mxGeometry x="80" y="550" width="80" height="40" as="geometry"/></mxCell>
<mxCell id="10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="2" target="3"><mxGeometry relative="1" as="geometry"/></mxCell>
<mxCell id="11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="3" target="4"><mxGeometry relative="1" as="geometry"/></mxCell>
<mxCell id="12" value="No" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#b85450;strokeWidth=2;fontSize=11;" edge="1" parent="1" source="4" target="5"><mxGeometry relative="1" as="geometry"/></mxCell>
<mxCell id="13" value="Yes" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#82b366;strokeWidth=2;fontSize=11;" edge="1" parent="1" source="4" target="6"><mxGeometry relative="1" as="geometry"/></mxCell>
<mxCell id="14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="6" target="7"><mxGeometry relative="1" as="geometry"/></mxCell>
<mxCell id="15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="7" target="8"><mxGeometry relative="1" as="geometry"/></mxCell>
<mxCell id="16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#b85450;strokeWidth=2;" edge="1" parent="1" source="5" target="8"><mxGeometry relative="1" as="geometry"/></mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
```
### 示例 2：三层逻辑架构
**请求：** "为包含表现层、业务逻辑层和数据层的 Web 应用创建一个逻辑架构图。"
```xml
<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
<diagram id="three-tier-1" name="Three-Tier Architecture">
<mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
<root>
<mxCell id="0"/><mxCell id="1" parent="0"/>
<mxCell id="2" value="User" style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffe0b2;strokeColor=#f57c00;fontSize=12;" vertex="1" parent="1"><mxGeometry x="40" y="340" width="60" height="40" as="geometry"/></mxCell>
<mxCell id="3" value="Presentation Layer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="160" y="40" width="300" height="180" as="geometry"/></mxCell>
<mxCell id="4" value="Web&#xa;Browser" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="3"><mxGeometry x="20" y="30" width="80" height="50" as="geometry"/></mxCell>
<mxCell id="5" value="Mobile&#xa;App" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="3"><mxGeometry x="120" y="30" width="80" height="50" as="geometry"/></mxCell>
<mxCell id="7" value="Application Layer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="160" y="260" width="300" height="180" as="geometry"/></mxCell>
<mxCell id="8" value="API&#xa;Gateway" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;" vertex="1" parent="7"><mxGeometry x="20" y="30" width="80" height="50" as="geometry"/></mxCell>
<mxCell id="9" value="Business&#xa;Logic" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="7"><mxGeometry x="110" y="30" width="80" height="50" as="geometry"/></mxCell>
<mxCell id="11" value="Data Layer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="160" y="480" width="300" height="180" as="geometry"/></mxCell>
<mxCell id="12" value="Primary&#xa;Database" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#e1f5fe;strokeColor=#0277bd;fontSize=12;" vertex="1" parent="11"><mxGeometry x="20" y="30" width="60" height="80" as="geometry"/></mxCell>
<mxCell id="13" value="Cache" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#fff3e0;strokeColor=#e65100;fontSize=12;" vertex="1" parent="11"><mxGeometry x="100" y="30" width="60" height="80" as="geometry"/></mxCell>
<mxCell id="20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="2" target="4"><mxGeometry relative="1" as="geometry"/></mxCell>
<mxCell id="21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="4" target="8"><mxGeometry relative="1" as="geometry"/></mxCell>
<mxCell id="22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="8" target="9"><mxGeometry relative="1" as="geometry"/></mxCell>
<mxCell id="23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="9" target="12"><mxGeometry relative="1" as="geometry"/></mxCell>
<mxCell id="24" value="query" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=open;endFill=0;strokeColor=#666666;strokeWidth=1;fontSize=10;dashed=1;" edge="1" parent="1" source="9" target="13"><mxGeometry relative="1" as="geometry"/></mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
```
更多模板（微服务架构、事件驱动、决策树、序列图、DFD），请参见 [diagram-templates.md](references/diagram-templates.md)。
## 约束与警告
### 关键约束
1. **XML 有效性**：始终正确闭合标签并转义特殊字符
2. **唯一 ID**：所有单元格 ID 必须唯一（父单元格 "0" 和 "1" 除外）
3. **有效引用**：Source/target 必须引用已存在的单元格 ID
4. **正坐标**：所有 x、y 值必须 >= 0
### 警告
- XML 文件必须格式良好，否则无法在 draw.io 中打开
- 无效的父引用会导致元素消失
- 负坐标会将元素置于可见画布之外
## 最佳实践
1. 在所有图表中对同一元素类型使用一致的颜色
2. 保持箭头直线，尽量少用折弯
3. 标签距离箭头线至少 20px
4. 将相关元素分组到容器中
5. 标签使用 12-14px 字体，注释使用 10-11px 字体
6. 所有坐标与网格对齐（10 的倍数）
7. 使用高对比度颜色，不要仅依靠颜色传达含义
在新工单中引用 查看 Git Blame 复制永久链接