昨天在 Claude Code 完成了 MCP Tool Server 的安裝與連線設定，也用 /mcp 確認 drawio 已經連上。今天接著實際產圖，看看圖表在瀏覽器版 draw.io 中的呈現方式，整理這種做法的優點與限制。

用同一個登入流程做對照測試

為了讓兩種 MCP server 的差異看得出來，這次沿用 Day 9 測試 MCP App Server 時的同一段需求：「AI 客服智慧退換貨流程說明」中的電商購物網站登入子流程。當比較的輸入相同時，才能較公平的看出呈現的差異。

我在 IDE 的 Claude Code 中輸入：

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

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

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

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

這裡先補充一點：因為是在 IDE 裡工作，其實不必像這樣把流程步驟整段貼進對話。流程說明文件就放在專案目錄中，直接請 Claude Code 讀取檔案中的登入子流程即可。這次為了與 Day 9 的條件一致，才刻意使用相同的文字需求。

圖表不在對話裡，而是在瀏覽器開啟

Claude Code 整理流程後，呼叫的是 open_drawio_xml：它先產生 draw.io XML，交給本機的 MCP server，server 組出帶有圖表內容的 draw.io 網址，並直接在預設瀏覽器把它開起來。工具名稱裡的 open 就是這個意思——不只是回傳連結，而是幫我把圖開好。

這是與 MCP App Server 最直接的差別。App Server 產圖後，圖表內嵌在對話中；Tool Server 產圖後，圖會出現在另一個瀏覽器分頁。圖表內容編碼在網址的 # 之後，瀏覽器載入 draw.io 時直接還原成圖面，因此開啟的不是預覽視窗，而是完整的 draw.io 編輯器。

打開圖表後，我的檢查點跟 Day 9 一樣：先確認兩個判斷節點是否都在，再看格式錯誤與帳號密碼錯誤這兩條路徑，有沒有正確回到「輸入會員帳號與密碼」。這同時也是在確認 AI 有沒有真的讀懂原始流程，而不只是把步驟排成一直線。

產圖之後，修改有兩條路

圖開在完整編輯器裡，接下來的修改就有兩種走法。

一種是回到 Claude Code 說明要改什麼，讓它重新產生一次。這條路適合流程內容本身有變動，例如多一個判斷、步驟順序調整。

另一種是直接在 draw.io 編輯器裡手動調整節點位置、連線走向或樣式。這條路適合版面層級的微調，不需要再繞回對話。

需要留意的是，這兩條路目前沒有自動接起來：在編輯器裡手動改過的內容，不會回流到對話中。下次請 AI 重新產圖時，它依據的仍然是流程說明文件與對話內容，手動調整的部分會需要重做。這也是後面幾天要把規格寫成文件的原因之一——版面決策留在文件裡，才不會每次重產都消失。

MCP Tool Server 的優點與限制

走過設定與產圖後，我整理出的優點：

• MCP server 在本機執行，整個過程留在 IDE 裡，不需要切換到其他工具。
• AI 可以直接讀取專案內最新的流程說明文件與繪圖規格，不必另外上傳或同步檔案。
• 產圖後開啟的是完整的 draw.io 編輯器，不受對話介面的顯示範圍限制，流程規模較大時比較好檢視。
• 需要手動微調節點與連線時，可以在同一個編輯器中直接完成。
• 除了 XML，也支援 CSV 與 Mermaid 格式輸入，來源格式的選擇比較有彈性。

限制的部分：

• 需要 Node.js 環境並安裝 npm 套件，設定門檻比直接加一個遠端位址的 App Server 高。
• 圖表不會出現在對話中。雖然瀏覽器會自動開啟，不必手動點連結，但檢視結果的位置仍在 IDE 之外，視線需要在兩邊切換。
• 每次產圖都會得到新的網址，等於開出一張新的圖，不是就地更新前一張。
• 圖表內容編碼在網址的 # 之後，這段內容不會隨著請求送到伺服器；但也表示網址本身就帶著整張圖的內容，轉傳連結等同於把圖表內容一併傳出去。
• 和 App Server 一樣，MCP server 本身不負責管理流程文件與繪圖規格。AI 是否依照規格產圖，仍取決於提供給它的文件與約束方式。

明天開始測試第三種方式：Assistant Plugins。它一樣在 Claude Code 裡使用，但不需要設定 MCP，改用外掛市集安裝，產出的也不是瀏覽器分頁，而是專案裡的 .drawio 檔，上篇同樣從安裝與設定開始。