前言¶
寫設計文檔或評審材料時，架構圖、拓撲圖、流程圖往往要反覆改：先在腦子裏對齊結構，再切到 Draw.io 或 Mermaid 編輯器裏手調節點和連線。若希望對話裏直接產出可繼續編輯的圖源，並把「畫什麼」和「怎麼畫」交給 Agent 按規範執行，就需要一套圍繞圖表工具鏈的 Skill，而不是每次從零口述排版細節。
下面介紹 SkillHub 上的 Diagram生成器（座標 @u_8ee34d77/diagram-generator），它面向 Draw.io、Mermaid、Excalidraw 等格式的生成與編輯，並覆蓋網絡拓撲、系統架構、流程圖、UML 等常見類型。
這是什麼¶
Diagram生成器 是社區來源（community）的 Agent Skill，當前版本 1.1.7，由發佈者 u_8ee34d77 維護，在 SkillHub 分類爲 design-media。
一句話定位：通過工具在對話中生成與編輯 Draw.io / Mermaid / Excalidraw 圖表，並支持自動化配置與較靈活的參數設置。官方說明中標註 requires_api_key=false，即不依賴額外 API Key 即可按 Skill 約定使用。
它主要解決的是：在需要效率、自動化、批量處理或工作流優化時，把「出圖」納入 Agent 能力，而不是每次單獨打開外部編輯器從零搭畫布。官方也明確寫出：不適用於需要人工創意判斷的任務；更適合獨立開發者、企業團隊以及自動化工作流場景。
核心功能¶
以下能力均來自 SkillHub 頁面與抓取資料中的簡介，未展開的實現細節以安裝後的 SKILL.md 爲準。
- 多格式圖表：支持 Draw.io、Mermaid、Excalidraw 的生成與編輯。
- 圖表類型：網絡拓撲、系統架構、流程圖、UML 等常見技術圖示。
- 自動化與參數：支持自動化配置和靈活的參數設置，便於在不同應用場景下複用同一套出圖流程。
- 使用邊界（Use when）：在需要提升效率、自動化流程、批量處理、工作流優化時使用；避免用於強依賴主觀創意判斷的出圖任務。
安裝與啓用¶
SkillHub 提供兩種常見方式：讓 AI 按官方安裝文檔操作，或在本機用 skillhub CLI 安裝到當前 Agent 的 skills 目錄。安裝目錄必須指向 Agent 實際讀取的 skills 路徑，否則技能不會被識別。
方式一：提示詞安裝¶
將下面意圖發給已支持 Skill 安裝的 AI（文案來自 SkillHub 技能頁）：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@u_8ee34d77/diagram-generator`。
AI 會按 SkillHub 安裝與優先源配置 檢查 CLI、選擇 skills 目錄並完成安裝。
方式二：skillhub CLI¶
先確認是否已安裝 CLI：
command -v skillhub && skillhub --version
未安裝時可按官方文檔執行完整安裝（需聯網）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
安裝技能時務必帶上 --dir，例如 Cursor 常用路徑爲 ~/.cursor/skills/：
skillhub install @u_8ee34d77/diagram-generator --dir ~/.cursor/skills/
其他客戶端的 skills 目錄以 官方安裝文檔 爲準，例如 Claude Code 爲 ~/.claude/skills/，Codex 爲 ~/.codex/skills/ 或項目下的 .agents/skills/。各環境路徑不同，覈實不到本機佈局時，優先用方式一讓 Agent 按文檔定位目錄。
經過上面的步驟，重啓或刷新 Agent 後，對話中即可在符合 Skill 觸發條件時調用 Diagram生成器。
典型用法¶
公開資料未附帶逐步截圖示例，可復現的用法可歸納爲：安裝 Skill 後，在對話中用自然語言描述圖表類型、要素與關係，並指明目標格式（Draw.io / Mermaid / Excalidraw）或圖示種類（如架構圖、拓撲、流程圖、UML）。
示例意圖（需根據你項目真實組件名替換佔位內容）：
請用 Mermaid 畫一張三層 Web 架構流程圖：客戶端、API 網關、業務服務、數據庫，並標出主要請求方向。
根據下面模塊列表生成 Draw.io 可編輯的網絡拓撲草圖，包含防火牆、負載均衡與兩臺應用節點。
把這段時序說明整理成 UML 風格的 Excalidraw 草圖，便於評審會上修改。
Agent 會按 Skill 內定義的工具與參數規則出圖或返回可導入對應編輯器的源碼；具體工具名、導出字段以安裝包中的 SKILL.md 爲準。
適用場景與注意¶
適合
- 設計文檔、RFC、運維手冊中需要快速產出架構圖、拓撲圖、流程圖或 UML。
- 同一類圖要批量生成或隨需求變更反覆迭代，希望減少在多個編輯器間複製粘貼。
- 團隊已在 Cursor、Claude Code 等環境使用 Skills，希望把出圖納入統一工作流。
注意
- 官方明確不適用於依賴人工創意判斷的製圖任務；版式、美學與信息層次仍需人審。
- 分類爲 design-media，與「純代碼生成」類 Skill 側重點不同，預期產出是圖表資產而非業務邏輯代碼。
- SkillHub 抓取數據顯示：評分 100000，下載 77 次，安裝計數 0（統計隨平臺更新變化，以技能頁爲準）。
- 簡介中的「適支持」等爲原文表述，不影響對格式與場景的理解，細節以 v1.1.7 包內說明爲準。
結尾¶
Diagram生成器把 Draw.io、Mermaid、Excalidraw 上的生成與編輯能力收攏到 Agent Skill 裏，適合在自動化與工作流場景下出技術圖，同時劃清了不適合強創意判斷的邊界。安裝與詳情見 SkillHub：
- 技能頁：https://www.skillhub.cn/skills/u_8ee34d77/diagram-generator
- API 座標頁：https://api.skillhub.cn/u_8ee34d77/diagram-generator
