前言¶
設計評審、接口對齊或寫技術文檔時，往往需要系統架構圖、業務流程圖或時序圖。常見做法是切到 draw.io、PlantUML 或 Mermaid Live，手工改節點和連線，再貼回 Markdown 或聊天窗口。對話裏若能讓 Agent 按同一套規範出圖，並支持內聯預覽或 Mermaid 源碼，往返會少很多。下面介紹 SkillHub 上的「架構圖與流程圖繪製專家」，以及如何在 Cursor 等環境裏安裝與觸發。
這是什麼¶
「架構圖與流程圖繪製專家」是面向開發場景的 Agent Skill，座標爲 @user_04c33885/diagram-builder，當前版本 1.0.3，來源爲 community，發佈者爲 user_04c33885，分類爲 dev-programming。SkillHub 頁面標註 requires_api_key=false，安裝後無需額外 API Key。
它解決的是：在對話中根據自然語言描述，生成多種技術向圖表，並以 show_widget 內聯 SVG 或 Mermaid 代碼塊 兩種方式交付，便於在支持 Skill 的客戶端裏直接查看或二次編輯。
核心功能¶
依據 SkillHub 簡介，該 Skill 覆蓋的圖表類型包括：
- 系統架構圖、微服務架構
- 網絡拓撲圖
- 業務流程圖、數據流圖
- 時序圖、狀態機、ER 圖
輸出形態有兩類：
- show_widget 內聯 SVG：適合在支持 widget 渲染的界面裏直接看圖。
- Mermaid 代碼塊：適合放進倉庫文檔、Wiki 或 CI 可讀的 Markdown，便於版本管理與 diff。
觸發上，官方列出的關鍵詞包括：架構圖、流程圖、時序圖、狀態機、拓撲圖、ER圖、數據流圖，以及英文 draw、diagram、flowchart、architecture。在對話裏帶上圖種或上述詞，更容易命中該 Skill 的繪製流程。
安裝與啓用¶
SkillHub 推薦兩種方式：把安裝提示發給 AI，或使用 skillhub CLI。安裝前需確認 CLI 是否可用：
command -v skillhub && skillhub --version
若未安裝，可按 SkillHub 安裝文檔執行完整安裝（CLI + 默認 Skill）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
僅安裝 CLI 時：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
安裝本 Skill 時，必須用 --dir 指向當前 Agent 的 skills 目錄；默認裝到 ./skills/ 時，部分客戶端不會自動加載。官方頁面給出的安裝提示爲：
請根據 https://skillhub.cn/install/skillhub.md，安裝
@user_04c33885/diagram-builder。
CLI 安裝示例（將 <skills 目錄> 換成你當前環境的路徑）：
skillhub install user_04c33885/diagram-builder --dir <skills 目錄>
常用客戶端的 skills 目錄（來自 SkillHub 安裝文檔）：
| 客戶端 | skills 目錄 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或項目下 .agents/skills/ |
| Windsurf | ~/.codeium/windsurf/skills/ 或 .windsurf/skills/ |
裝到對應目錄後，按你所用客戶端的說明刷新或重啓 Agent，使 Skill 生效。Codex CLI、Claude Code 與 Cursor 的差異主要在 skills 路徑 與是否需重啓；安裝命令本身一致，均爲 skillhub install … --dir …。
典型用法¶
官方資料未附帶固定示例倉庫，用法以對話驅動爲主。可復現的起步方式如下。
- 確認 Skill 已安裝到當前 Agent 的 skills 目錄並完成加載。
- 在對話中說明要畫的圖種與內容，並帶上觸發詞，例如：「畫一張 微服務架構圖，包含網關、訂單服務、支付服務」或「用 時序圖 描述登錄流程」。
- 根據 Agent 與客戶端能力，結果可能是 Mermaid fenced code block（可複製到文檔），或通過 show_widget 渲染的 內聯 SVG。
若你需要 Mermaid 源碼長期維護，可在同一句裏明確要求「輸出 Mermaid 代碼塊」；若客戶端支持 widget，可說明希望內聯預覽。具體排版與語法細節由 Skill 內 SKILL.md 約束，以安裝後的本地 Skill 文件爲準。
適用場景與注意¶
適合誰： 需要在技術討論、設計說明或文檔草稿中快速出圖的開發者；已使用 Cursor、Claude Code、Codex 等支持 Skill 的環境，且希望減少在專用繪圖工具與編輯器之間來回切換。
限制與注意：
- 圖表質量依賴你對邊界、組件名稱與關係的描述是否清楚；複雜拓撲建議分步補全，而不是一次堆過多節點。
- show_widget 與 Mermaid 是否都能正常展示，取決於當前客戶端是否支持對應渲染；不支持 widget 時，以 Mermaid 代碼塊爲主更穩妥。
- SkillHub 頁面統計（截至資料抓取）爲評分 100000、下載 78239；社區來源 Skill 的版本爲 1.0.3，升級可用
skillhub對同一座標 reinstall/update（以 SkillHub 文檔爲準）。
結尾¶
「架構圖與流程圖繪製專家」把架構、流程、時序、狀態機、ER 等常見技術圖種收斂到一個 Skill 裏，並統一兩種交付方式：內聯 SVG 與 Mermaid。若你已在用 SkillHub 管理 Agent 技能，可按上文路徑安裝 @user_04c33885/diagram-builder，在對話裏用官方關鍵詞觸發即可。
- SkillHub 頁面：https://www.skillhub.cn/skills/user_04c33885/diagram-builder
- 技能 API 座標頁：https://api.skillhub.cn/user_04c33885/diagram-builder
- 安裝說明：https://skillhub.cn/install/skillhub.md
