系統圖不用自己拉框框｜Diagram Design 一句話畫圖實測

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

更新時間：2026.10.30（Windows 實測）

Diagram Design 是 Claude Code 的外掛，你用白話說要畫什麼，它就畫成一張 HTML 網頁的系統圖；還能讓它讀一次你的網站，之後這個資料夾裡畫的圖，自動用品牌色。

以下是我 2026.10 在 Windows 上的實際操作，你可以用同樣的指令拿自己的流程試試。

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

📑 快速導覽目錄

• 🧩 ① 怎麼安裝：貼 2 行就好
• 📋 ② 指令懶人包：6 段直接複製
• ✨ ③ 效果展示：同一張圖，灰白橫式變品牌色直式
• ❓ 常見問題 FAQ
• ⏱️ 一分鐘版
• 💡 結語：說一句話，再讓它讀一次網站

---

🧩 ① 怎麼安裝：貼 2 行就好

Diagram Design 是外掛，要在 Claude Code 裡用，所以電腦要先有 Claude Code。我這次是在 Windows 的 Claude Code 裡裝，下面的安裝指令都是貼在 Claude Code 的對話框裡。

它不是 Anthropic 出的，是 GitHub 上 cathrynlavery 這個帳號發佈的外掛，安裝畫面上有一行英文提醒你先確認信任這個外掛，裝之前可以先到 cathrynlavery/diagram-design 看一眼。

第 1 步：把外掛來源加進去

/plugin marketplace add cathrynlavery/diagram-design

貼進 Claude Code 的對話框按 Enter，成功的話畫面會顯示 Successfully added marketplace: diagram-design。我實測時在這一步之後跑了一次 /reload-plugins 再往下裝；沒試過不跑會怎樣。

第 2 步：安裝外掛

/plugin install diagram-design@diagram-design

它會跳出一個選安裝範圍的畫面，有三個選項，我選的是 local（只裝在這個專案資料夾，只給自己用），畫面上原文是 Install for you, in this repo only (local scope)；另外兩個我沒選過，不比較。裝好之後畫面會出現 Installed diagram-design. Plugin is now active.，這行就是裝好的證明。

圖說：安裝時會跳出選安裝範圍的畫面，我選的是 local scope（只裝在這個專案資料夾，只給自己用）。畫面外的工作列已裁掉。

圖說：兩行指令跑完，最後一行是 Installed diagram-design. Plugin is now active.。工作列已裁掉。

在哪裡用、怎麼確認裝好

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

怎麼確認裝好：第 2 步畫面出現 Installed 那一行就是裝好了。最後一關是照下一章的指令請它畫一張圖，它第一次畫圖會先問你要用哪種配色（見 ③ 效果展示），看到這個提問，整條路就通了。

---

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

把「你的……」換成自己的東西。全部都是貼在 Claude Code 的對話框裡。

指令 1：安裝（只做一次）

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

兩行一行一行貼。我實測時在兩行之間跑過一次 /reload-plugins（見上一章）。

指令 2：畫第一張圖

這是我實際貼的那一句，原文照放：

用 diagram-design 幫我畫一張流程圖：口白 → 對嘴 → 剪片 → 音效 → 封面 → 發文，六個步驟，繁體中文，風格簡潔。

用在你自己的圖上，把步驟換成你的流程就好。句首明講「用 diagram-design」。第一次畫圖它會先問你配色，三選一：1 預設（它標示為推薦）、2 從網站、3 自己給色碼。我第一次選預設，拿到的是灰白色的圖。

指令 3：讓它讀一次你的網站（品牌色）

這是我實際貼的那一句，原文照放：

onboard diagram-design to https://www.pinkjhs.com

換成你自己的網站：

onboard diagram-design to https://你的網站網址

這一句不是斜線指令，是打給 Claude Code 的一句話，意思是「讓 diagram-design 讀一次這個網站」。它會先問你是否信任這個網站。

點頭之後，它用瀏覽器開首頁和一兩篇文章頁抓顏色與字型（只讀不寫），再問你字型怎麼配（我選全用 Open Sans）、要不要套用配色。確認之後，這個資料夾之後畫的圖，會自動用你的品牌色。

指令 4：要手機看得清楚，直式、字放大

預設的橫式圖在手機上字偏小，所以我請它再畫一版直式。這是我實際貼的那一句，原文照放：

再畫一版：直式 4:5（1080×1350），所有文字放大到手機看得清楚，箭頭上的說明字至少跟框內字一樣大，Notion 那格改成「營運面板」，節點可以多用一點品牌粉當底色，讓整張一眼看出是 pinkjhs

「Notion 那格改成營運面板」和「品牌粉」是我這張圖專屬的要求，用在你的圖上可以換掉；要留的是「直式 4:5」和「文字放大」。

指令 5：做成一步一步長出來的動畫

這是我實際貼的那一句，原文照放：

匯出 PNG 2160×2700，然後把這張系統圖做成 step 動畫模式：依序出現節點和箭頭，最後雲端排程任務粉色高亮。

前半句是我順便請它匯出 PNG，後半句才是動畫。輸出的動畫是一個網頁，不是影片檔。打開之後起點是空白，按播放每秒出現一步（我這張共 7 步）。

操作方式：鍵盤 ← → 是一步一步前後切，空白鍵播放或暫停，R 重播；網址後面加 ?motion=static 會直接顯示完整的靜態圖。

指令 6：在 Claude Code 裡打開剛畫好的圖

! start C:/你的資料夾/圖的檔名.html

最前面的驚嘆號 ! 代表「這是系統指令，不要當成訊息送給 Claude」。路徑要用正斜線 /，反斜線會被吃掉而找不到檔案（見 FAQ 第 7 題）。

---

✨ ③ 效果展示：同一張圖，灰白橫式變品牌色直式

指令 2 那張六步驟的流程圖，是我第一次試的；下面示範用的，是之後另外畫的一條比較大的流程：「一分鐘系列 Reel 自動嵌進文章」，裡面有站長（我）、排程台、營運面板、雲端排程任務、登記檔和部落格網站這幾個角色。同一張圖，我畫了幾個版本，下面照順序放。

先看預設：灰白橫式

第一次請它畫圖時，它會先問配色（下面第一張圖），我選預設，畫出來是灰白色的。第二張是用同樣的預設配色畫的這個流程，橫式：角色與箭頭都畫出來了，主流程用實線、回寫與對帳用虛線；只是在手機上看，字偏小。

圖說：第一次畫圖它會先問配色，三選一。我選預設。工作列已裁掉。

圖說：預設配色畫出的灰白橫式圖，圖名是「一分鐘系列 Reel 自動嵌進文章」。

再讓它讀我的網站：品牌色

我貼上一章指令 3 那一句。它問我是否信任這個網站，點頭之後它開瀏覽器讀首頁和一兩篇文章頁，再問字型。確認之後，同一個資料夾裡再請它畫，就是品牌色了。

圖說：貼上 onboard 那一句，它先問是否信任這個網站。工作列已裁掉。

要說清楚一件事：它是在這個資料夾放一個標記檔，之後在這個資料夾請它畫圖才會自動套用品牌色。別的資料夾我沒有試，不保證也會一樣。

品牌色加直式放大，並排看

我再請它改成直式 4:5、字放大。下面這張是品牌色直式版：粉色外框、淡粉底，最核心的「雲端排程任務」是實心粉。

圖說：品牌色、直式 4:5（1080×1350）、字放大的版本；匯出 PNG 的尺寸是 2160×2700。

灰白橫式和品牌色直式並排看，差異很明顯：

圖說：左：預設灰白橫式；右：讀過網站後的品牌色直式 4:5。兩張內容相同。

我自己的判斷是：單看「換成品牌色」，差別沒有那麼大；要連「直式」和「字放大」一起，手機上才明顯好讀。所以這兩件事我都會一起交代。

最後，讓圖一步一步長出來

最後請它做成動畫版。打開那個網頁，一開始只有標題，按播放之後節點和箭頭一步一步長出來，我這張共 7 步，最後停在完整的圖。

圖說：動畫版三個時間點：左，起點只有標題；中，播到一半；右，播完是完整的圖。

要提醒的是，這個動畫是網頁，它輸出的不是影片檔；要放進影片或貼文，得自己用螢幕錄影。

---

❓ 常見問題 FAQ

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

我這次是在 Windows 的 Claude Code 裡裝與用的，其他環境我沒試過，不能保證一樣。Mac、Claude 桌面版、Claude 網頁版我都沒試，所以不寫步驟。

Diagram Design 是 Anthropic 官方出的嗎？

不是。我是用 /plugin marketplace add cathrynlavery/diagram-design 把外掛來源加進去的，來源是 GitHub 上 cathrynlavery 這個帳號發佈的外掛。Claude Code 的安裝畫面有提醒你先確認信任這個外掛，裝之前可以先到那個 GitHub 頁面看一眼。

安裝時問的安裝範圍，要選哪一個？

我選的是 local（只裝在這個專案資料夾，只給自己用），畫面上原文是 Install for you, in this repo only (local scope)。畫面上有三個選項，另外兩個我沒選過，不能比較差異；不確定的話，照畫面上每個選項旁邊的說明選。

第一次畫圖它問配色，三個選項怎麼選？

它問的是 1 預設（它標示為推薦）、2 從網站、3 自己給色碼。我第一次選預設，拿到灰白色的圖；後來另外用 onboard 那一句讓它讀我的網站。選項 2 我沒選過，所以不知道它跟 onboard 是不是同一條路，不比較。

讓它讀網站，品牌色會套到我所有的圖嗎？

不會是全電腦。我實測的是：讀過網站之後，在同一個資料夾裡再請它畫的圖，會自動用品牌色，它是靠在那個資料夾放一個標記檔做到的。換一個資料夾畫圖，我沒有試過，不保證一樣。

讓它讀我的網站，會不會改到網站？

我實測的過程是：它先問我是否信任這個網站，然後用瀏覽器開首頁和一兩篇文章頁，抓顏色與字型，只讀不寫，沒有改我的網站。

在 Claude Code 打 cls、cd 沒反應，路徑也找不到檔案？

這是我踩到的兩個雷。第一，在 Claude Code 的對話框打 cls、cd，會被當成訊息送給 Claude，不會執行；要執行系統指令，前面加驚嘆號 !，要清空對話請用 /clear。第二，! 後面的路徑要用正斜線，例如 ! start C:/demo/diagram/xxx.html；用反斜線會被吃掉，結果找不到檔案。

預設畫出來的圖，在手機上字太小怎麼辦？

預設的第一版是橫式，在手機上看文字偏小。我後來明講「直式 4:5、字放大」，才夠手機讀。要貼社群或用手機看的圖，一開始就把尺寸講清楚。

動畫版怎麼操作？可以直接放進影片嗎？

動畫版是一個網頁：打開是空白起點，按播放每秒出現一步（我這張共 7 步）；鍵盤 ← → 逐步前後切，空白鍵播放或暫停，R 重播，網址後面加 ?motion=static 會直接顯示完整靜態圖。它不是影片檔，所以要放進影片或貼文，得自己用螢幕錄影。

---

⏱️ 一分鐘版

一分鐘看 Claude Code 外掛 Diagram Design 一句話畫出系統圖，讀過我的網站之後，同資料夾的圖自動用品牌色。

【待補：Reel 嵌入，發布後補】

⏱️ 本系列「一分鐘教你一個 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 自動畫系統架構圖
• 第 15 集：DESIGN.md 把網頁換成 Airbnb、Spotify、Nike 風
• 第 16 集：Graphify 讓 Claude 讀完專案畫出一張知識圖
• 第 17 集：Claude 聊很長，先存這 3 招內建指令
• 第 18 集：Diagram Design 一句話畫圖實測（本篇）

👉 看全系列

---

💡 結語：說一句話，再讓它讀一次網站

整件事只有三步：裝一次 Diagram Design、請它畫第一張圖、再讓它讀一次你的網站，這個資料夾之後的圖就自動用品牌色；要手機好讀，就加一句「直式 4:5、字放大」。

前面的 Archify（架構圖）、Graphify（知識圖）加上這篇的 Diagram Design，三個畫圖工具我另外整理在這一頁。

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

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

💡 延伸閱讀：
👉 系統架構圖 我一筆都沒畫｜Archify 安裝與指令實測
👉 改程式前先問「會動到誰」｜Graphify 讓 Claude 讀完專案畫出知識圖實測