draw-io-diagram-generator作者 GitHub

Draw.io Diagram Generator Skill.

Claude Code 和 Codex 的图表 skill：创建和编辑 draw.io 图表文件（.drawio、.drawio.svg、.drawio.png）。

Diagrams & Data Visualization
Diagram

github/awesome-copilot · skills/draw-io-diagram-generator/SKILL.mdSKILL.md

--- name: draw-io-diagram-generator description: Use when creating, editing, or generating draw.io diagram files (.drawio, .drawio.svg, .drawio.png). Covers mxGraph XML authoring, shape libraries, style strings, flowcharts, system architecture, sequence diagrams, ER diagrams, UML class diagrams, network topology, layout strategy, the hediet.vscode-drawio VS Code extension, and the full agent workflow from request to a ready-to-open file. --- ## 1. When to Use This Skill ## 2. Prerequisites ## 3. Step-by-Step Agent Workflow ## 4. Diagram-Type Recipes ## 5. Multi-Page Diagrams ## 6. Editing Existing Diagrams

从 2026-09-14 的上游文件读取的前言和章节标题 · 完整 19,536 字符

01 功能说明

draw-io-diagram-generator Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

这是一个用于创建、编辑和验证 draw.io 图表文件（.drawio、.drawio.svg、.drawio.png）的 skill，通过生成正确的 mxGraph XML 来实现。它通过 assets/templates/ 中的模板处理流程图、系统架构图、序列图、ER 图和 UML 类图，而网络拓扑图、BPMN 和思维导图则回退到形状库或手动处理。

该 Agent 获得一个六步工作流、一套带现成样式字符串的语义化配色方案、一份交付前验证清单，以及可选的 Python 脚本（validate-drawio.py、add-shape.py）。它面向在代码所在仓库中处理图表的 Agent，生成的文件旨在可直接在 hediet.vscode-drawio VS Code 扩展中打开。

它产出什么

drawio 文件本身，写入你所要求的路径。
一句话概括图表所展示的内容。
验证状态，说明验证脚本是否已运行并通过。
当你可能需要自定义图表时的编辑说明：点击形状进行选中，双击编辑标签，拖动以重新定位。

查看示例提示词 ↗

工作方式

01
明确请求内容
工作流首先要确定图表类型、实体或参与者、关系、输出路径，以及该文件是新建还是编辑。
02
复用模板或最简骨架
当图表类型与 assets/templates/ 下的某个模板匹配时，复制该结构并替换占位值；对于新颖的布局，则从包含两个根单元的最简合法 mxfile 骨架开始构建。
03
在编写 XML 之前先规划布局
先勾画行或层级，再在网格上给形状留出间距——同一行的形状之间水平间隔 40-60px，层级行之间间隔 80-120px，画布默认使用 A4 横向、尺寸为 1169 x 827 px。
04
生成 mxGraph XML
编写顶点和边单元时使用唯一的 id 并保持父引用一致，同时对标签中的 XML 特殊字符进行转义，以确保文件格式正确。
05
应用调色板中的样式
样式字符串来自固定的语义调色板——primary/info 为 #dae8fc 配 #6c8ebf，warning/decision 为 #fff2cc 配 #d6b656，error/end 为 #f8cecc 配 #b85450——因此同一用途在整个项目中保持相同的颜色。
06
保存、验证、交付
将文件写入请求的路径，扩展名为 .drawio，可选运行验证器，然后告知用户如何打开文件并总结图表内容。

02 找到适合场景

何时使用 draw-io-diagram-generator Skill

当任务是此类图表和图形时，在 Claude Code 或 Codex 中使用 draw-io-diagram-generator skill。适用范围和限制来自该 skill 自己的文件。

适合场景

请求是生成或修改 .drawio、.drawio.svg 或 .drawio.png 文件。
你需要一个能在 draw.io VS Code 扩展中立即打开、无需手动修复的文件。
有人要求添加一个 .drawio 文件、更新现有图表或将某个流程可视化。
该系统足够复杂，值得在同一文件中占用多个页面。
你需要在现有文件中插入一个形状，而不必手动编辑原始 XML。

了解边界

网络拓扑图和 BPMN 图没有内置模板——文件转而指向路由器、服务器、防火墙和子网的形状库。
思维导图被列为手动工作：一个中心主题向外辐射分支，没有可复制的模板。
如果一个图表的 mxGraphModel 是 base64 编码的，它会显示为压缩状态，无法按原样处理；必须从 draw.io 网页应用重新导出为未压缩的 XML。

需要提供的信息

图表类型说明所需图表的种类——流程图、架构图、UML、ER 图、序列图、网络图——或让 skill 根据上下文自行推断。
实体、参与者、类或表说明图表应包含的主要组成部分，因为这些会成为顶点单元。
关系、方向和基数描述各组成部分如何连接、连接方向以及基数关系，以便正确选择边的样式和鱼尾箭头（crow's foot）。
输出路径说明 .drawio 文件应保存的位置；图表应放在它所记录的代码附近。
文件是否已存在新建和编辑现有文件是两条不同的路径——编辑操作首先要读取当前的单元、位置和层级结构。

03 Skill 内部

draw-io-diagram-generator Skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

根单元 0 和 1 不可协商
Id 0 和 1 始终是必需的，且必须是图表中的前两个单元，绝不能被挪用于其他用途。
每个单元一个唯一 Id
每个 cell id 在文件内必须全局唯一，因此添加到现有图表中的新形状不得与已在使用的 id 冲突。
每个顶点都携带几何信息
顶点 cell 若没有携带 x、y、width、height 且 as="geometry" 的子元素 mxGeometry，则是无效的。
边要绑定到真实的 Id
边需要 source 和 target 属性，分别匹配已存在的顶点 id。
HTML 标签需 Html=1
任何包含 HTML 标签（b、i、br）的标签文本，都需要在 cell 样式中设置 html=1，否则这些标签会在图表上以转义形式显示。
对齐到 10px 网格
所有坐标都应能被 10 整除，以确保形状整齐对齐。
每一页都要有标题
每一页在顶部都要有一个标题文本 cell，使用 text 样式，fontSize=18，fontStyle=1 表示加粗。
文件名使用 kebab-case
图表文件遵循 kebab-case 命名方式，例如 order-service-flow.drawio 或 database-schema.drawio，并与其所记录的代码一起存放在 docs/ 或 architecture/ 目录中。

04 投入使用

在 Claude Code 或 Codex 中安装 draw-io-diagram-generator

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 draw-io-diagram-generator 添加到 Claude Code、Codex 或您的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

Terminal

npx skills add https://github.com/github/awesome-copilot --skill draw-io-diagram-generator

针对 skills/draw-io-diagram-generator/SKILL.md 的通用 skills CLI 形式；该仓库可能会自行说明其路径。

给 Skill 分配第一个图表和图示任务

按 skill 自身的术语撰写；把括号中的部分换成你的内容。

Starter prompt

Create a .drawio sequence diagram for [the checkout flow]. [Client] should send a synchronous POST /orders message to [API Server], which returns 201 Created — include the lifelines and activation boxes. Save it to [docs/checkout-flow.drawio] with a title cell at the top of the page.

来源：依据 SKILL.md，按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果：

文件以 mxfile 根元素开始。
每个图表内的所有 cell id 值都是唯一的。
每个顶点 cell 都设置了 vertex="1"，并有一个 as="geometry" 的子元素 mxGeometry。
除 id=0 之外的每个 cell，其 parent 都指向一个已存在的 id。
该 XML 格式良好——没有未闭合的标签，属性值中也没有未转义的 & 符号或尖括号。
对完成的文件运行自动化校验器。

在 OpenDesign 中通过其 SKILL.md 链接导入 draw-io-diagram-generator：Plugins → Add → Skill → Import from link，然后在顶部栏中选择它。

下载 OpenDesign 阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author: GitHub
Repository: github.com/github/awesome-copilot 分支 main
Skill 文件: skills/draw-io-diagram-generator/SKILL.md 验证时记录的内容校验和；提交 1899b18
License: MIT 来自 LICENSE。
仓库星标数: 38,981 GitHub 快照拍摄于 2026-09-14，针对整个 github/awesome-copilot 仓库，其中包含本目录中的 6 个 skill。不是 draw-io-diagram-generator 的评分或使用计数。
已由 OpenDesign 验证: 2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序（检查日期 2026-08-28）；本页面未记录实际运行。

SKILL.md 内部

1. 何时使用此 Skill用于加载它的触发短语，以及一张列出八种图表类型及其模板的表格。
2. 前置条件安装 hediet.vscode-drawio、受支持的扩展，脚本运行可选安装 Python 3.8+。
3. 分步 Agent 工作流六个有序步骤：理解、选择模板、规划布局、生成 XML、设置样式、校验。
4. 图表类型方案用于流程图、架构图、序列图、ER 图和 UML 类图的 XML 片段和样式字符串。
5. 多页图表一个 mxfile 中包含多个图表元素；每页都有自己独立的单元格 id 命名空间。
6. 编辑现有图表先读取，找到对应页面，分配不冲突的 id，遵守容器约束，验证连线。
7. 最佳实践网格对齐、简洁标签、配色一致性、页面尺寸、kebab-case 命名与布局。

Skill 自身的描述

「当创建、编辑或生成 draw.io 图表文件（.drawio、.drawio.svg、.drawio.png）时使用。涵盖 mxGraph XML 编写、形状库、样式字符串、流程图、系统架构、序列图、ER 图、UML 类图、网络拓扑、布局策略、hediet.vscode-drawio VS Code 扩展，以及从请求到可直接打开文件的完整 agent 工作流。」

SKILL.md 的 front-matter 描述。完整文件约 19,536 字符。在 GitHub 上阅读完整文件。

Draw.io Diagram Generator

在真实图表和图形任务上运行 draw-io-diagram-generator。

下载 OpenDesign，从其 SKILL.md 链接导入 draw-io-diagram-generator，粘贴上方提示，并在结果前阅读计划。

下载 OpenDesign 浏览所有 skills

终端

npx skills add https://github.com/github/awesome-copilot --skill draw-io-diagram-generator

draw-io-diagram-generator Skill 在 Claude Code 和 Codex 中的作用

以 skill 自身的术语

工作方式

何时使用 draw-io-diagram-generator Skill

适合场景

了解边界

需要提供的信息

draw-io-diagram-generator Skill 赋予 Claude Code 和 Codex 的规则

根单元 0 和 1 不可协商

每个单元一个唯一 Id

每个顶点都携带几何信息

边要绑定到真实的 Id

HTML 标签需 Html=1

对齐到 10px 网格

每一页都要有标题

文件名使用 kebab-case