前言¶
系統設計和評審裏，架構圖往往要反覆改：模塊一增刪，就要在 draw.io、PPT 或 Mermaid 裏對齊佈局和連線。若你更希望 Agent 根據自然語言描述直接給出一份能在瀏覽器裏打開的成品圖，而不是先寫 DSL 再渲染，SkillHub 上的「架構圖生成器」走的是另一條路徑——輸出單個 .html 文件，雙擊即可查看。
下面介紹這個 Skill 的定位、能力與安裝方式。
這是什麼¶
架構圖生成器（座標 @user_7f8c14e8/architecture-diagram）是 SkillHub 社區 Skill，分類爲 design-media，當前版本 1.0.0，發佈者爲 user_7f8c14e8（SkillHub 頁面標註作者爲超哥CHG）。它面向「畫架構圖、系統架構、模塊關係圖」等需求：由 Agent 按 Skill 內 SKILL.md 的約定生成 HTML，而不是依賴外部繪圖 API。
Skill 標籤標明 requires_api_key=false，安裝後無需額外配置 API Key 即可使用。
核心功能¶
依據 SkillHub 官方簡介，已覈實的能力包括：
- 觸發場景：當用戶要求畫架構圖、系統架構、模塊關係圖，或提到「畫個圖」「架構圖」「系統圖」「模塊圖」等表述時，Agent 應啓用該 Skill。
- 交付物：單個
.html文件，可在瀏覽器中直接打開。 - 視覺風格：暖色極簡，參考 Paper.design 風格。
- 圖元支持：分層、分組卡片、箭頭連接、用戶角色、圖例等常見架構圖元素。
安裝與啓用¶
Skill 遵循通用 SKILL.md 格式。在 SkillHub 上安裝前，需先有 skillhub CLI；官方安裝說明見 SkillHub 安裝與優先源配置。
檢查或安裝 CLI¶
先確認本機是否已安裝 skillhub：
command -v skillhub && skillhub --version
若未安裝，可使用官方腳本（完整安裝含 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/，Agent 可能無法識別。
skillhub install user_7f8c14e8/architecture-diagram --dir <skills 目錄>
各客戶端常用 skills 路徑（摘自官方安裝文檔）：
| 環境 | skills 目錄 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或項目下 .agents/skills/ |
| Windsurf | ~/.codeium/windsurf/skills/ 或 .windsurf/skills/ |
也可將下面提示發給支持 Skill 的 AI，由其按安裝文檔完成安裝：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_7f8c14e8/architecture-diagram`。
安裝完成後，按你所用 Agent 的說明刷新或重啓，使新 Skill 生效。
典型用法¶
啓用 Skill 後，用自然語言描述系統邊界與模塊關係即可；Agent 會按 Skill 規則生成 HTML 文件。下列表述與官方觸發說明一致，可作爲起點：
幫我畫一張電商系統的架構圖：用戶通過 Web 訪問 API 網關，後面是訂單、庫存、支付三個服務，底層是 MySQL 和 Redis。需要分層和圖例。
畫個模塊關係圖，說明前端、BFF、微服務 A/B 之間的調用方向，用分組卡片表示各層。
生成完成後，在 Agent 給出的路徑找到 .html，用瀏覽器打開覈對佈局與連線是否符合預期；需要調整時，繼續用對話補充模塊或改關係，讓 Agent 更新同一文件或重新生成。
適用場景與注意¶
適合誰
- 需要快速出圖做評審、文檔附錄或內部分享，且接受 HTML 作爲交付格式。
- 希望少維護 Mermaid/PlantUML 源碼，由 Agent 根據描述直接排版。
限制與注意
- 輸出是靜態 HTML，複雜交互或與企業製圖規範強綁定的模板，仍需人工或專業工具二次處理。
- 圖的質量取決於你對分層、模塊、連線的描述是否清晰；Skill 不提供獨立繪圖服務，邏輯在 Agent 按
SKILL.md執行。 - 安裝路徑必須對準當前 Agent 的 skills 目錄，否則 Skill 不會加載。
SkillHub 頁面統計（以抓取資料爲準）：評分 100000，下載 22524，安裝 194；來源爲 community。
結尾¶
架構圖生成器把「描述系統結構」和「得到可打開的架構圖」收成一步：無 API Key、單文件 HTML、常見架構圖元素齊全。若你在 Cursor 等環境裏經常要寫系統圖，可先按上文安裝 @user_7f8c14e8/architecture-diagram，再用對話迭代圖面。
官方入口：
- SkillHub 展示頁：https://www.skillhub.cn/skills/user_7f8c14e8/architecture-diagram
- API 座標頁：https://api.skillhub.cn/user_7f8c14e8/architecture-diagram
