前言¶
寫設計文檔、評審材料或運維 runbook 時，圖往往比長段文字更省事：系統邊界、調用順序、數據流向、狀態機，一張圖能說清的事不必反覆解釋。常見做法是手畫、用 draw.io，或先寫 Mermaid 再貼進 Markdown。Mermaid 快，但版式與「架構圖」審美不一定統一；純手繪又費時間。
下面介紹 SkillHub 上的 dynamic-archify（座標 @user_ab5ae6ee/dynamic-archify-unclecheng，當前版本 1.0.6）。它讓 Agent 根據你的描述或已有 Mermaid 代碼，生成帶 SVG 的獨立 HTML 圖頁，內置明暗主題切換，並支持導出爲 PNG、JPEG、WebP、SVG；頁面簡介還提到可導出 GIF 動圖。標籤 requires_api_key=false，安裝後無需額外 API Key。
這是什麼¶
dynamic-archify 是社區來源（community）、分類爲 design-media 的 Agent Skill，由 SkillHub 用戶 user_ab5ae6ee（頁面展示作者爲 Uncle城）發佈。定位可以概括爲：把「架構圖、流程圖、時序圖、數據流圖、生命週期/狀態圖」等需求，落成 archify 風格 的排版，輸出爲 單文件 HTML + SVG，而不是隻在對話裏貼一段無法直接交付的代碼塊。
與「只在聊天窗口裏生成 Mermaid 文本」相比，它強調可打開的成品頁面和一鍵導出位圖/矢量圖，更適合放進 Wiki、PPT 或評審附件。
核心功能¶
以下能力均來自 SkillHub 官方簡介與頁面說明，已覈對一致。
- 圖類型：架構圖、工作流、時序圖、數據流圖、生命週期/狀態圖；適用場景描述中還覆蓋基礎設施與雲架構、安全與網絡拓撲、審批與 CI/CD 流程、API 調用序列、數據管道與 ETL/ELT、PII 邊界與數據血緣、狀態機與狀態遷移等。
- 輸入方式：自然語言描述，或粘貼 Mermaid（支持 flowchart、sequenceDiagram、stateDiagram）；Skill 會按 archify 風格從零排版，也可用於「轉換/美化」已有 Mermaid。
- 交付物：獨立 HTML 文件，內嵌 SVG 圖形。
- 交互與導出：內置 深色/淺色主題 切換；一鍵導出 PNG / JPEG / WebP / SVG；中文簡介另提到 GIF 動圖導出。
- 依賴：requires_api_key=false，不強制配置第三方密鑰。
SkillHub 頁面統計（抓取時）：評分 100000，下載 2221 次；分類 design-media。
安裝與啓用¶
安裝流程以 SkillHub 通用文檔爲準：先確認本機是否有 skillhub CLI，再把技能裝到當前 Agent 實際讀取的 skills 目錄（裝錯目錄 Agent 不會加載）。
1、檢查或安裝 SkillHub CLI¶
command -v skillhub && skillhub --version
若未安裝，可按官方安裝腳本執行（完整安裝或僅 CLI，以 https://skillhub.cn/install/skillhub.md 爲準）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
2、安裝 dynamic-archify¶
將包名與 skills 目錄對應到你的環境。例如 Cursor 常用目錄爲 ~/.cursor/skills/：
skillhub install @user_ab5ae6ee/dynamic-archify-unclecheng --dir ~/.cursor/skills/
Claude Code 常用：~/.claude/skills/。Codex 常用：~/.codex/skills/ 或項目下的 .agents/skills/。其他客戶端路徑見 https://skillhub.cn/install/skillhub.md 第四節。
也可把下面提示發給已支持 Skill 安裝的 AI，由 Agent 按同一安裝文檔完成：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_ab5ae6ee/dynamic-archify-unclecheng`。
安裝後按你所用客戶端要求刷新或重啓，使新 Skill 被加載。
典型用法¶
Skill 的觸發條件寫在官方簡介中：當用戶要系統/基礎設施/雲/安全/網絡拓撲類架構圖，或工作流、審批、runbook、CI/CD、API 時序、數據管道、狀態機等圖，或要求轉換、美化 Mermaid 時，Agent 應啓用本 Skill。下面是可以直接復現的對話方式（輸出爲 HTML 文件路徑與導出操作，以 Agent 實際執行爲準）。
用自然語言從零畫圖
請用 dynamic-archify 畫一張三層 Web 架構：CDN、負載均衡、兩個應用實例、主從數據庫；標出 HTTPS 入口和只讀查詢走從庫。生成獨立 HTML，並說明如何導出 PNG。
粘貼 Mermaid 再美化
下面是一段 Mermaid flowchart，請用 archify 風格重新排版成獨立 HTML，保留節點語義，並支持明暗主題切換：
flowchart LR
A[Client] --> B[API Gateway]
B --> C[Service]
C --> D[(DB)]
時序與狀態類
用 sequenceDiagram 描述：用戶登錄 → 鑑權服務校驗 → 簽發 token → 業務 API 帶 token 訪問。輸出 HTML，並導出 SVG。
訂單狀態機：待支付、已支付、發貨中、已完成、已取消；標出合法遷移。用 stateDiagram 或自然語言均可，交付 HTML。
經過上面的步驟，你應得到可在瀏覽器打開的 HTML；在頁面內切換主題、選擇 PNG/JPEG/WebP/SVG（及簡介中的 GIF，若該版本提供）完成導出。
適用場景與注意¶
適合誰：需要快速出「能交差」的架構與流程圖、又不想從零調 Mermaid 主題和佈局的開發者、架構師、技術寫作者；已有 Mermaid 草稿、希望統一成 archify 視覺風格時也可用。
注意：
- 複雜圖仍建議在提示裏寫清邊界、組件名與數據方向，減少 Agent 漏畫或合併節點。
- Mermaid 僅官方寫明支持 flowchart / sequenceDiagram / stateDiagram；其他 Mermaid 圖種是否兼容需以實際生成爲準。
- 安裝目錄必須對應當前 Agent（見
skillhub install --dir）；官方文檔提醒裝到默認./skills/可能不會被識別。 - 頁面統計與版本會隨 SkillHub 更新變化，安裝前可在技能頁確認版本號（當前 1.0.6）。
結尾¶
dynamic-archify 把架構、流程、時序、數據流與狀態類圖示，收斂爲可分享的 HTML/SVG 成品，並附帶主題切換與多格式導出；輸入可以是口語化描述，也可以是 Mermaid 片段。需要安裝或查看說明時，可打開 SkillHub 技能頁：
- https://www.skillhub.cn/skills/user_ab5ae6ee/dynamic-archify-unclecheng
- https://api.skillhub.cn/user_ab5ae6ee/dynamic-archify-unclecheng
