Excalidraw Diagram：把流程说明变成能继续改的手绘图

拿一件日常的事举例：小区活动室预约，先提交申请，再看时段有没有空，有空就确认，没空就改时间重新查。把这段关系画出来，就能沿箭头查看不同分支。excalidraw-diagram 负责从文字到初稿这一段：你提供自然说明、步骤清单、论文大纲或代码结构，智能体从中整理出节点列表和有方向的关系，排一版合理的初始布局，输出可在 Excalidraw 中直接打开的手绘图文件，同时给一两段说明，讲这张图分几层、每条连线是什么意思。文件本体是 JSON 格式的 Excalidraw 原生数据，那是给编辑器读的，你不需要学着看源码。

它覆盖四类图：

• 系统架构图：用户、前端、后端服务、数据库、外部系统这类分层结构；
• 业务流程图 / 近似时序图：按步骤或事件顺序排列，可以自上而下，也可以自左向右；
• 数据结构 / 模块依赖图：实体之间谁关联谁、谁依赖谁；
• 自由白板草图：论文结构、研究框架、任务分解这类发散式的可视化。

手绘风的外观让它适合白板讨论、给非技术同事看的流程说明这类场合。要不要选它，主要看你想在哪接手这张图：

• 想把文件交到 Excalidraw 的图形界面里继续拖动和修改，选本项，它的输出就是 Excalidraw 原生格式，这是它最直接的交接价值；
• 已经在用 Draw.io，或者需要“照一张参考图的风格画新图”，同一个仓库还有 drawio-diagram 单项，输出 .drawio 文件并支持风格迁移；
• 要做 SVG 图解、信息图，可以看本站的 Baoyu 技能导读。

下面是仓库自带的官方样例，主题是 Transformer 技术模型的结构。你不需要懂这个模型，先沿下面的文字主线看它从左到右的布局。

词元序列（Token 序列）→ 嵌入＋位置编码 → 编码器（Encoder Stack，N 层）→ 解码器（Decoder Stack，N 层）→ 线性＋Softmax 输出。四根箭头都朝右，依次连接这五个主要节点。以后检查自己的业务图时，也可以先沿主线核对谁连向谁。

这块预览用的是仓库里的完整官方截图，可以放大到原尺寸细看；旁边能下载原生 .excalidraw 文件和对应的 Apache-2.0 许可与来源说明。GitHub 上的原始出处集中列在文末来源章。

这些文件由仓库提供。本站核对了来源和文件格式，尚未安装这个 Skill、生成业务图，或在编辑器里打开、编辑、保存它。

这份样例的箭头端点没有绑定到图形上。挪动框后，需要重新检查箭头是否仍指向目标；本页未验证它在编辑器中的具体行为。

这个 Skill 装进智能体工具的技能目录，Excalidraw 编辑器那边不需要装任何东西。仓库 README 写明它可安装到 Cursor、Claude Code、Codex、OpenClaw 等智能体工具。下面从“已在 Codex 打开本地项目文件夹”起步。还没准备好的，先按官方 Codex 快速开始完成设置、登录并打开文件夹。第一次接触 Skill，也可以先看本站的 Skill 概念页。

准备两处位置：

• 本次画图的工作文件夹：在 Codex 里打开它。需求可以之后直接写在对话里；如果已经整理好节点和关系清单，把它存成文件放进这个文件夹，并记住文件名。
• 浏览器里的 Excalidraw 编辑器：excalidraw.com。智能体负责生成文件，编辑器负责让你接着改。

安装前确认电脑上有 Node.js 和 npx，然后在项目目录执行经过核实的单项安装命令：

安装范围使用当前项目（Project，CLI 的默认范围），宿主选你实际在用的工具，按当次 CLI 提示确认。装完记下实际输出的安装目录，确认里面有 SKILL.md；Codex 的项目技能目录通常在 .agents/skills/ 下。

回到同一个项目开一个新对话，点名要用 excalidraw-diagram。Codex 会自动发现项目里的技能变化；未发现这个 Skill 时，先核对当前项目和实际安装目录，再重开 Codex；仍不显示，就让智能体读取该目录的 SKILL.md 及其明确引用的文件，按其中说明组织需求。

说明一句：本站没有实际执行上述安装和加载，步骤依据是安装工具与 Codex 的官方说明。

第一次请求把节点、分支、方向和交付要求一次讲清。下面是未执行的请求示意，以小区活动室预约流程为例：

这段可以整段换成你自己的材料：布局和配色偏好随意改，节点、分支和方向照你的实际步骤写。整理好的清单放在当前项目文件夹里的话，在请求里点名文件名，让智能体去读。

图生成之后，编辑和保存按下面几步走。按钮名称按 2026-11-01 的中文界面写，不同版本或语言下可能略有差别：

1. 要路径。 请智能体给出 .excalidraw 文件的完整路径。你会得到一个以 .excalidraw 结尾的路径；如果它只输出了一段 JSON 文本，请它先保存成原生文件，再给你路径。
2. 找到文件。 在文件管理器里按路径打开所在文件夹，能看到这个文件。
3. 保留已有画布。 在浏览器打开 excalidraw.com；如果画布上已有别的工作，先用菜单里的“保存到…”存一份，或者改用空画布。
4. 加载文件。 用菜单里的“打开”选择这个文件。加载会替换当前画布上的内容，确认后再继续；完成后画布上应出现整张图。
5. 对照原材料检查。 逐个看节点文字、分支的含义、每根箭头的起点和终点，确认与原材料对得上。
6. 改字、挪位置，回看连线。 双击文字即可修改；把框挪到新位置后，重新看一遍相关的连线还指不指向该指的框——未绑定端点的连线，挪后尤其要核对。
7. 保存原生副本。 用“保存到…”存一份 .excalidraw 文件，这是之后能继续改的版本。
8. 需要展示时再导出。 用“导出图片…”生成 PNG 或 SVG，放进文档或发给别人；导出时可以选择把画布数据嵌进图片，方便从图片恢复。要继续改图，还是回到上一步的原生文件，本课统一用它作交接。
9. 重开核对。 在 Excalidraw 重新打开刚保存的原生副本，确认图完整、内容与材料一致。发现不对，就把当前文件连同具体哪个节点、哪条关系不对一起交回智能体，请它修改后重新给你路径。

初稿布局走的是“合理、可读”的简单策略，不承诺复杂的自动排版。节点和关系一多，就让智能体做聚合分组，比如把一串内部模块收进一个子系统框；图面清爽之后，每组里是什么、每条关系含义对不对，仍要你本人核对。连线绑定也属于这一类：原生对象不保证箭头端点都固定在图形上。

费用分开三处看。Skill 采用 Apache-2.0 开源许可。生成图走你所用的智能体和模型，按那边的额度或套餐计费，各服务有没有免费额度本文没有核实，用前自行确认。Excalidraw 基础编辑器官方说明免费开源，支持 PNG、SVG 和原生格式，Excalidraw+ 是另行服务；本页描述的是基础编辑器的文件打开、保存与图片导出入口。

还有一条和材料有关：生成经过模型处理，编辑器免费不等于模型免费，也不能默认所有工具都完全在本地处理、内容不上传。涉及真实业务材料时，先确认所用模型和服务条款允许的处理范围。

• 仓库：xstongxue/best-skills，本课介绍的能力文件与 Apache-2.0 许可可直接核对。
• 官方示例：完整截图与原生文件。
• 安装工具：Skills CLI（skills.sh），见 github.com/vercel-labs/skills。
• Codex：快速开始、技能说明。
• Excalidraw 编辑器：打开编辑器、官方说明。

资料核对于 2026-11-01：所选 Skill 正文与本页采用的归档同文，README 其他章节已有新增和重排。Git 提交号未确认，具体变化可查仓库当前页面。