畫流程圖這件事說簡單也簡單說麻煩也麻煩。簡單的是兩三步的流程隨手一畫就完事麻煩的是一旦流程超過十幾步或者需要在項目文檔、方案匯報、代碼注釋里反復維護同一張圖手動拖框、連箭頭、調整對齊真的會讓人懷疑自己在做什么重復勞動。這兩年 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 先出第一版你只需要拖拽微調。這套方法不僅適用于流程圖遷移到架構圖、時序圖、狀態圖原理完全一致。