系統架構圖 我一筆都沒畫｜Archify 安裝與指令實測

⏱️ 一分鐘教你一個 AI 工具技巧｜第 14 集 · 看全系列 ›

更新時間：2026.10.22（Windows 實測）

Archify 是 Claude 的一個 Skill，裝好之後貼一段指令，它就會去讀你的程式碼，自己畫出可以點、可以換風格、可以匯出的系統架構圖。

下面是我 2026.10.22 在 Windows 上實際操作的安裝步驟與指令，你可以用同樣的指令，拿自己的專案試試。

📱 這系列的 Reel 都在 IG｜@pinkjhs.life，下一集不漏接 立即追蹤 IG ›

📑 快速導覽目錄

• 🧩 ① 怎麼安裝：一行指令，裝進 Claude Code
• 📋 ② 指令懶人包：5 段直接複製
• ✨ ③ 效果展示：Archify 畫出來的架構圖
• ❓ 常見問題 FAQ
• ⏱️ 一分鐘版
• 💡 結語：一行裝好，之後都是用講的

---

🧩 ① 怎麼安裝：一行指令，裝進 Claude Code

Archify 是 Skill，要在 Claude Code 裡用。所以安裝前，電腦要有兩樣東西：Claude Code，以及 Node.js（安裝指令裡的 npx 是它附的）。我的電腦這兩樣本來就有，這次沒有從零重裝。

第 1 步：貼安裝指令

打開終端機（我用的是 Windows 的命令提示字元），貼這一行：

npx skills add tt-a1i/archify -g

最後的 -g 是裝成全域，裝一次，之後每個專案都能用。第一次跑，畫面會先問要不要安裝 skills 這個小工具（下圖最後一行），按 Enter 或輸入 y 就好。

圖說：我貼的安裝指令。第一次執行會先問「Ok to proceed? (y)」。資料夾路徑已遮。

第 2 步：選 Claude Code，一路 Enter

接著會出現安裝精靈，照這個順序走：

1. 選 agent：畫面問「Which agents do you want to install to?」。直接打 claude，清單會篩出 Claude Code；用方向鍵移到那一行，按空白鍵勾起來，再按 Enter。
2. 安裝方式：用預設的 Symlink（畫面標 Recommended），Enter。
3. 看摘要：摘要會寫 ~\.agents\skills\archify，下面一行 symlink → Claude Code，就是已經連到 Claude Code。
4. 確認安裝：最後問要不要繼續，預設是 Yes，Enter，出現 Installation complete 就裝好了。

圖說：安裝精靈的畫面：選 agent、安裝方式、摘要（symlink → Claude Code），最下面是安全評估。

摘要下面還有一塊「Security Risk Assessments」，列出三家的安全評估，怎麼看寫在 FAQ 的第 4 題。

第 3 步：在哪裡用、怎麼確認裝好

在哪裡用：我只試過 Windows 上的 Claude Code。Mac、Claude 桌面版、Claude 網頁版我沒試過，所以不寫步驟（見 FAQ 第 2 題）。

怎麼確認裝好：在終端機輸入 claude 啟動 Claude Code，再輸入 /skills，清單上方有搜尋框，打 archify 找得到就是裝好了。另一個更直接的方法：照下一章的指令叫它畫圖，畫面會出現 Skill(archify) 和 Successfully loaded skill，代表它真的載入並用到了。

圖說：貼上指令後，Claude Code 載入 Archify 的畫面。上面兩行是我貼的指令（輸出路徑已遮），下面的 Skill(archify) 就是它被用到的證明。

---

📋 ② 指令懶人包：5 段直接複製

把〇〇和「你的…」換成自己的東西。第 3 段是我當時貼給 Claude Code 的指令，只把我的資料夾名、輸出路徑和專案裡的敏感檔名換成範本。

① 安裝（終端機，只做一次）

npx skills add tt-a1i/archify -g

② 啟動 Claude Code，把兩個資料夾一起帶進去

cd "你的前端資料夾"
claude --add-dir "..\你的後端資料夾"

前提是前後端資料夾在同一層（上一層資料夾下並排）。專案只有一個資料夾的話，cd 進去再輸入 claude 就好，不用 --add-dir。

③ 請它用 archify 畫圖（貼進 Claude Code）

請分析 〇〇前端資料夾 和 〇〇後端資料夾 兩個資料夾，以程式碼為依據，用 archify 畫一張高層次的系統架構圖。請不要讀取或顯示 .env、金鑰和〇〇（換成你專案裡不想讓它看的檔案）。輸出成 HTML，存到 C:\Users\你的使用者名稱\Downloads\architecture.html。

幾個寫法可以照抄：說清楚「哪幾個資料夾」、「以程式碼為依據」（它才不會憑想像畫）、「用 archify」（指名這個 Skill）、「不要讀什麼」，最後指定輸出成 HTML 和存放位置。我原指令裡的「訂位 PDF」是我專案裡的敏感檔，你換成自己的。

④ 打開畫好的圖（命令提示字元）

start "" "C:\Users\你的使用者名稱\Downloads\architecture.html"

直接雙擊那個 HTML 檔，用瀏覽器打開也一樣。

⑤ （選用）畫圖前，先看專案裡有哪些 .env 檔

dir /a /b .env* ..\你的後端資料夾\.env*

這行只會列出檔名，不會顯示內容。知道有哪些 .env，才知道指令裡要叫它別碰哪些。

---

✨ ③ 效果展示：Archify 畫出來的架構圖

我拿八月歐遊時做的旅遊規劃網頁「沿途 Alongway」來試。它是一個手機網頁（前端）加一支後端，分成兩個資料夾，行程、景點、記帳都存在 Notion。

圖說：左：旅遊規劃網頁的地圖與景點清單；右：行程總覽頁。這就是被讀程式碼的那個專案。

我貼了上一章的第 3 段指令，等它讀完兩個資料夾，約 3 分鐘（依錄影估算）就出了這張圖：

圖說：Archify 畫出的架構圖。從左到右是：使用者、前端、後端，再連到 Notion 資料庫和幾個外部服務；前端還有一塊離線優先的本機儲存。圖上的名稱是它從程式碼裡找到的（見 FAQ 第 8 題）。

圖裡每個方塊都標了用途與連線方式，我的 Notion 是「唯一持久資料層」這件事，也是它讀完程式碼自己整理出來的，我沒有事先告訴它。

點哪個方塊，相關的線就亮

打開 HTML 之後，滑鼠點某個方塊，跟它沒關係的方塊會變淡，只剩相關的方塊和連線亮著。下圖我點的是 Anthropic Claude，可以一眼看出旅程問答這條功能會經過哪些地方。

圖說：點 Anthropic Claude 方塊的畫面：其他方塊淡掉，只剩相關的連線亮著。

同一張圖，4 種風格

右上角的「視覺風格」選單有 4 種：經典、訊號流、藍圖、編輯風格。同一份內容，換風格不用重畫，點一下就換。

圖說：視覺風格選單。選單旁邊還有淺色、深色的切換開關。

圖說：同一張圖換風格：左邊是編輯風格，右邊是藍圖風格。

存下來：PNG、SVG、動畫都能匯出

右上角的「匯出」選單可以複製圖表，也能存成 PNG、JPEG、WebP，或是向量的 SVG（自動、淺色、深色三種）和 6 秒的 WebM 動畫。要放進簡報或文章，用 SVG 放大不會糊。

圖說：匯出選單。各項目的格式以你打開的版本為準（見 FAQ 第 10 題）。

最後提醒一句：圖是 Claude 讀程式碼畫的，打開之後把重要的幾條線自己對一遍再拿去用（見 FAQ 第 9 題）。

---

❓ 常見問題 FAQ

Archify 要付費嗎？

Archify 的 GitHub 頁面寫的是 MIT 授權，可以自由使用與修改（2026.10.22 查 tt-a1i/archify）。要用它的 Claude Code 本身的使用條件，請看 Anthropic 官方說明。

一定要用 Claude Code 嗎？Mac 可以嗎？

我這次是在 Windows 的 Claude Code 裝與用的，其他環境我沒試過，不能保證一樣。Archify 的 GitHub 說明頁寫它也支援 Cursor、Codex CLI、OpenCode（2026.10.22 查）；Mac、Claude 桌面版、Claude 網頁版我都沒試，所以不寫步驟。

貼了安裝指令，說找不到 npx 怎麼辦？

npx 是 Node.js 附的指令，所以電腦要先裝 Node.js（到 nodejs.org 下載）。我的電腦本來就有 Node.js，這一步沒有從零實測；裝好之後把終端機關掉重開，再貼一次安裝指令。

安裝時出現的「安全評估」要怎麼看？

安裝畫面最後會列出 Gen、Socket、Snyk 三家的評估。我這次看到的是 Gen 標 Safe、Socket 標 1 alert、Snyk 標 Low Risk，畫面也附了 skills.sh 的詳細頁連結。那 1 個 alert 具體是什麼，我沒有深入查；想確認的話，先點進詳細頁看，再決定要不要裝。

怎麼確認 Archify 真的裝好了？

在 Claude Code 輸入 /skills，清單上方有搜尋框，打 archify 找得到就是裝好了。我這次是直接叫它畫圖，畫面出現 Skill(archify) 和 Successfully loaded skill，才確定它被載入並用到。

前端、後端是兩個資料夾，怎麼一起讀？

我是先 cd 進前端資料夾，用 claude --add-dir 把後端資料夾一起帶進去（指令在懶人包第 2 段），再在畫圖指令裡把兩個資料夾名都寫進去。另外，Claude 在那次的回報裡說，Archify 的程式碼連結一次只能連到一個 repo（官方頁只寫程式碼連結固定在同一個公開 commit，沒有明說只能連一個 repo；「一次只能連一個」是 Claude 當時的說法），所以只有後端的方塊連得到程式碼行號，前端的檔案路徑改列在圖下面的卡片裡。

它會不會讀到 .env 或金鑰？

我在畫圖指令裡寫了「請不要讀取或顯示 .env、金鑰和訂位 PDF」，也另外用 dir 指令只列出 .env 的檔名確認有哪些（指令在懶人包第 5 段）。我沒有逐一檢查它實際讀了哪些檔，所以專案裡有金鑰、帳單這類檔案時，建議照樣在指令裡寫明不要讀，再自己確認一次。

圖上的名字跟我的專案名稱不一樣？

圖上的名稱是 Claude 從程式碼裡找到的名字。我的專案對外叫「沿途 Alongway」，但兩個資料夾的程式碼裡都沒有這個名字，所以圖上寫的是程式碼裡的內部名稱。想用自己的名字，可以在畫圖指令裡多寫一句「圖上的專案名稱請用〇〇」；這句我沒有實測。

畫出來的圖一定是對的嗎？

不一定。圖是 Claude 讀程式碼之後畫的，我這次的回報裡它自己寫了「沒有親眼看過畫出來的圖」，並提到從後端連到 Notion 的一條線轉了幾個彎，只是外觀、意思是對的。建議打開之後，把重要的幾條線對照自己的程式碼看一遍，再拿去用。

匯出可以存成什麼格式？跟官方頁寫的一樣嗎？

我畫面上的「匯出」選單有：複製圖表（複製 PNG 到剪貼簿）；圖片 PNG、JPEG、WebP；向量與動畫 SVG（自動、淺色、深色三種）和 WebM（6 秒動畫）。Archify 的 GitHub 說明頁列的是 PNG、WebP、JPG 長圖與列印成 PDF 等，沒有特別列出 SVG（2026.10.22 查）；版本不同選單可能不同，以你打開的畫面為準。

風格和淺色、深色怎麼切換？

右上角有「視覺風格」選單，有經典、訊號流、藍圖、編輯風格四種，旁邊的開關可以切淺色、深色。選單上標示可以按 S 鍵切換風格；Archify 的 GitHub 說明頁另外寫 T 鍵切換淺色、深色（2026.10.22 查），這兩個快捷鍵我沒有逐一試過。

---

⏱️ 一分鐘版

Claude 三分鐘就把系統架構圖畫好了，這集教你怎麼裝、怎麼用。

⏱️ 本系列「一分鐘教你一個 AI 工具技巧」

• 前導集：Claude Chat 跟 Cowork 合併了
• 第 1 集：IG 貼文圖字體一致性
• 第 2 集：Reels 加動畫實測：Claude 六輪改稿，全用講的
• 第 3 集：Claude Code 必裝 3 個 MCP
• 第 4 集：複製自己的聲音
• 第 5 集：一支 Reel 背後用了 5 個 AI 工具（整理在 AI 工作流入口頁）
• 第 6 集：Claude 必裝 3 個 Skill
• 第 7 集：Claude 模型怎麼選最省
• 第 8 集：讓網頁變好看的 2 個 Skill
• 第 9 集：生日月優惠信一次整理
• 第 10 集：Claude 儀表板
• 第 11 集：Claude 寫 Python 畫 Reels 動畫
• 第 12 集：信用卡帳單整理成一張表
• 第 14 集：Archify 自動畫系統架構圖（本篇）

👉 看全系列

---

💡 結語：一行裝好，之後都是用講的

整件事其實只有兩步：裝一次 Archify，之後想畫哪個專案，就貼一段「讀哪些資料夾、用 archify 畫、不要讀什麼」的指令。圖畫好之後，點、換風格、匯出，都在那個 HTML 裡操作。

你也可以拿自己的專案試試同樣的指令，畫出來有哪裡不對，直接回頭告訴 Claude 要改哪裡。

遇到這類問題，問 AI 就對了。

這個系列每一集的完整整理，都收在 AI 工作流入口頁。

💡 延伸閱讀：
👉 Opus 5.5 加動畫實測：Claude 寫 Python 畫 Reels 動畫
👉 8 家信用卡帳單一封封點開？Claude 每月提醒＋Python 抓 Gmail，跑一行變一張表（實測）