前言¶
寫設計文檔或評審材料時，圖往往比長段文字更省事：系統邊界、服務依賴、業務流程、數據走向，一張圖能說清大半。常見做法是切到 draw.io、PlantUML 或 Mermaid 在線編輯器，畫完再貼回 Markdown 或 Wiki，上下文要在工具與對話之間來回搬。
下面介紹的是 SkillHub 上的「架構圖與流程圖繪製 Skill」（@user_60120345/diagram-builder-pro）。它把「按自然語言描述生成各類技術圖」收進 Agent 的 Skill 流程，並支持內聯 SVG（show_widget）與 Mermaid 代碼塊兩種呈現方式，便於在支持對應能力的客戶端裏直接查看或二次編輯。
這是什麼¶
一句話定位：面向開發場景的專業架構圖與流程圖繪製 Skill，版本 1.0.0，座標 @user_60120345/diagram-builder-pro，來源爲 community，分類 dev-programming，發佈者爲 user_60120345（SkillHub 頁面展示作者爲紫雲墨竹）。標籤 requires_api_key=false，表示按官方標註無需額外 API Key。
它要解決的是：在 Agent 會話裏用關鍵詞觸發，由模型按 Skill 約定生成系統架構、微服務、拓撲、業務流程、數據流、時序、狀態機、ER 等常見技術圖，而不是每次手寫 Mermaid 或換專用繪圖工具。
核心功能¶
以下能力均來自 SkillHub 簡介與元數據，未單獨展開的實現細節不在本文臆測。
圖類型覆蓋
- 系統架構圖、微服務架構
- 網絡拓撲圖
- 業務流程圖、數據流圖
- 時序圖、狀態機
- ER 圖
兩種輸出方式
show_widget內聯 SVG 渲染：在支持 widget 展示的環境中，以 SVG 形式內聯呈現圖形。- Mermaid 代碼塊：輸出標準 Mermaid 文本，便於複製到文檔、CI 或支持 Mermaid 的渲染器。
觸發關鍵詞
在對話中涉及下列詞時，更易匹配本 Skill：架構圖、流程圖、時序圖、狀態機、拓撲圖、ER圖、數據流圖，以及英文 draw、diagram、flowchart、architecture。
社區數據（SkillHub 抓取，2026-10-20）
- 評分：100000
- 下載：4995
安裝與啓用¶
本 Skill 遵循通用 SKILL.md 格式。官方頁面給出的安裝方式是：讓 AI 參照 SkillHub 安裝文檔，安裝座標 @user_60120345/diagram-builder-pro。
安裝文檔地址：
https://skillhub.cn/install/skillhub.md
若本機已安裝 skillhub CLI，可按文檔第三節將技能裝到當前 Agent 實際使用的 skills 目錄（裝錯目錄會導致 Agent 識別不到，文檔要求安裝時必須使用 --dir）：
command -v skillhub && skillhub --version
未安裝 CLI 時，文檔提供一鍵安裝（完整安裝含 CLI 與默認 Skill）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
安裝本 Skill 示例（將 <skills 目錄> 換成你當前客戶端的路徑）：
skillhub install @user_60120345/diagram-builder-pro --dir <skills 目錄>
文檔列出的常用 skills 目錄包括：
- Claude Code：
~/.claude/skills/ - Cursor：
~/.cursor/skills/ - Codex：
~/.codex/skills/或項目下的.agents/skills/
不同客戶端路徑以你實際環境爲準；安裝後若客戶端要求重啓或重新加載 Skill，按其產品說明操作。
也可將下面提示詞發給已具備 Skill 安裝能力的 Agent（與 SkillHub 頁面一致）：
請根據 https://skillhub.cn/install/skillhub.md，安裝 @user_60120345/diagram-builder-pro。
典型用法¶
公開頁面未附帶完整 SKILL.md 正文，因此下面只描述可復現的交互方式，不編造具體 Mermaid 或 widget payload。
- 確認 Skill 已裝入當前 Agent 的 skills 目錄，並在對話裏使用上文的觸發詞或明確說明圖類型（例如「畫一張微服務架構圖」「用時序圖描述下單流程」）。
- 用結構化自然語言交代要素：參與方（服務/模塊/用戶）、關係（調用、依賴、數據流）、可選分區（VPC、可用區等）。Skill 的職責是把描述落成圖，而不是替你補全未給出的業務事實。
- 按客戶端能力選擇呈現：需要內聯預覽時，依賴 Agent 對
show_widget的支持；需要進倉庫文檔時，可要求輸出 Mermaid 代碼塊，再粘貼到 README 或設計 doc。
若安裝後無響應，優先檢查 --dir 是否指向當前客戶端的 skills 目錄，以及 Skill 是否已加載。
適用場景與注意¶
適合誰
- 需要在評審、設計說明、 onboarding 文檔裏快速出圖的開發者
- 已在 Cursor、Claude Code、Codex 等支持 Skills 的環境裏工作，希望減少「對話 → 外部繪圖 → 再貼回」切換的人
限制與注意
- 圖的質量取決於你對邊界、命名和關係的描述是否清楚；Skill 不能替代架構決策本身。
show_widget與 Mermaid 的可見效果因客戶端而異，以你使用的 Agent 產品爲準。- 元數據中的安裝計數等字段會隨 SkillHub 更新變化，以商店頁面爲準。
結尾¶
「架構圖與流程圖繪製 Skill」把多類技術圖繪製收進 Agent Skill，支持 show_widget 內聯 SVG 與 Mermaid 代碼塊，並通過中英文關鍵詞觸發，適合在寫文檔和溝通設計時快速出圖。
- SkillHub 頁面：https://www.skillhub.cn/skills/user_60120345/diagram-builder-pro
- API 座標頁：https://api.skillhub.cn/user_60120345/diagram-builder-pro
