mirrors / skillhub-085-drawio-logical-diagrams

项目文件夹

文件

T

wehub-skill-sync 105cbd62af chore: import zh skill drawio-logical-diagrams

2026-07-13 21:36:15 +08:00

15 KiB

原始文件 永久链接 Blame 文件历史

name, description, allowed-tools

name	description	allowed-tools
drawio-logical-diagrams	创建专业的逻辑流程图和逻辑系统架构图，使用 draw.io XML 格式（.drawio 文件）。适用于创建：（1）显示系统组件间数据/流程流转的逻辑流程图，（2）不涉及云厂商具体信息的逻辑架构图，（3）BPMN 流程图，（4）UML 图（类图、序列图、活动图），（5）数据流图（DFD），（6）决策流程图，或（7）系统交互图。该技能侧重于通用/抽象表示，而非 AWS/Azure 特定架构（云架构图请使用 aws-drawio-architecture-diagrams）。	Read, Write, Bash

Draw.io 逻辑图创建

概述

使用 draw.io 原生 XML 格式创建专业逻辑图，包括逻辑流程图、系统架构可视化以及抽象过程表示，采用通用形状和符号。

何时使用

创建显示系统组件间数据流转的逻辑流程图
设计逻辑架构图（抽象系统结构）
构建业务流程的 BPMN 流程图
绘制 UML 图（类图、序列图、活动图、状态图）
创建系统分析用的数据流图（DFD）
制作含分支逻辑的决策流程图
可视化系统交互和时序
记录不含云特定信息的逻辑系统设计

请勿用于： AWS/Azure/GCP 架构图（请使用 aws-drawio-architecture-diagrams）。

操作说明

创建逻辑图

分析需求：理解要绘制图表所描述的系统/流程
选择图表类型：流程图、架构图、BPMN、UML、DFD 等
识别元素：确定参与者、流程、数据存储、连接器
起草 XML 结构：创建包含正确根单元格的 mxGraphModel
添加形状：创建带有合适样式的 mxCell 元素
添加连接线：通过边元素连接各元素
验证 XML：检查 XML 格式是否正确，所有 ID 是否唯一（见下方验证清单）
输出：为用户写入 .drawio 文件

XML 验证清单

在输出文件前，请验证：

所有标签均已正确闭合（没有未闭合的 <mxCell>、</mxGeometry> 等）
所有单元格 ID 唯一（0 和 1 为保留根单元格，请从 2 开始使用连续整数）
所有 source 和 target 属性引用了已存在的单元格 ID
所有 parent 属性引用了已存在的单元格 ID
所有坐标（x, y, width, height）均为正数
特殊字符已转义（< → <，> → >，& → &）
多行标签使用 
 或在样式中使用 html=1 配合 <br>

关键 XML 组件

组件	说明
`mxfile`	根元素，包含 host 和 version
`diagram`	包含图表定义
`mxGraphModel`	画布设置（网格、页面尺寸）
`root`	所有单元格的容器（必须包含 id="0" 和 id="1"）
`mxCell`	单个形状（顶点）或连接线（边）

Draw.io 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 — 完整形状示例和样式参考
diagram-templates.md — 可直接使用的模板

示例

示例 1：订单处理流程

请求： "创建一个显示订单处理的逻辑流程图：客户提交订单，系统验证，若验证通过则处理支付并发货，若验证不通过则通知客户。"

<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 应用创建一个逻辑架构图。"

<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。

约束与警告

关键约束

XML 有效性：始终正确闭合标签并转义特殊字符
唯一 ID：所有单元格 ID 必须唯一（父单元格 "0" 和 "1" 除外）
有效引用：Source/target 必须引用已存在的单元格 ID
正坐标：所有 x、y 值必须 >= 0

警告

XML 文件必须格式良好，否则无法在 draw.io 中打开
无效的父引用会导致元素消失
负坐标会将元素置于可见画布之外

最佳实践

在所有图表中对同一元素类型使用一致的颜色
保持箭头直线，尽量少用折弯
标签距离箭头线至少 20px
将相关元素分组到容器中
标签使用 12-14px 字体，注释使用 10-11px 字体
所有坐标与网格对齐（10 的倍数）
使用高对比度颜色，不要仅依靠颜色传达含义

15 KiB 原始文件 永久链接 Blame 文件历史 Unescape Escape