mcpField
D
drawio-logical-diagrams

drawio-logical-diagrams

github.com/giuseppe-trisciuoglio文档处理3654.0k 次安装7 周前更新
代码仓库

关于 drawio-logical-diagrams

为需要绘制逻辑流程和系统结构图的用户提供 draw.io 原生 XML 生成指导，涵盖多种通用图表类型及 XML 校验。

主要功能

  1. 01生成 draw.io 原生 XML
  2. 02支持流程图、架构图、BPMN、UML 和 DFD
  3. 03包含通用形状与配色规范
  4. 04检查 XML 标签、ID 和引用
  5. 05提供图表模板与样式参考

适用场景

  1. 01绘制系统组件间的数据流
  2. 02表达业务流程与决策分支
  3. 03记录不涉及云平台细节的系统设计

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams

安装后在 Claude Code 中输入/drawio-logical-diagrams确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
color-palette.md
constraints-warnings.md
diagram-templates.md
diagram-types-detailed.md
layout-best-practices.md
shape-examples.md
shape-styles.md

详细介绍

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 是保留的根单元格 ID，请从 2 开始使用连续整数）
  • 所有 source 和 target 属性均引用现有单元格 ID
  • 所有 parent 属性均引用现有单元格 ID
  • 所有坐标（x、y、宽度、高度）均为正数
  • 特殊字符均已转义（< → &lt;、> → &gt;、& → &amp;）
  • 多行标签使用 &#xa;，或在样式中设置 html=1 后使用 <br>
关键 XML 组件
组件说明
mxfile包含主机和版本信息的根元素
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" 是保留的根单元格 ID
  • 使用从 "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正方形（实体）、圆形（流程）、开放矩形（数据存储）

参考文件

如需查看详细的形状示例和样式参考，请参阅：

示例

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

约束和警告

关键约束
  1. XML 有效性：始终正确闭合标签并转义特殊字符
  2. 唯一 ID：所有单元格 ID 必须唯一（父级“0”和“1”除外）
  3. 有效引用：源/目标必须引用现有单元格 ID
  4. 正坐标：所有 x、y 值必须 >= 0
警告
  • XML 文件必须格式正确，否则将无法在 draw.io 中打开
  • 无效的父级引用会导致元素消失
  • 负坐标会将元素放置在可视画布之外

最佳实践

  1. 在所有图表中，为每种元素类型使用一致的颜色
  2. 让箭头保持笔直，尽量减少弯折
  3. 标签与箭头线至少保持 20px 的距离
  4. 将相关元素分组放入容器
  5. 标签使用 12-14px 字体，注释使用 10-11px 字体
  6. 将所有坐标对齐到网格（10 的倍数）
  7. 使用高对比度颜色，且不要仅依赖颜色传达含义

评论

支持 Markdown