昨天在 Claude Code 裝好了 draw.io 官方外掛，也確認它已經載入。今天接著實際產圖，看看外掛預設寫出的 .drawio 檔長什麼樣、放在哪裡，再試著切換輸出格式，最後整理這種做法的優點與限制。

第三次使用同一段登入流程

為了讓四種方式可以互相比較，這次還是沿用 Day 9 與 Day 11 用過的同一段需求：「AI 客服智慧退換貨流程說明」中的電商購物網站登入子流程。輸入條件相同，差異才會落在呈現方式上，而不是我下的指令。

我在 Claude Code 中輸入：

請使用 draw.io 外掛，將以下內容繪製成由上往下的流程圖：

流程名稱：電商購物網站登入

流程步驟：
1. 會員進入電商購物網站登入頁。
2. 會員輸入會員帳號與密碼。
3. 會員按下登入。
4. 系統檢查欄位格式是否正確。
5. 若欄位格式不正確，顯示錯誤訊息，提示會員重新輸入。
6. 若欄位格式正確，系統繼續檢查帳號密碼是否正確。
7. 若帳號密碼不正確，顯示錯誤訊息，並返回輸入帳號密碼步驟。
8. 若帳號密碼正確，會員進入首頁，流程結束。

請使用菱形表示判斷節點，並在判斷連線上標示「是」與「否」。

和 Day 11 一樣，實際工作時不必把流程步驟整段貼進對話——流程說明文件就放在專案目錄裡，直接請 Claude Code 讀檔就好。這裡把步驟貼滿，純粹是為了維持三次測試的條件一致。

圖表這次落在專案裡，不是對話也不是分頁

到目前為止，三種方式的圖表出現位置各不相同：MCP App Server 內嵌在對話中，MCP Tool Server 開一個瀏覽器分頁，而 Assistant Plugins 的預設行為，是在本機寫出一個 .drawio 檔，再用 draw.io 開啟它。

這是三種方式裡，唯一一種產出物會留在檔案系統裡的做法。前兩種產完圖，東西是在對話紀錄或網址裡；這一種產完圖，專案目錄裡會多一個檔案，可以被 Git 追蹤、可以被下一次的 AI 讀回去。

檢查點還是那三個：兩個判斷節點在不在、是／否標示對不對、兩條錯誤路徑有沒有正確回到「輸入會員帳號與密碼」。三次測試我都用同一組標準，因為要看的不只是工具能不能出圖，而是 AI 有沒有真的讀懂流程。

換一種輸出格式

外掛預設產出 .drawio 檔，但官方文件說明，只要在請求裡提到想要的格式，就能改變輸出結果。可選的有兩類：

PNG／SVG／PDF：由本機安裝的 draw.io 桌面版 CLI 負責匯出，並帶上 --embed-diagram 參數。這個參數的意思是，把原始圖表資料一併嵌進輸出檔裡——所以匯出的 PNG 或 PDF 不只是一張圖片，把它拖回 draw.io 還能還原成可編輯的圖面。昨天提到，沒裝桌面版的話，外掛會停在 .drawio 檔這一步，不做匯出。

URL：改用 Node.js 內建的 zlib 壓縮圖表 XML，再組成網址在 app.diagrams.net 開啟。這條路等於是把 Day 11 那種「產一個 draw.io 網址」的行為，換一個入口再做一次。

Assistant Plugins 的優點與限制

走過安裝與產圖後，優點：

• 設定成本是四種方式裡最低的之一，兩行指令就完成，不必確認 Node.js 環境或編輯設定檔。
• 產出物是專案裡的實體檔案，可以被版本控制追蹤，也能被下一次的 AI 讀回去繼續處理。
• 輸出格式有選擇，.drawio、PNG、SVG、PDF 與網址都能指定。
• 整個過程留在 IDE 的 Claude Code 裡，AI 可以直接讀取專案內最新的流程說明文件與繪圖規格。
• 官方同一個市集也支援 Codex CLI 與 GitHub Copilot CLI，換工具時做法一致。

限制：

• 圖表不會出現在對話中，檢視結果仍要另外開啟檔案。
• 外掛會執行本機程式並寫入檔案，安裝前需要確認來源可信；這一點官方文件也特別提醒過。
• 和前兩種一樣，外掛本身不管流程文件與繪圖規格。AI 是否照規格產圖，仍取決於提供給它的文件與約束方式。

明天測最後一種方式：Project Instructions。它是四種裡唯一不需要安裝任何東西的做法，改成把官方寫好的指令貼進 Claude Project，讓 Claude 自己算出 draw.io 網址，上篇一樣會從設定先開始說起。