让 Codex 学会画图：Codex 结合 Draw.io 的 Skill 推荐与实战指南

在软件开发、科研汇报和论文写作中，我们经常需要绘制流程图、系统架构图、UML 图、数据处理流程图以及深度学习模型结构图。

传统做法是在 Draw.io 中手动拖动图形、调整模块位置、修改文字和处理交叉连线。当图中模块比较多时，仅仅完成对齐和排版就可能消耗大量时间。

如果将 Codex 与 Draw.io 结合起来，我们便可以直接使用自然语言描述图表内容，让 Codex 生成可编辑的 .drawio 文件，再在 VS Code 或 Draw.io Desktop 中进行修改和导出。

不过，想让 Codex 真正画出规范、整洁且可以继续编辑的 Draw.io 图表，通常还需要配合专门的 Draw.io Skill。

一、为什么需要 Draw.io Skill

Codex 本身可以生成 XML，但标准的 Draw.io 文件并不是一段随意拼接的 XML，而是使用 mxGraph 数据结构，需要正确处理：

• 节点、连线和父子容器关系；

• 图形坐标、宽度和高度；

• 箭头方向、折线方式和连接端点；

• Draw.io 内置图形库的样式字符串；

• 页面大小、背景、网格和缩放比例；

• 多页面图表；

• 可编辑的 SVG、PNG 和 PDF 导出。

如果只是临时让 Codex 生成一份 Draw.io XML，常见问题包括：

• 节点互相重叠；

• 箭头穿过模块；

• 文字被截断；

• 连线大量交叉；

• 页面留白过大；

• 图表虽然能打开，但很难继续修改。

Skill 的作用，就是把成熟的绘图流程、布局规则、输出要求和检查方法封装起来。

根据 OpenAI Skills 官方文档，一个 Skill 可以包含操作说明、脚本、参考资料、模板和其他资源。Codex 可以根据任务自动调用相应 Skill，也可以通过 $skill-name 显式调用。

因此，Draw.io Skill 的真正价值不是简单地让 Codex“能够画图”，而是让它按照稳定、可复现的流程生成、检查和导出 Draw.io 图表。

二、Skill、MCP 和 VS Code 扩展有什么区别

很多教程会把 Skill、MCP Server 和 Draw.io 扩展混在一起，实际上它们承担的是不同工作。

它们之间的基本工作流程是：

自然语言需求
↓
Codex 理解图表内容
↓
Draw.io Skill 规定绘图方法
↓
生成或修改 mxGraph XML
↓
保存为可编辑的 .drawio 文件
↓
VS Code 扩展或 Draw.io Desktop 预览
↓
导出 SVG、PNG 或 PDF

也就是说，仅安装 VS Code 的 Draw.io 扩展，并不会自动让 Codex 掌握专业绘图规范；只安装 Draw.io Skill，也不一定能够获得方便的图形化预览和导出功能。

真正实用的方案通常是“一个主绘图 Skill + 一个图形化编辑器”。

三、值得推荐的 Draw.io Skill

1. jgraph/drawio-mcp：优先推荐的官方方案

jgraph/drawio-mcp 是 Draw.io 官方团队维护的项目，同时提供 MCP、Skill 和面向 Codex CLI 的插件方案。

它支持：

• 通过 XML、CSV 或 Mermaid 创建图表；

• 搜索 Draw.io 图形库中的形状；

• 将生成结果直接打开到 Draw.io 编辑器；

• 生成原生、可编辑的 .drawio 文件；

• 使用 ELK 对节点进行自动布局；

• 使用 libavoid 对连接线进行避障处理；

• 导出带有嵌入式 Draw.io XML 的 PNG、SVG 或 PDF；

• 保留本地 .drawio 源文件，方便后续修改。

这套方案的优势是来源可靠、功能边界清晰，而且可以在本地生成和导出图表。

如果只准备安装一个通用 Draw.io 方案，优先推荐它。

2. Agents365 drawio-skill：适合复杂架构和科研绘图

Agents365-ai/drawio-skill 更像一套完整的专业绘图工具箱。

除了普通流程图和 UML 图，它还专门支持：

• 深度学习模型结构图；

• C4 软件架构图；

• BPMN 业务流程图；

• SysML 系统建模图；

• 网络拓扑图；

• 跨职能泳道图；

• ER 数据库关系图。

它还可以分析现有项目并生成图表，例如：

• 将 Python、JavaScript、TypeScript、Go、Rust 项目结构转换为图表；

• 从 Terraform、Kubernetes、Docker Compose 中提取基础设施关系；

• 将 SQL DDL 转换为 ER 图；

• 生成确定性较强的时序图和多页面 C4 图；

• 搜索云平台、网络设备及 AI/LLM 图标；

• 自动检查节点重叠、文字截断和连线堆叠；

• 根据已有 .drawio 文件复用视觉风格。

它比较适合复杂系统架构、深度学习模型结构和论文级插图。

缺点是功能较重，包含的脚本、资源和绘图规则比较多，安装和理解成本高于轻量方案。

3. GitHub draw-io-diagram-generator：轻量、清晰、容易入门

GitHub awesome-copilot 中的 draw-io-diagram-generator 是一套相对轻量的 Draw.io Skill。

它主要支持：

• 普通流程图；

• 系统架构图；

• 时序图；

• ER 图；

• UML 类图；

• 网络拓扑图；

• BPMN 流程图；

• 思维导图。

它提供了基本的 Draw.io XML 结构、模板和验证方法，生成的文件可以直接使用 VS Code Draw.io 扩展打开。

如果只是想快速生成技术流程图、数据库关系图或简单系统架构图，这套方案已经足够，而且更容易理解和修改。

4. Sunwood draw-io-skill：质量检查能力比较突出

Sunwood-ai-labs/draw-io-skill 的主要特点不是支持最多的图表类型，而是提供了比较系统的布局和 SVG 检查工具。

它可以检查：

• 箭头或连线是否穿过模块；

• 连线与标签是否发生碰撞；

• 文字是否超出节点范围；

• 文字和背景颜色对比是否不足；

• 标题和正文是否缺少视觉层级；

• 边框、容器和图形之间是否出现异常重叠。

如果图表需要插入论文、正式技术文档或项目汇报，这些检查会很有价值。

不过，它与其他 Draw.io Skill 的触发范围存在一定重叠，更适合将其中的质量检查思路作为补充，而不是同时启用多个主绘图 Skill。

四、应该选择哪一套

可以根据实际需求进行选择：

不建议同时安装三四套功能高度重叠的 Draw.io Skill。

一方面，它们可能使用相同或相近的 Skill 名称；另一方面，它们的布局规则、配色规范和输出流程可能不同，容易导致 Codex 在执行任务时选择错误的 Skill。

对于 Windows + VS Code 用户，我比较推荐下面这套组合：

主绘图 Skill：
jgraph/drawio-mcp 或 Agents365 drawio-skill

预览和手动编辑：
hediet.vscode-drawio

本地打开和导出：
Draw.io Desktop

源文件：
.drawio

发布文件：
SVG、PNG 或 PDF

如果主要画软件流程图、系统架构图，选择官方 jgraph/drawio-mcp。

如果主要画 MAF-UNet、注意力模块、多源融合结构等科研模型图，选择 Agents365 drawio-skill 会更合适。

五、Windows 和 VS Code 环境配置

1. 安装 Draw.io Desktop

可以从 Draw.io Desktop 官方发布页面 下载 Windows 安装包。

Draw.io Desktop 主要用于：

• 打开和编辑 .drawio 文件；

• 将图表导出为 PNG、SVG 或 PDF；

• 使用本地自动布局；

• 对连接线进行避障处理；

• 在没有网络的情况下编辑图表；

• 对最终结果进行人工检查。

如果只生成 .drawio 文件或者使用浏览器 URL，Desktop 不一定是必需的；但如果需要导出论文插图，建议安装。

2. 安装 VS Code Draw.io 扩展

推荐使用 hediet/vscode-drawio，扩展标识为：

hediet.vscode-drawio

它可以在 VS Code 中直接打开和编辑：

.drawio
.dio
.drawio.svg
.drawio.png

其中，.drawio.svg 和 .drawio.png 既可以作为图片使用，也可以保存嵌入式 Draw.io 数据。

不过，如果图表需要长期维护或上传到 Git 仓库，仍然建议将普通 .drawio 文件作为源文件。

3. 在 Codex CLI 中安装官方 Draw.io 插件

按照 Draw.io 官方项目给出的方式，可以在 Codex CLI 中执行：

codex plugin marketplace add jgraph/drawio-mcp
codex plugin add drawio@drawio

安装后，可以让 Codex 生成 .drawio 文件，也可以指定导出 PNG、SVG、PDF 或浏览器 URL。

如果使用本地图片导出和自动布局，建议同时安装 Draw.io Desktop。

4. 使用项目级独立 Skill

OpenAI 官方文档说明，Codex 可以从项目中的 .agents/skills 目录读取独立 Skill。

目录结构可以设置为：

project-root/
└── .agents/
└── skills/
└── drawio/
├── SKILL.md
├── scripts/
├── references/
└── assets/

其中 SKILL.md 是必需文件，其他目录是否存在取决于 Skill 的具体结构。

如果第三方 Skill 包含脚本、模板和资源文件，不能只复制 SKILL.md，而要保留完整目录，否则一些自动布局、图标搜索和导出功能可能无法运行。

安装后，可以在 Codex 中显式调用：

$drawio 绘制一个用户登录流程图，并保存为 login.drawio。

六、如何写出有效的 Draw.io 绘图提示词

使用 Draw.io Skill 时，最常见的问题是只说一句：

帮我画得高级一点。

这种要求缺少结构、关系、布局和验收标准，Codex 只能自行猜测，最终结果很容易与预期不一致。

一条完整的绘图提示词，至少应包含七类信息：

通用系统架构图提示词

$drawio 根据以下内容绘制一张系统架构图。

核心模块：
前端、API 网关、用户服务、任务服务、数据库和对象存储。

数据关系：
前端访问 API 网关；
API 网关调用用户服务和任务服务；
用户服务访问用户数据库；
任务服务访问任务数据库和对象存储。

绘图要求：
1. 使用从左到右的四层结构；
2. 同一层模块水平对齐；
3. 使用直角连接线并避开所有节点；
4. 服务、数据库和存储使用不同颜色；
5. 文字使用中文；
6. 输出 architecture.drawio 和高清 SVG；
7. 最终检查连线交叉、文字溢出和页面留白。

MAF-UNet 论文模型图提示词

$drawio 为 MAF-UNet 绘制一张可以用于论文的横向模型结构图。

内容要求：
1. 左侧分别输入 Sentinel-1 SAR 影像 X_sar
和 Sentinel-2 光学影像 X_opt；
2. 展示两条独立的浅层特征提取分支；
3. 在双源特征汇合位置标出 MSF 多源协同融合模块；
4. 展示 U-Net 编码器、瓶颈层、解码器和跳跃连接；
5. 在关键特征增强位置标出 SCA 空间—通道注意力模块；
6. 右侧输出红树林二分类分割结果。

视觉要求：
1. 采用蓝紫色学术风格；
2. SAR、光学和融合特征使用三种可区分的颜色；
3. 编码器和解码器保持左右对称；
4. 卷积模块尺寸随特征分辨率变化；
5. 使用直角连线，任何连线不得穿过模块或文字；
6. 不使用“4通道”和“6通道”等旧命名；
7. 输出 maf_unet.drawio、maf_unet.svg 和高清 PNG；
8. 保留全部图形和文字可编辑。

这样的提示词同时规定了图中内容、空间布局、视觉风格和验收要求，比单纯要求“画一个 MAF-UNet 结构图”可靠得多。

七、常见问题与解决方法

1. .drawio 可以打开，但布局很乱

这通常不是 XML 格式错误，而是缺少明确的布局约束。

可以在提示词中增加：

使用分层布局；
模块按照 10 像素网格对齐；
同层节点保持等间距；
导出前执行一次自动布局；
不得出现节点重叠。

如果使用官方方案，还可以尝试 ELK 自动布局。

2. 箭头穿过模块

应明确要求：

所有连接线使用直角折线；
连接线必须避开节点和文字；
不得穿过模块内部；
优先从模块左右两侧连接。

如果已经确定了节点位置，可以使用 libavoid 重新规划连接线，而不改变整体布局。

3. 中文文字显示异常

尽量使用常见中文字体，例如：

• 微软雅黑；

• 思源黑体；

• 系统默认无衬线字体。

不要过度依赖只在某台电脑上安装的特殊字体。图表完成后，应在另一台设备或导出文件中检查一次中文显示效果。

4. 导出的 PNG 不清晰

不要将低分辨率 PNG 作为唯一成果。

更合理的方式是：

.drawio：可编辑源文件
.svg：优先用于论文和技术文档
.png：用于兼容性较好的普通插图
.pdf：用于正式汇报或打印

如果 Word 或 WPS 对 SVG 的兼容性不理想，可以导出两倍或三倍尺寸的 PNG。

5. 修改几轮以后图表越来越乱

每一轮只处理一类问题。

例如：

不要在同一条指令中同时要求更换布局、增加模块、修改全部文字并重新配色。

6. 安装多个 Skill 后不知道调用了哪个

可以使用 $skill-name 显式调用，并只保留一个主 Draw.io Skill。

其他第三方 Skill 可以作为模板和检查规则的参考，但不必全部长期启用。

八、一套推荐的实际工作流

对于科研论文、课程报告和项目文档，可以采用下面的流程：

这套工作流的关键是：把 .drawio 当作源文件，把 PNG、SVG 和 PDF 当作发布文件。

只要源文件还在，后续修改模块名称、增加网络分支、调整配色或重新导出图片，都不需要从头绘制。

九、总结

Codex 与 Draw.io 的结合，本质上是将自然语言理解、项目分析、XML 生成、图形编辑和质量检查串成一条完整工作流。

如果追求稳定和通用性，优先选择 Draw.io 官方的 jgraph/drawio-mcp。

如果经常绘制深度学习模型、复杂系统架构和论文插图，可以选择 Agents365 drawio-skill。

如果只需要普通流程图、UML 图和 ER 图，可以选择更轻量的 draw-io-diagram-generator。

如果重点关注正式文档中的视觉质量，可以参考 Sunwood 方案中的布局和 SVG 检查规则。

对于大多数 Windows + VS Code 用户，一套足够实用的组合是：

一个主 Draw.io Skill
+ hediet.vscode-drawio
+ Draw.io Desktop
+ 明确、可验收的绘图提示词

当绘图要求被整理成可复用的 Skill 后，Codex 不再只是临时生成一张图，而是能够持续维护可编辑、可检查、可迭代的技术图表。

这才是 Codex 与 Draw.io 结合最有价值的地方。