tt-a1i/archify

Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams—self-contained HTML with motion and crisp export.

這是什麼

Archify 是一套給 Cursor、Claude Code、Codex CLI、OpenCode 等代理式開發工具使用的 Node.js 渲染與驗證系統。它的核心做法不是讓人手動畫圖，而是讓 agent 產生 typed JSON IR，再由 Archify 以可重現的方式編譯成 HTML/SVG。README 的定位很清楚：把 codebase 或系統描述轉成可展示、可互動的 system map，而且可以直接在聊天流程中完成。它支援 architecture、workflow、sequence、data flow、lifecycle 五種圖型，並提供 dark/light theme、視覺 preset、互動搜尋、路徑追蹤、角色比較、guided story，以及 PNG、SVG、WebM、1200×630 share card 等輸出。更重要的是，Archify 強調 typed JSON IR 與 deterministic checks，目標是讓圖不只是漂亮，而是可驗證、可分享、可反覆修改的技術溝通產物。

為什麼上榜

這週 Archify 以 50,750 stars、週增 17,190 stars 衝上週榜，熱點很明顯：AI coding agent 正在從「幫你寫程式」延伸到「幫你解釋系統」。README 反覆強調的亮點不是單純 text-to-diagram，而是把 agent 的判斷、結構化來源、驗證規則與可互動展示串在一起。相較於一般 Mermaid 風格工具，Archify 主打 layout judgment over generic auto-layout、atomic validation before delivery、failure repair receipt 與 last-good live preview；這些詞透露它想解決的是「圖看起來很好，但到底可不可信」的問題。它也清楚聲明自己不是 general-purpose drawing editor 或 Mermaid theme，而是把技術意圖轉成 communication artifact 的工具，定位相當鮮明。

適合誰，可以拿來做什麼

Archify 適合需要把複雜系統講清楚的工程團隊、架構師、技術寫作者，以及使用 agent 做 code review 或系統盤點的人。README 給出的情境包含：從一句系統描述產生 Browser → API → Redis → PostgreSQL 的架構圖；打開 repository 後請 agent 分析高階 runtime architecture；在 PR review 中比較 Before / Delta / After；或用 sequence、workflow、data flow、lifecycle 分別呈現 API 呼叫、CI/CD、資料流與狀態變化。它也適合用在 README、release、社群貼文或簡報，因為輸出是 單一自包含 HTML，還能匯出靜態或動態格式。上手門檻主要在於你要願意把需求描述清楚，並接受它的 typed source 與驗證流程；如果只想拖拉自由繪圖，README 也明說這不是它的目標。

上手

README 提供了多種 quick start。最短路徑是全域安裝 skill，也可以針對 Cursor 做非互動安裝，或不安裝直接試用。README 也提到 agent switcher 覆蓋 cursor、codex、claude-code、opencode；Raven 則以手動 ZIP 安裝方式處理。

npx skills add tt-a1i/archify -g

npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yes

npx skills use tt-a1i/archify@archify --agent codex

安裝後，可以直接在 agent chat 裡描述系統；若要帶來源證據，README 建議先開啟 repository，再要求 Archify 建立高階 runtime architecture diagram，並控制元件數量、primary path、外部依賴與 trust boundaries。

README 重點摘要

• Archify 將 agent 產生的 typed JSON IR 編譯成 HTML/SVG，支援五種圖型與多種互動檢視。
• 輸出可做展示與分享：單一 HTML、PNG、SVG、WebM、1200×630 share card，以及 route/reach share card。
• 它強調 validation before delivery：schema、layout、HTML/SVG、route、label clearance 等檢查通過後才交付。
• 互動能力包含搜尋節點、追蹤 upstream/downstream、directed route、semantic lens、guided story、presentation stage 與 stable hash links。
• README 明確界定邊界：Archify 不是通用繪圖編輯器，也不是 Mermaid theme，而是用來產生可信技術溝通 artifact 的工具。