画流程图这件事说简单也简单说麻烦也麻烦。简单的是两三步的流程随手一画就完事麻烦的是一旦流程超过十几步或者需要在项目文档、方案汇报、代码注释里反复维护同一张图手动拖框、连箭头、调整对齐真的会让人怀疑自己在做什么重复劳动。这两年 Agent Skill 的概念越来越火Claude Code、Codex、OpenCode 这些 AI 编程工具都开始支持自定义 Skill。相比每次对话都重复啰嗦地交代“请用 draw.io 格式画一张流程图”更高效的做法是把流程图生成能力固化成一个 Skill让 AI 自动按模板输出可编辑的 Draw.io XML 文件。这样既保留了 AI 生成草图的效率又解决了“AI 画完图后没法二次编辑”的痛点。本文就把这个 Skill 从设计思路到完整代码拆开讲清楚。不依赖某个特定工具核心是把规则、模板、示例封装成标准目录结构适合后端开发、前端开发、算法工程师和经常写方案文档的同学直接复用。1. 手搓流程图的痛点与 Skill 思路1.1 为什么“手搓”流程图让人难受先来看一个真实场景。技术方案评审前你需要把订单超时关闭的完整流程画出来用户下单 - 支付超时 ? - 是: 系统自动取消 - 通知用户 - 结束 - 否: 等待支付结果回调 - 更新订单状态 - 结束这个流程看起来不难但放到 Draw.io 或 Visio 里实际操作时你会遇到绘制框体、调整连线和箭头方向非常耗时。节点多了以后布局容易乱自动排版效果不稳定。后续需求一变整张图要重新调整维护成本高。文档、PPT、代码注释里出现多张图时内容往往不完全一致。这些痛点的本质是流程图是“逻辑结构”但手动绘制时我们却把精力花在了“图形排版”上。1.2 Agent Skill 能解决什么问题Skill 可以理解成给 AI 助手准备的一套“能力包”。它不是一个普通提示词而是一个包含说明文档、规则约定、示例模板、输出格式的文件夹。当你在项目里安装了某个 Skill 后AI 在识别到相关任务时会主动读取这个能力包按照里面定义的规范完成任务。拿流程图场景来说过去你和 AI 的对话方式是这样的你请帮我画一个订单超时取消的流程图用 draw.io 格式。 AI好的以下是 XML 代码……第一次效果还行第二次、第三次可能就变样了。每次都要重新描述格式要求、节点样式、布局习惯而且 AI 不一定记得住你上次的偏好。有了 Skill 之后对话变成这样你使用 flowchart-master skill 画一个订单超时取消的流程图。 AI已读取 flowchart-master 规范正在生成 Draw.io XML 文件。AI 会自动套用你定义好的模块结构、节点样式、文件命名规则和输出路径生成结果更稳定也更容易修改。1.3 需要先区分此 Skill 非彼 Skill在搜索相关关键词时可能会看到两种完全不同的内容EDA/CAD 领域的 SKILL 语言比如 Cadence Allegro 里用的 SKILL 脚本这是一种扩展工具编程语言。AI Agent Skill指 Anthropic Claude Code 等工具引入的 Agent Skills 机制用 Markdown 文件定义 AI 的专项能力。本文讨论的是后者。如果你在找的是 Cadence SKILL 脚本那本文的侧重点可能不完全匹配。1.4 Skill 与 MCP 的区别不少同学会问Skill 和 MCP 不是都能扩展 AI 能力吗两者到底什么关系简单来说对比项Agent SkillMCP Server定位能力规则包告诉 AI“怎么做”工具服务接口告诉 AI“能调用什么”是否需要写代码通常不需要Markdown 模板即可需要实现服务端接口典型场景输出格式约束、代码规范、流程模板读写数据库、调用外部 API、文件操作启动成本低高在画流程图这个场景里其实不需要 MCP一个 Skill 就够了。因为 AI 本身已经具备生成 XML 的能力我们只需要通过 Skill 把格式、模板、步骤约束好。2. 方案设计把流程图生成固化为 Skill2.1 目标定义我们要做的是一个叫flowchart-master的 Skill它需要满足AI 能根据用户的流程描述自动输出可编辑的 Draw.io XML 文件。文件结构规范节点分组合理配色统一。节点文字、连线标签清晰便于后续人工微调。支持顺序流程、分支判断、并行分支等常见结构。生成的 XML 文件能直接用 draw.io 桌面版或在线版打开编辑。2.2 输出格式选型为什么优先选择 Draw.io XML目前 AI 生成流程图的常见格式有三种格式优点缺点Mermaid文本描述简单GitHub 原生支持在文档工具里原生支持有限复杂布局难调整PlantUML文本描述功能丰富中文支持和样式定制稍弱Draw.io XML可直接用 draw.io 打开编辑XML 冗长手写成本高这里更推荐 Draw.io XML 作为主要产物。原因有三个第一可编辑性。AI 生成 Mermaid 只能看想调整布局得回到文本里改。而 Draw.io XML 打开就是图形编辑器拖一拖就能改。第二与开发工作流兼容。Draw.io XML 是纯文本文件可以放进 Git 仓库做版本管理。需求变化后可以看 diff也可以让 AI 基于历史版本继续修改。第三AI 生成 XML 并不难。Draw.io XML 的格式比较规范只要在 Skill 里给出清晰的模板和约束AI 完全能输出可用的文件。2.3 Skill 目录结构设计参考主流 Agent Skill 的约定推荐目录结构如下.flowcast/flowchart-master/ ├── SKILL.md ├── assets/ │ ├── templates/ │ │ ├── simple-flow.drawio.xml │ │ ├── branch-flow.drawio.xml │ │ └── parallel-flow.drawio.xml │ └── examples/ │ └── order-cancel-example.png说明SKILL.md是核心文件包含技能描述、主体指令和规则。assets/templates/存放标准 XML 模板方便 AI 复制改写。assets/examples/存放示例图可选。PROGRESS.md可选用于记录实例化过程中需要追踪的任务清单。这个结构可以让 AI 在运行时快速定位到模板而不是凭记忆生成 XML降低格式错误的概率。3. 手写 flowchart-master Skill下面进入核心环节。先把SKILL.md的完整内容写出来再拆解关键部分。3.1 创建目录与文件mkdir -p .flowcast/flowchart-master/assets/templates mkdir -p .flowcast/flowchart-master/assets/examples3.2 编写基础模板这里先准备一个最基础的顺序流程图模板AI 后续生成时以此为骨架。文件路径.flowcast/flowchart-master/assets/templates/simple-flow.drawio.xmlmxfile hostapp.diagrams.net modified2025-01-01T00:00:00.000Z agentflowchart-master version24.0.0 diagram idsimple-flow name简单流程图 mxGraphModel dx800 dy600 grid1 gridSize10 guides1 tooltips1 connect1 arrows1 fold1 page1 pageScale1 pageWidth827 pageHeight1169 math0 shadow0 root mxCell id0/ mxCell id1 parent0/ mxCell idstart value开始 stylerounded1;whiteSpacewrap;html1;fillColor#d5e8d4;strokeColor#82b366; vertex1 parent1 mxGeometry x320 y40 width120 height40 asgeometry/ /mxCell mxCell idstep1 value步骤 1 stylerounded0;whiteSpacewrap;html1;fillColor#dae8fc;strokeColor#6c8ebf; vertex1 parent1 mxGeometry x320 y140 width120 height60 asgeometry/ /mxCell mxCell idend value结束 stylerounded1;whiteSpacewrap;html1;fillColor#d5e8d4;strokeColor#82b366; vertex1 parent1 mxGeometry x320 y260 width120 height40 asgeometry/ /mxCell mxCell ide1 styleedgeStyleorthogonalEdgeStyle;rounded0;html1; edge1 parent1 sourcestart targetstep1 mxGeometry relative1 asgeometry/ /mxCell mxCell ide2 styleedgeStyleorthogonalEdgeStyle;rounded0;html1; edge1 parent1 sourcestep1 targetend mxGeometry relative1 asgeometry/ /mxCell /root /mxGraphModel /diagram /mxfile这个模板中包含几个关键点mxCell id0和id1是 Draw.io 默认的根节点结构不能删除。vertex1表示节点edge1表示连线。parent1表示节点归属于第 1 层根容器。mxGeometry中的x、y控制坐标width、height控制尺寸。连线通过source和target属性绑定起始节点和结束节点不需要手动绘制。节点样式里rounded1表示圆角矩形常用于开始和结束节点rounded0表示矩形用于普通步骤。有了这个模板AI 生成新图时的基本骨架就有了保证。3.3 编写 SKILL.md 主文件文件路径.flowcast/flowchart-master/SKILL.md--- name: flowchart-master description: 根据用户的业务描述自动生成可编辑的 Draw.io XML 流程图文件。适用于业务流程图、算法流程图、系统流程图、状态流转图等场景。当用户要求“画流程图”“生成流程图”“画一个流程”“draw a flowchart”时自动启用本技能。 --- # flowchart-master 你是一个专业的流程图设计专家。你擅长把杂乱无章的业务描述结构化为清晰、美观、可维护的流程图。 ## 工作流程 当用户提出流程图需求后请严格按照以下步骤执行 ### 第 1 步提取流程节点 通读用户的描述提取出所有必要的流程节点。每个节点必须满足 - 节点名称在 2 到 10 个汉字之间。 - 节点名称必须是一个完整动作例如“创建订单”“发送通知”“校验参数”。 - 忽略无关细节将与主流程无关的背景描述删除。 ### 第 2 步判断流程类型 根据节点之间的逻辑关系判断流程属于哪种类型 - 顺序流程节点一个接一个执行。 - 分支流程存在条件判断流向不同分支。 - 并行流程多个任务同时执行最终汇合。 - 循环流程某一步满足条件后回到之前的步骤。 如果流程比较复杂可以拆分成多个子图但每个子图必须独立完整。 ### 第 3 步生成 Draw.io XML 读取模板文件 assets/templates/ 下对应的 .drawio.xml 模板在此基础上生成新 XML。 生成规则 1. 每个节点必须有唯一 id推荐使用英文单词或小写驼峰命名例如 createOrder、checkStock。 2. 节点文字放在 value 属性中。 3. 连线必须使用 edgeStyleorthogonalEdgeStyle;rounded0;html1; 风格保证连线自动垂直/水平。 4. 默认画布大小设置为宽 827 高 1169按需扩展。 5. 如果节点数量超过 8 个优先采用纵向布局减少横向拥挤。 ### 第 4 步输出文件 - 生成的文件命名规则{流程名称}.drawio.xml统一使用小写中划线命名法例如 order-cancel.drawio.xml。 - 文件保存到当前工作目录下的 docs/diagrams/ 文件夹中。 - 输出前确认 XML 的根结构完整节点 id 不重复。 - 输出后给出简要说明告诉用户如何用 draw.io 打开文件包括 Web 版和桌面版两种方式。 ## 样式规范 以下颜色为默认配色生成时必须严格遵循 | 元素 | 填充色 | 边框色 | 说明 | | --- | --- | --- | --- | | 开始/结束节点 | #d5e8d4 | #82b366 | 圆角矩形样式 | | 处理步骤 | #dae8fc | #6c8ebf | 普通矩形样式 | | 判断节点 | #fff2cc | #d6b656 | 菱形样式 | | 外部实体 | #f8cecc | #b85450 | 普通矩形样式 | 节点文字统一使用黑色字体大小 12居中显示。 ## 输出格式示例 当用户说“画一下订单超时取消流程”时你生成的 XML 应该符合以下结构预期 - 开始节点用户下单 - 判断节点是否支付超时 - 处理节点系统自动取消订单 - 处理节点发送取消通知 - 结束节点结束 生成文件后用一句话概括流程图核心链路方便用户快速核对。 ## 注意事项 1. 不要生成脱离模板的 XML 结构必须在模板基础上修改。 2. 如果用户没有明确指定布局方向默认从上到下。 3. 如果流程节点较多先为用户规划分组例如“用户侧流程”“系统侧流程”“外部系统流程”再生成 XML。 4. 不要输出 Mermaid 格式除非用户明确要求。 5. 生成的 XML 中不要包含 HTML 转义错误 必须写成 amp; 必须写成 lt;。 6. 判断节点必须有两个出口连线一个标记“是”一个标记“否”。 7. 连线标签使用 value 属性放在 mxCell 的 value 中例如 value是。3.4 SKILL.md 关键设计解释这个SKILL.md表面上是给 AI 看的提示词但它和普通提示词有本质区别。普通提示词是一段对话里的临时指令而SKILL.md是系统化的能力规范有几个关键设计第一把判断标准写清楚。“节点名称在 2 到 10 个汉字之间”“节点名称必须是一个完整动作”这种约束直接减少了 AI 生成无意义节点的问题。第二把流程类型拆开。AI 只有先判断流程类型才能选择正确的模板和布局方式否则容易把带分支的流程图画成一条直线。第三把颜色和样式固化成表格。AI 对颜色的理解是模糊的但表格里的十六进制色值是精确的。这样生成的多张图风格才能保持一致。第四把常见错误写进注意事项。比如判断节点必须有“是”“否”两个出口这个约束在日常流程图中非常实用。如果不写AI 生成的菱形节点很可能只连了一条线。4. 安装到 AI 编程工具并验证4.1 安装到 Claude Code如果你使用的是 Claude Code只需把flowchart-master文件夹放到项目目录下的.claude/skills/目录中mkdir -p .claude/skills cp -r .flowcast/flowchart-master .claude/skills/安装完成后在 Claude Code 会话中直接描述需求即可请使用 flowchart-master 画一个用户注册流程图4.2 安装到 Codex / OpenCodeCodex 和 OpenCode 对 Agent Skills 的支持方式略有差异但基本都是把 Skill 文件夹放到项目目录或全局配置目录下。以常见方式为例# Codex mkdir -p ~/.codex/skills cp -r .flowcast/flowchart-master ~/.codex/skills/ # OpenCode mkdir -p ~/.config/opencode/skills cp -r .flowcast/flowchart-master ~/.config/opencode/skills/不同版本的配置路径可能会有调整建议优先查看工具官方文档中的“Agent Skills”或“Custom Skills”说明。核心思路是把flowchart-master整个文件夹放到工具约定扫描的 Skills 目录即可。4.3 实际生成效果验证下面用一个具体例子来验证 Skill 的效果。假设用户输入使用 flowchart-master 画一个订单支付流程包含以下逻辑 1. 用户创建订单 2. 系统校验商品库存 3. 库存不足则关闭订单 4. 库存充足则跳转支付 5. 支付成功后更新订单状态 6. 支付失败则提示重新支付Skill 驱动 AI 完成的思考过程大致是第 1 步提取节点创建订单、校验库存、关闭订单、跳转支付、更新订单状态、提示重新支付。第 2 步判断类型这是一个典型的“分支 子流程”结构。第 3 步选择模板分支流程模板。第 4 步生成文件order-payment.drawio.xml保存到docs/diagrams/。最终生成的 XML 核心结构如下简化展示mxCell idstart value创建订单 stylerounded1;whiteSpacewrap;html1;fillColor#d5e8d4;strokeColor#82b366; vertex1 parent1 mxGeometry x320 y40 width120 height40 asgeometry/ /mxCell mxCell idcheckStock value校验库存 stylerhombus;whiteSpacewrap;html1;fillColor#fff2cc;strokeColor#d6b656; vertex1 parent1 mxGeometry x310 y140 width140 height80 asgeometry/ /mxCell mxCell idinsufficient value关闭订单 stylerounded0;whiteSpacewrap;html1;fillColor#f8cecc;strokeColor#b85450; vertex1 parent1 mxGeometry x80 y280 width120 height60 asgeometry/ /mxCell mxCell idpay value跳转支付 stylerounded0;whiteSpacewrap;html1;fillColor#dae8fc;strokeColor#6c8ebf; vertex1 parent1 mxGeometry x520 y280 width120 height60 asgeometry/ /mxCell这里可以看到菱形判断节点使用了rhombus样式开始节点使用了绿色圆角矩形错误分支使用了红色系矩形。AI 不需要用户额外指定样式一切按照 Skill 里的规范自动完成。4.4 在 draw.io 中打开和验证生成 XML 文件后打开 app.diagrams.net 选择“文件 - 打开”找到docs/diagrams/order-payment.drawio.xml即可加载。打开后检查以下几点节点位置是否有重叠。判断节点的“是/否”连线是否正确。是否还有多余的空节点。整体布局是否纵向居中。如果发现布局不够理想只要拖动节点微调即可不需要重写 XML。5. 让 Skill 更贴合自己习惯的进阶配置5.1 增加“泳道图”支持泳道图是业务流程图里很常见的形式用来区分不同角色或系统的职责。在SKILL.md中增加一节### 泳道图模式 当用户要求“泳道图”“跨职能流程图”“带角色的流程图”时切换到泳道图模式 1. 根据用户描述识别出所有的角色/系统例如“用户”“前端”“后端”“支付系统”。 2. 为每个角色创建一个泳道容器使用 Draw.io 的 swimlane 样式。 3. XML 结构中泳道容器是一个 mxCell其 vertex1样式为 swimlane;html1;。 4. 所有属于该角色的节点其 parent 属性指向对应的泳道容器 id。 5. 泳道背景色统一使用浅灰 #f5f5f5标题文字加粗。实现时泳道容器的 XML 大致长这样mxCell iduserLane value用户 styleswimlane;html1;fillColor#f5f5f5;strokeColor#666666; vertex1 parent1 mxGeometry x40 y40 width760 height200 asgeometry/ /mxCell泳道模式的价值在于AI 会主动为节点分组而不是把所有节点堆在一个画布上。对于涉及多个系统的流程这个能力非常有用。5.2 增加不同模板文件如果经常生成算法流程图、状态机图可以为每种类型准备独立模板assets/templates/ ├── algorithm-flow.drawio.xml ├── branch-flow.drawio.xml ├── parallel-flow.drawio.xml ├── simple-flow.drawio.xml └── state-machine.drawio.xml在SKILL.md中补充类型判断逻辑### 流程类型与模板对应关系 | 用户需求 | 使用的模板文件 | | --- | --- | | 简单顺序流程 | simple-flow.drawio.xml | | 分支判断流程 | branch-flow.drawio.xml | | 并行任务流程 | parallel-flow.drawio.xml | | 算法/程序逻辑 | algorithm-flow.drawio.xml | | 状态机/状态流转 | state-machine.drawio.xml |这样 AI 在面对不同类型需求时能够快速载入对应模板大幅降低生成错误格式的概率。5.3 加入 PROGRESS.md 追踪机制对于较大的流程图任务可以在 Skill 目录里加入PROGRESS.md让 AI 分步骤记录进度。例如# 流程图生成进度 任务订单退款流程 状态进行中 - [x] 提取节点 - [x] 判断流程类型 - [ ] 生成 XML - [ ] 保存文件 - [ ] 校验文件是否可被 draw.io 打开好处是如果中间 AI 生成了不完整的文件可以根据进度记录定位到具体失败环节。也可以在一个任务里陆续追加节点让 AI 在已有 XML 文件的基础上修改而不是每次重画整张图。6. 常见问题与排查思路在使用流程图 Skill 的过程中会遇到一些比较典型的问题。这里整理成一张排查表。问题现象常见原因解决思路生成了 XML但 draw.io 打开后是空白XML 根节点结构不完整缺少mxCell id0和mxCell id1检查模板确认根节点完整节点都堆在左上角节点缺少mxGeometry坐标或者坐标设置不合理在生成规范中强调每个节点必须给出坐标判断节点只有一条出口AI 没有理解菱形节点需要“是/否”两个分支在 SKILL.md 注意事项中强制规定判断节点必须两个出口生成的 SVG 或 PNG 不是可编辑文件用户要求了图片格式或 AI 默认输出了图片在描述中明确要求“生成 Draw.io XML 可编辑文件”中文字符乱码XML 文件编码问题保存文件时使用 UTF-8 编码AI 没识别到 Skill目录放错或者 SKILL.md 的 frontmatter 不完整检查目录名、name字段、description描述是否清晰多张图风格不统一样式规则没有写入 SKILL.mdAI 自由发挥把颜色、字体、连线风格固化为表格约束流程复杂时 XML 太长没有拆分子图在 SKILL.md 中启用分组生成策略按业务模块拆分子流程6.1 排查 checklist如果遇到某个环节出错按顺序检查Skill 目录是否被 AI 工具正确扫描到查看工具的 Skill 列表。SKILL.md的 frontmatter 中name和description是否清晰。模板文件路径是否和SKILL.md中引用的一致。生成后的 XML 是否包含 Draw.io 默认的根节点结构。打开 XML 文件时是否出现 XML 解析错误提示。节点 id 是否有重复。连线是否通过source和target正确绑定。7. 最佳实践与工程建议7.1 每个 Skill 只干一件事这是 Agent Skill 设计里最重要的一条原则。不要试图写一个“万能 Skill”既要画流程图又要生成架构图又要写 SQL。单个 Skill 只聚焦一个任务description写得越精准AI 越容易在正确时机启用它。7.2 把模板当作代码来维护模板文件一旦确定最好纳入版本管理。每次修改模板时在 commit 信息里说明“修改了节点配色”“调整了画布大小”。如果生成结果出了问题可以快速回滚到上一个可用模板。7.3 先小样本验证再全量铺开第一次写好 Skill 后不要直接拿一个 20 步的大流程去测试。建议先用 3 个小型案例验证简单顺序流程。一个判断分支流程。一个并行流程。确认三个案例全部通过后再处理更复杂的场景。7.4 用示例沉淀团队规范如果团队里有多个人都在写流程图可以约定统一的示例文件。比如团队规定“流程图中的动词统一使用‘创建/更新/删除/通知/校验’”把这个写入SKILL.md。这样不同人产出的流程图在表达习惯上也能保持统一。7.5 善用 AI 的迭代能力Skill 不需要一次做到完美。实际使用中如果发现 AI 生成的节点命名不够统一就回到SKILL.md补充命名规范如果发现分支判断的标签不够清晰就补充标签规范。每次迭代都相当于给 Skill 打补丁越用越顺手。下面是一个迭代示例## 命名规范补充版 连接线标签必须使用动词或状态短语 - 判断节点出口必填是/否 - 处理步骤之间可省略标签 - 异常分支必须标注失败/超时/异常7.6 为每个流程图配一段说明文字生成 XML 的同时建议让 AI 输出一段简明总结。这段总结既可以放进代码注释也可以直接粘贴到需求文档里。在SKILL.md中约定### 输出格式 生成文件后必须输出以下内容 1. 流程图文件名。 2. 核心链路一句话概括。 3. 涉及的关键节点列表。 4. 图中有哪些分支或异常处理逻辑。这样文档和图形是配套的以后看图的人不会只看到一堆框和箭头不知道业务含义。8. 一个完整示例订单超时关闭流程为了帮助你把上面的内容串起来这里提供一个完整的示例结果。假设用户输入用 flowchart-master 画一个订单超时未支付自动关闭的流程Skill 驱动 AI 生成的order-timeout-close.drawio.xml文件核心内容如下简化节选mxfile hostapp.diagrams.net agentflowchart-master version24.0.0 diagram idorder-timeout-close name订单超时关闭 mxGraphModel dx800 dy600 grid1 gridSize10 guides1 tooltips1 connect1 arrows1 fold1 page1 pageScale1 pageWidth827 pageHeight1169 math0 shadow0 root mxCell id0/ mxCell id1 parent0/ mxCell idstart value用户下单 stylerounded1;whiteSpacewrap;html1;fillColor#d5e8d4;strokeColor#82b366; vertex1 parent1 mxGeometry x320 y40 width120 height40 asgeometry/ /mxCell mxCell idjudgeTimeout value是否超时未支付 stylerhombus;whiteSpacewrap;html1;fillColor#fff2cc;strokeColor#d6b656; vertex1 parent1 mxGeometry x300 y140 width160 height80 asgeometry/ /mxCell mxCell idcancelOrder value系统自动取消订单 stylerounded0;whiteSpacewrap;html1;fillColor#dae8fc;strokeColor#6c8ebf; vertex1 parent1 mxGeometry x310 y280 width140 height60 asgeometry/ /mxCell mxCell idsendNotify value发送取消通知 stylerounded0;whiteSpacewrap;html1;fillColor#dae8fc;strokeColor#6c8ebf; vertex1 parent1 mxGeometry x310 y400 width140 height60 asgeometry/ /mxCell mxCell idend value结束 stylerounded1;whiteSpacewrap;html1;fillColor#d5e8d4;strokeColor#82b366; vertex1 parent1 mxGeometry x320 y520 width120 height40 asgeometry/ /mxCell mxCell ide1 styleedgeStyleorthogonalEdgeStyle;rounded0;html1; edge1 parent1 sourcestart targetjudgeTimeout mxGeometry relative1 asgeometry/ /mxCell mxCell ide2 value是 styleedgeStyleorthogonalEdgeStyle;rounded0;html1; edge1 parent1 sourcejudgeTimeout targetcancelOrder mxGeometry relative1 asgeometry/ /mxCell mxCell ide3 styleedgeStyleorthogonalEdgeStyle;rounded0;html1; edge1 parent1 sourcecancelOrder targetsendNotify mxGeometry relative1 asgeometry/ /mxCell mxCell ide4 styleedgeStyleorthogonalEdgeStyle;rounded0;html1; edge1 parent1 sourcesendNotify targetend mxGeometry relative1 asgeometry/ /mxCell /root /mxGraphModel /diagram /mxfile关键检查点开始节点使用绿色圆角矩形。判断节点使用菱形出口带“是”标签。处理节点使用蓝色普通矩形。节点之间的连线使用正交连线样式保持横平竖直。整个图从用户下单到结束纵向排列没有交叉连线。如果业务中还需要处理“未超时”的情况就需要增加第二条出口连线标注“否”指向另一个分支节点。判断节点的英文judgeTimeout也方便后续在代码注释里引用。9. 后续还能怎么玩到目前为止我们的flowchart-masterSkill 已经可以稳定输出 Draw.io XML 文件了。如果你愿意再进一步可以给 Skill 添加更强大的能力。一个方向是自动生成流程图的同时生成配套的文字说明。让 AI 把流程拆成几个阶段每个阶段用一段话描述再把这段描述写入同一个 Markdown 文档。这样技术方案文档里的“流程图 流程说明”两个部分一次就能完成。另一个方向是让 Skill 自动对比新旧版本。当需求变更时把旧 XML 文件内容贴给 AI让它基于旧文件修改节点而不是重画。这需要把“基于已有 XML 修改”的规则明确写入SKILL.md。还有团队会为 Skill 增加术语表和缩写表比如“支付成功回调”统一简写为“支付回调”避免同一张图里出现多种说法。如果你此前一直被流程图的手工排版折磨可以试试这个思路。把SKILL.md和模板放进项目仓库下次画流程图时让 AI 先出第一版你只需要拖拽微调。这套方法不仅适用于流程图迁移到架构图、时序图、状态图原理完全一致。 用Agent Skill生成可编辑流程图：Draw.io XML实战指南
画流程图这件事说简单也简单说麻烦也麻烦。简单的是两三步的流程随手一画就完事麻烦的是一旦流程超过十几步或者需要在项目文档、方案汇报、代码注释里反复维护同一张图手动拖框、连箭头、调整对齐真的会让人怀疑自己在做什么重复劳动。这两年 Agent Skill 的概念越来越火Claude Code、Codex、OpenCode 这些 AI 编程工具都开始支持自定义 Skill。相比每次对话都重复啰嗦地交代“请用 draw.io 格式画一张流程图”更高效的做法是把流程图生成能力固化成一个 Skill让 AI 自动按模板输出可编辑的 Draw.io XML 文件。这样既保留了 AI 生成草图的效率又解决了“AI 画完图后没法二次编辑”的痛点。本文就把这个 Skill 从设计思路到完整代码拆开讲清楚。不依赖某个特定工具核心是把规则、模板、示例封装成标准目录结构适合后端开发、前端开发、算法工程师和经常写方案文档的同学直接复用。1. 手搓流程图的痛点与 Skill 思路1.1 为什么“手搓”流程图让人难受先来看一个真实场景。技术方案评审前你需要把订单超时关闭的完整流程画出来用户下单 - 支付超时 ? - 是: 系统自动取消 - 通知用户 - 结束 - 否: 等待支付结果回调 - 更新订单状态 - 结束这个流程看起来不难但放到 Draw.io 或 Visio 里实际操作时你会遇到绘制框体、调整连线和箭头方向非常耗时。节点多了以后布局容易乱自动排版效果不稳定。后续需求一变整张图要重新调整维护成本高。文档、PPT、代码注释里出现多张图时内容往往不完全一致。这些痛点的本质是流程图是“逻辑结构”但手动绘制时我们却把精力花在了“图形排版”上。1.2 Agent Skill 能解决什么问题Skill 可以理解成给 AI 助手准备的一套“能力包”。它不是一个普通提示词而是一个包含说明文档、规则约定、示例模板、输出格式的文件夹。当你在项目里安装了某个 Skill 后AI 在识别到相关任务时会主动读取这个能力包按照里面定义的规范完成任务。拿流程图场景来说过去你和 AI 的对话方式是这样的你请帮我画一个订单超时取消的流程图用 draw.io 格式。 AI好的以下是 XML 代码……第一次效果还行第二次、第三次可能就变样了。每次都要重新描述格式要求、节点样式、布局习惯而且 AI 不一定记得住你上次的偏好。有了 Skill 之后对话变成这样你使用 flowchart-master skill 画一个订单超时取消的流程图。 AI已读取 flowchart-master 规范正在生成 Draw.io XML 文件。AI 会自动套用你定义好的模块结构、节点样式、文件命名规则和输出路径生成结果更稳定也更容易修改。1.3 需要先区分此 Skill 非彼 Skill在搜索相关关键词时可能会看到两种完全不同的内容EDA/CAD 领域的 SKILL 语言比如 Cadence Allegro 里用的 SKILL 脚本这是一种扩展工具编程语言。AI Agent Skill指 Anthropic Claude Code 等工具引入的 Agent Skills 机制用 Markdown 文件定义 AI 的专项能力。本文讨论的是后者。如果你在找的是 Cadence SKILL 脚本那本文的侧重点可能不完全匹配。1.4 Skill 与 MCP 的区别不少同学会问Skill 和 MCP 不是都能扩展 AI 能力吗两者到底什么关系简单来说对比项Agent SkillMCP Server定位能力规则包告诉 AI“怎么做”工具服务接口告诉 AI“能调用什么”是否需要写代码通常不需要Markdown 模板即可需要实现服务端接口典型场景输出格式约束、代码规范、流程模板读写数据库、调用外部 API、文件操作启动成本低高在画流程图这个场景里其实不需要 MCP一个 Skill 就够了。因为 AI 本身已经具备生成 XML 的能力我们只需要通过 Skill 把格式、模板、步骤约束好。2. 方案设计把流程图生成固化为 Skill2.1 目标定义我们要做的是一个叫flowchart-master的 Skill它需要满足AI 能根据用户的流程描述自动输出可编辑的 Draw.io XML 文件。文件结构规范节点分组合理配色统一。节点文字、连线标签清晰便于后续人工微调。支持顺序流程、分支判断、并行分支等常见结构。生成的 XML 文件能直接用 draw.io 桌面版或在线版打开编辑。2.2 输出格式选型为什么优先选择 Draw.io XML目前 AI 生成流程图的常见格式有三种格式优点缺点Mermaid文本描述简单GitHub 原生支持在文档工具里原生支持有限复杂布局难调整PlantUML文本描述功能丰富中文支持和样式定制稍弱Draw.io XML可直接用 draw.io 打开编辑XML 冗长手写成本高这里更推荐 Draw.io XML 作为主要产物。原因有三个第一可编辑性。AI 生成 Mermaid 只能看想调整布局得回到文本里改。而 Draw.io XML 打开就是图形编辑器拖一拖就能改。第二与开发工作流兼容。Draw.io XML 是纯文本文件可以放进 Git 仓库做版本管理。需求变化后可以看 diff也可以让 AI 基于历史版本继续修改。第三AI 生成 XML 并不难。Draw.io XML 的格式比较规范只要在 Skill 里给出清晰的模板和约束AI 完全能输出可用的文件。2.3 Skill 目录结构设计参考主流 Agent Skill 的约定推荐目录结构如下.flowcast/flowchart-master/ ├── SKILL.md ├── assets/ │ ├── templates/ │ │ ├── simple-flow.drawio.xml │ │ ├── branch-flow.drawio.xml │ │ └── parallel-flow.drawio.xml │ └── examples/ │ └── order-cancel-example.png说明SKILL.md是核心文件包含技能描述、主体指令和规则。assets/templates/存放标准 XML 模板方便 AI 复制改写。assets/examples/存放示例图可选。PROGRESS.md可选用于记录实例化过程中需要追踪的任务清单。这个结构可以让 AI 在运行时快速定位到模板而不是凭记忆生成 XML降低格式错误的概率。3. 手写 flowchart-master Skill下面进入核心环节。先把SKILL.md的完整内容写出来再拆解关键部分。3.1 创建目录与文件mkdir -p .flowcast/flowchart-master/assets/templates mkdir -p .flowcast/flowchart-master/assets/examples3.2 编写基础模板这里先准备一个最基础的顺序流程图模板AI 后续生成时以此为骨架。文件路径.flowcast/flowchart-master/assets/templates/simple-flow.drawio.xmlmxfile hostapp.diagrams.net modified2025-01-01T00:00:00.000Z agentflowchart-master version24.0.0 diagram idsimple-flow name简单流程图 mxGraphModel dx800 dy600 grid1 gridSize10 guides1 tooltips1 connect1 arrows1 fold1 page1 pageScale1 pageWidth827 pageHeight1169 math0 shadow0 root mxCell id0/ mxCell id1 parent0/ mxCell idstart value开始 stylerounded1;whiteSpacewrap;html1;fillColor#d5e8d4;strokeColor#82b366; vertex1 parent1 mxGeometry x320 y40 width120 height40 asgeometry/ /mxCell mxCell idstep1 value步骤 1 stylerounded0;whiteSpacewrap;html1;fillColor#dae8fc;strokeColor#6c8ebf; vertex1 parent1 mxGeometry x320 y140 width120 height60 asgeometry/ /mxCell mxCell idend value结束 stylerounded1;whiteSpacewrap;html1;fillColor#d5e8d4;strokeColor#82b366; vertex1 parent1 mxGeometry x320 y260 width120 height40 asgeometry/ /mxCell mxCell ide1 styleedgeStyleorthogonalEdgeStyle;rounded0;html1; edge1 parent1 sourcestart targetstep1 mxGeometry relative1 asgeometry/ /mxCell mxCell ide2 styleedgeStyleorthogonalEdgeStyle;rounded0;html1; edge1 parent1 sourcestep1 targetend mxGeometry relative1 asgeometry/ /mxCell /root /mxGraphModel /diagram /mxfile这个模板中包含几个关键点mxCell id0和id1是 Draw.io 默认的根节点结构不能删除。vertex1表示节点edge1表示连线。parent1表示节点归属于第 1 层根容器。mxGeometry中的x、y控制坐标width、height控制尺寸。连线通过source和target属性绑定起始节点和结束节点不需要手动绘制。节点样式里rounded1表示圆角矩形常用于开始和结束节点rounded0表示矩形用于普通步骤。有了这个模板AI 生成新图时的基本骨架就有了保证。3.3 编写 SKILL.md 主文件文件路径.flowcast/flowchart-master/SKILL.md--- name: flowchart-master description: 根据用户的业务描述自动生成可编辑的 Draw.io XML 流程图文件。适用于业务流程图、算法流程图、系统流程图、状态流转图等场景。当用户要求“画流程图”“生成流程图”“画一个流程”“draw a flowchart”时自动启用本技能。 --- # flowchart-master 你是一个专业的流程图设计专家。你擅长把杂乱无章的业务描述结构化为清晰、美观、可维护的流程图。 ## 工作流程 当用户提出流程图需求后请严格按照以下步骤执行 ### 第 1 步提取流程节点 通读用户的描述提取出所有必要的流程节点。每个节点必须满足 - 节点名称在 2 到 10 个汉字之间。 - 节点名称必须是一个完整动作例如“创建订单”“发送通知”“校验参数”。 - 忽略无关细节将与主流程无关的背景描述删除。 ### 第 2 步判断流程类型 根据节点之间的逻辑关系判断流程属于哪种类型 - 顺序流程节点一个接一个执行。 - 分支流程存在条件判断流向不同分支。 - 并行流程多个任务同时执行最终汇合。 - 循环流程某一步满足条件后回到之前的步骤。 如果流程比较复杂可以拆分成多个子图但每个子图必须独立完整。 ### 第 3 步生成 Draw.io XML 读取模板文件 assets/templates/ 下对应的 .drawio.xml 模板在此基础上生成新 XML。 生成规则 1. 每个节点必须有唯一 id推荐使用英文单词或小写驼峰命名例如 createOrder、checkStock。 2. 节点文字放在 value 属性中。 3. 连线必须使用 edgeStyleorthogonalEdgeStyle;rounded0;html1; 风格保证连线自动垂直/水平。 4. 默认画布大小设置为宽 827 高 1169按需扩展。 5. 如果节点数量超过 8 个优先采用纵向布局减少横向拥挤。 ### 第 4 步输出文件 - 生成的文件命名规则{流程名称}.drawio.xml统一使用小写中划线命名法例如 order-cancel.drawio.xml。 - 文件保存到当前工作目录下的 docs/diagrams/ 文件夹中。 - 输出前确认 XML 的根结构完整节点 id 不重复。 - 输出后给出简要说明告诉用户如何用 draw.io 打开文件包括 Web 版和桌面版两种方式。 ## 样式规范 以下颜色为默认配色生成时必须严格遵循 | 元素 | 填充色 | 边框色 | 说明 | | --- | --- | --- | --- | | 开始/结束节点 | #d5e8d4 | #82b366 | 圆角矩形样式 | | 处理步骤 | #dae8fc | #6c8ebf | 普通矩形样式 | | 判断节点 | #fff2cc | #d6b656 | 菱形样式 | | 外部实体 | #f8cecc | #b85450 | 普通矩形样式 | 节点文字统一使用黑色字体大小 12居中显示。 ## 输出格式示例 当用户说“画一下订单超时取消流程”时你生成的 XML 应该符合以下结构预期 - 开始节点用户下单 - 判断节点是否支付超时 - 处理节点系统自动取消订单 - 处理节点发送取消通知 - 结束节点结束 生成文件后用一句话概括流程图核心链路方便用户快速核对。 ## 注意事项 1. 不要生成脱离模板的 XML 结构必须在模板基础上修改。 2. 如果用户没有明确指定布局方向默认从上到下。 3. 如果流程节点较多先为用户规划分组例如“用户侧流程”“系统侧流程”“外部系统流程”再生成 XML。 4. 不要输出 Mermaid 格式除非用户明确要求。 5. 生成的 XML 中不要包含 HTML 转义错误 必须写成 amp; 必须写成 lt;。 6. 判断节点必须有两个出口连线一个标记“是”一个标记“否”。 7. 连线标签使用 value 属性放在 mxCell 的 value 中例如 value是。3.4 SKILL.md 关键设计解释这个SKILL.md表面上是给 AI 看的提示词但它和普通提示词有本质区别。普通提示词是一段对话里的临时指令而SKILL.md是系统化的能力规范有几个关键设计第一把判断标准写清楚。“节点名称在 2 到 10 个汉字之间”“节点名称必须是一个完整动作”这种约束直接减少了 AI 生成无意义节点的问题。第二把流程类型拆开。AI 只有先判断流程类型才能选择正确的模板和布局方式否则容易把带分支的流程图画成一条直线。第三把颜色和样式固化成表格。AI 对颜色的理解是模糊的但表格里的十六进制色值是精确的。这样生成的多张图风格才能保持一致。第四把常见错误写进注意事项。比如判断节点必须有“是”“否”两个出口这个约束在日常流程图中非常实用。如果不写AI 生成的菱形节点很可能只连了一条线。4. 安装到 AI 编程工具并验证4.1 安装到 Claude Code如果你使用的是 Claude Code只需把flowchart-master文件夹放到项目目录下的.claude/skills/目录中mkdir -p .claude/skills cp -r .flowcast/flowchart-master .claude/skills/安装完成后在 Claude Code 会话中直接描述需求即可请使用 flowchart-master 画一个用户注册流程图4.2 安装到 Codex / OpenCodeCodex 和 OpenCode 对 Agent Skills 的支持方式略有差异但基本都是把 Skill 文件夹放到项目目录或全局配置目录下。以常见方式为例# Codex mkdir -p ~/.codex/skills cp -r .flowcast/flowchart-master ~/.codex/skills/ # OpenCode mkdir -p ~/.config/opencode/skills cp -r .flowcast/flowchart-master ~/.config/opencode/skills/不同版本的配置路径可能会有调整建议优先查看工具官方文档中的“Agent Skills”或“Custom Skills”说明。核心思路是把flowchart-master整个文件夹放到工具约定扫描的 Skills 目录即可。4.3 实际生成效果验证下面用一个具体例子来验证 Skill 的效果。假设用户输入使用 flowchart-master 画一个订单支付流程包含以下逻辑 1. 用户创建订单 2. 系统校验商品库存 3. 库存不足则关闭订单 4. 库存充足则跳转支付 5. 支付成功后更新订单状态 6. 支付失败则提示重新支付Skill 驱动 AI 完成的思考过程大致是第 1 步提取节点创建订单、校验库存、关闭订单、跳转支付、更新订单状态、提示重新支付。第 2 步判断类型这是一个典型的“分支 子流程”结构。第 3 步选择模板分支流程模板。第 4 步生成文件order-payment.drawio.xml保存到docs/diagrams/。最终生成的 XML 核心结构如下简化展示mxCell idstart value创建订单 stylerounded1;whiteSpacewrap;html1;fillColor#d5e8d4;strokeColor#82b366; vertex1 parent1 mxGeometry x320 y40 width120 height40 asgeometry/ /mxCell mxCell idcheckStock value校验库存 stylerhombus;whiteSpacewrap;html1;fillColor#fff2cc;strokeColor#d6b656; vertex1 parent1 mxGeometry x310 y140 width140 height80 asgeometry/ /mxCell mxCell idinsufficient value关闭订单 stylerounded0;whiteSpacewrap;html1;fillColor#f8cecc;strokeColor#b85450; vertex1 parent1 mxGeometry x80 y280 width120 height60 asgeometry/ /mxCell mxCell idpay value跳转支付 stylerounded0;whiteSpacewrap;html1;fillColor#dae8fc;strokeColor#6c8ebf; vertex1 parent1 mxGeometry x520 y280 width120 height60 asgeometry/ /mxCell这里可以看到菱形判断节点使用了rhombus样式开始节点使用了绿色圆角矩形错误分支使用了红色系矩形。AI 不需要用户额外指定样式一切按照 Skill 里的规范自动完成。4.4 在 draw.io 中打开和验证生成 XML 文件后打开 app.diagrams.net 选择“文件 - 打开”找到docs/diagrams/order-payment.drawio.xml即可加载。打开后检查以下几点节点位置是否有重叠。判断节点的“是/否”连线是否正确。是否还有多余的空节点。整体布局是否纵向居中。如果发现布局不够理想只要拖动节点微调即可不需要重写 XML。5. 让 Skill 更贴合自己习惯的进阶配置5.1 增加“泳道图”支持泳道图是业务流程图里很常见的形式用来区分不同角色或系统的职责。在SKILL.md中增加一节### 泳道图模式 当用户要求“泳道图”“跨职能流程图”“带角色的流程图”时切换到泳道图模式 1. 根据用户描述识别出所有的角色/系统例如“用户”“前端”“后端”“支付系统”。 2. 为每个角色创建一个泳道容器使用 Draw.io 的 swimlane 样式。 3. XML 结构中泳道容器是一个 mxCell其 vertex1样式为 swimlane;html1;。 4. 所有属于该角色的节点其 parent 属性指向对应的泳道容器 id。 5. 泳道背景色统一使用浅灰 #f5f5f5标题文字加粗。实现时泳道容器的 XML 大致长这样mxCell iduserLane value用户 styleswimlane;html1;fillColor#f5f5f5;strokeColor#666666; vertex1 parent1 mxGeometry x40 y40 width760 height200 asgeometry/ /mxCell泳道模式的价值在于AI 会主动为节点分组而不是把所有节点堆在一个画布上。对于涉及多个系统的流程这个能力非常有用。5.2 增加不同模板文件如果经常生成算法流程图、状态机图可以为每种类型准备独立模板assets/templates/ ├── algorithm-flow.drawio.xml ├── branch-flow.drawio.xml ├── parallel-flow.drawio.xml ├── simple-flow.drawio.xml └── state-machine.drawio.xml在SKILL.md中补充类型判断逻辑### 流程类型与模板对应关系 | 用户需求 | 使用的模板文件 | | --- | --- | | 简单顺序流程 | simple-flow.drawio.xml | | 分支判断流程 | branch-flow.drawio.xml | | 并行任务流程 | parallel-flow.drawio.xml | | 算法/程序逻辑 | algorithm-flow.drawio.xml | | 状态机/状态流转 | state-machine.drawio.xml |这样 AI 在面对不同类型需求时能够快速载入对应模板大幅降低生成错误格式的概率。5.3 加入 PROGRESS.md 追踪机制对于较大的流程图任务可以在 Skill 目录里加入PROGRESS.md让 AI 分步骤记录进度。例如# 流程图生成进度 任务订单退款流程 状态进行中 - [x] 提取节点 - [x] 判断流程类型 - [ ] 生成 XML - [ ] 保存文件 - [ ] 校验文件是否可被 draw.io 打开好处是如果中间 AI 生成了不完整的文件可以根据进度记录定位到具体失败环节。也可以在一个任务里陆续追加节点让 AI 在已有 XML 文件的基础上修改而不是每次重画整张图。6. 常见问题与排查思路在使用流程图 Skill 的过程中会遇到一些比较典型的问题。这里整理成一张排查表。问题现象常见原因解决思路生成了 XML但 draw.io 打开后是空白XML 根节点结构不完整缺少mxCell id0和mxCell id1检查模板确认根节点完整节点都堆在左上角节点缺少mxGeometry坐标或者坐标设置不合理在生成规范中强调每个节点必须给出坐标判断节点只有一条出口AI 没有理解菱形节点需要“是/否”两个分支在 SKILL.md 注意事项中强制规定判断节点必须两个出口生成的 SVG 或 PNG 不是可编辑文件用户要求了图片格式或 AI 默认输出了图片在描述中明确要求“生成 Draw.io XML 可编辑文件”中文字符乱码XML 文件编码问题保存文件时使用 UTF-8 编码AI 没识别到 Skill目录放错或者 SKILL.md 的 frontmatter 不完整检查目录名、name字段、description描述是否清晰多张图风格不统一样式规则没有写入 SKILL.mdAI 自由发挥把颜色、字体、连线风格固化为表格约束流程复杂时 XML 太长没有拆分子图在 SKILL.md 中启用分组生成策略按业务模块拆分子流程6.1 排查 checklist如果遇到某个环节出错按顺序检查Skill 目录是否被 AI 工具正确扫描到查看工具的 Skill 列表。SKILL.md的 frontmatter 中name和description是否清晰。模板文件路径是否和SKILL.md中引用的一致。生成后的 XML 是否包含 Draw.io 默认的根节点结构。打开 XML 文件时是否出现 XML 解析错误提示。节点 id 是否有重复。连线是否通过source和target正确绑定。7. 最佳实践与工程建议7.1 每个 Skill 只干一件事这是 Agent Skill 设计里最重要的一条原则。不要试图写一个“万能 Skill”既要画流程图又要生成架构图又要写 SQL。单个 Skill 只聚焦一个任务description写得越精准AI 越容易在正确时机启用它。7.2 把模板当作代码来维护模板文件一旦确定最好纳入版本管理。每次修改模板时在 commit 信息里说明“修改了节点配色”“调整了画布大小”。如果生成结果出了问题可以快速回滚到上一个可用模板。7.3 先小样本验证再全量铺开第一次写好 Skill 后不要直接拿一个 20 步的大流程去测试。建议先用 3 个小型案例验证简单顺序流程。一个判断分支流程。一个并行流程。确认三个案例全部通过后再处理更复杂的场景。7.4 用示例沉淀团队规范如果团队里有多个人都在写流程图可以约定统一的示例文件。比如团队规定“流程图中的动词统一使用‘创建/更新/删除/通知/校验’”把这个写入SKILL.md。这样不同人产出的流程图在表达习惯上也能保持统一。7.5 善用 AI 的迭代能力Skill 不需要一次做到完美。实际使用中如果发现 AI 生成的节点命名不够统一就回到SKILL.md补充命名规范如果发现分支判断的标签不够清晰就补充标签规范。每次迭代都相当于给 Skill 打补丁越用越顺手。下面是一个迭代示例## 命名规范补充版 连接线标签必须使用动词或状态短语 - 判断节点出口必填是/否 - 处理步骤之间可省略标签 - 异常分支必须标注失败/超时/异常7.6 为每个流程图配一段说明文字生成 XML 的同时建议让 AI 输出一段简明总结。这段总结既可以放进代码注释也可以直接粘贴到需求文档里。在SKILL.md中约定### 输出格式 生成文件后必须输出以下内容 1. 流程图文件名。 2. 核心链路一句话概括。 3. 涉及的关键节点列表。 4. 图中有哪些分支或异常处理逻辑。这样文档和图形是配套的以后看图的人不会只看到一堆框和箭头不知道业务含义。8. 一个完整示例订单超时关闭流程为了帮助你把上面的内容串起来这里提供一个完整的示例结果。假设用户输入用 flowchart-master 画一个订单超时未支付自动关闭的流程Skill 驱动 AI 生成的order-timeout-close.drawio.xml文件核心内容如下简化节选mxfile hostapp.diagrams.net agentflowchart-master version24.0.0 diagram idorder-timeout-close name订单超时关闭 mxGraphModel dx800 dy600 grid1 gridSize10 guides1 tooltips1 connect1 arrows1 fold1 page1 pageScale1 pageWidth827 pageHeight1169 math0 shadow0 root mxCell id0/ mxCell id1 parent0/ mxCell idstart value用户下单 stylerounded1;whiteSpacewrap;html1;fillColor#d5e8d4;strokeColor#82b366; vertex1 parent1 mxGeometry x320 y40 width120 height40 asgeometry/ /mxCell mxCell idjudgeTimeout value是否超时未支付 stylerhombus;whiteSpacewrap;html1;fillColor#fff2cc;strokeColor#d6b656; vertex1 parent1 mxGeometry x300 y140 width160 height80 asgeometry/ /mxCell mxCell idcancelOrder value系统自动取消订单 stylerounded0;whiteSpacewrap;html1;fillColor#dae8fc;strokeColor#6c8ebf; vertex1 parent1 mxGeometry x310 y280 width140 height60 asgeometry/ /mxCell mxCell idsendNotify value发送取消通知 stylerounded0;whiteSpacewrap;html1;fillColor#dae8fc;strokeColor#6c8ebf; vertex1 parent1 mxGeometry x310 y400 width140 height60 asgeometry/ /mxCell mxCell idend value结束 stylerounded1;whiteSpacewrap;html1;fillColor#d5e8d4;strokeColor#82b366; vertex1 parent1 mxGeometry x320 y520 width120 height40 asgeometry/ /mxCell mxCell ide1 styleedgeStyleorthogonalEdgeStyle;rounded0;html1; edge1 parent1 sourcestart targetjudgeTimeout mxGeometry relative1 asgeometry/ /mxCell mxCell ide2 value是 styleedgeStyleorthogonalEdgeStyle;rounded0;html1; edge1 parent1 sourcejudgeTimeout targetcancelOrder mxGeometry relative1 asgeometry/ /mxCell mxCell ide3 styleedgeStyleorthogonalEdgeStyle;rounded0;html1; edge1 parent1 sourcecancelOrder targetsendNotify mxGeometry relative1 asgeometry/ /mxCell mxCell ide4 styleedgeStyleorthogonalEdgeStyle;rounded0;html1; edge1 parent1 sourcesendNotify targetend mxGeometry relative1 asgeometry/ /mxCell /root /mxGraphModel /diagram /mxfile关键检查点开始节点使用绿色圆角矩形。判断节点使用菱形出口带“是”标签。处理节点使用蓝色普通矩形。节点之间的连线使用正交连线样式保持横平竖直。整个图从用户下单到结束纵向排列没有交叉连线。如果业务中还需要处理“未超时”的情况就需要增加第二条出口连线标注“否”指向另一个分支节点。判断节点的英文judgeTimeout也方便后续在代码注释里引用。9. 后续还能怎么玩到目前为止我们的flowchart-masterSkill 已经可以稳定输出 Draw.io XML 文件了。如果你愿意再进一步可以给 Skill 添加更强大的能力。一个方向是自动生成流程图的同时生成配套的文字说明。让 AI 把流程拆成几个阶段每个阶段用一段话描述再把这段描述写入同一个 Markdown 文档。这样技术方案文档里的“流程图 流程说明”两个部分一次就能完成。另一个方向是让 Skill 自动对比新旧版本。当需求变更时把旧 XML 文件内容贴给 AI让它基于旧文件修改节点而不是重画。这需要把“基于已有 XML 修改”的规则明确写入SKILL.md。还有团队会为 Skill 增加术语表和缩写表比如“支付成功回调”统一简写为“支付回调”避免同一张图里出现多种说法。如果你此前一直被流程图的手工排版折磨可以试试这个思路。把SKILL.md和模板放进项目仓库下次画流程图时让 AI 先出第一版你只需要拖拽微调。这套方法不仅适用于流程图迁移到架构图、时序图、状态图原理完全一致。