畫圖懶人包｜用 Claude 畫架構圖、知識圖、系統圖的 3 個工具
給誰：想用 Claude 畫架構圖、知識圖、系統圖，但不想自己拉框框的人
對應影片：⏱️ 一分鐘 AI 技巧第 18 集（留言「畫圖」拿到的就是這頁）
💡 快速摘要（TL;DR｜2026.10 實測）
- 三個工具，三種圖：Archify 讀程式碼畫「架構圖」；Graphify 把整個專案掃成「知識圖」；Diagram Design 用講的畫「系統圖」。
- 全部在 Claude Code 裡用：我只在 Windows 的 Claude Code 試過，Mac、Claude 桌面版、Claude 網頁版沒試過。
- 這頁只放安裝指令：每個工具的安裝畫面、用法和踩到的雷，都在各自的文章裡。之後有新的畫圖類 Skill，會再加進這一頁。
✍️ 真人實測宣告
三個工具都是作者 2026 年 10 月在 Windows 的 Claude Code 上實際跑過；各工具的細節與查證日，以各篇文章為準。
🔗 連結
- 第 14 集：Archify 安裝與指令實測（架構圖）
- 第 16 集：Graphify 讓 Claude 讀完專案畫出知識圖（知識圖）
- 第 18 集：Diagram Design 一句話畫圖實測（系統圖）
📋 指令：安裝與一句話範例
① Archify（終端機，只做一次）
npx skills add tt-a1i/archify -g
安裝精靈裡選 Claude Code，其餘一路 Enter。電腦要先有 Node.js。
你可以這樣說：「請分析 [前端資料夾] 和 [後端資料夾]，以程式碼為依據，用 archify 畫一張高層次的系統架構圖。請不要讀取或顯示 .env 和金鑰。輸出成 HTML。」
② Graphify（終端機，一行一行貼）
python --version
uv --version
uv tool install graphifyy
graphify install
uv --version
uv tool install graphifyy
graphify install
套件名是 graphifyy（兩個 y）。Windows 如果被擋下 graphify.exe，改貼：
python -m pip install --user graphifyy
python -m graphify install
python -m graphify install
你可以這樣說：先在專案資料夾啟動 Claude Code，打
/graphify .；畫好後問它：「我要改 [函式或檔案名稱]，先查圖，告訴我會動到哪些地方。」③ Diagram Design（貼進 Claude Code 對話框，依序）
/plugin marketplace add cathrynlavery/diagram-design
/reload-plugins
/plugin install diagram-design@diagram-design
/reload-plugins
/plugin install diagram-design@diagram-design
畫面出現 Installed diagram-design. Plugin is now active. 就是裝好了。
你可以這樣說：「用 diagram-design 畫一張 [你的流程] 的資料流程圖，直式 4:5、字放大。」建議明講「用 diagram-design」。
📚 延伸閱讀
👉 第 16 集：Graphify 讓 Claude 讀完專案畫出知識圖