昨天已經把 draw.io 官方託管的 MCP App Server，以自訂 Connector 的方式加入 Claude.ai。今天接著實際產圖，檢查圖表在對話中的呈現方式，整理這種做法的優點與限制，最後回頭對照我的需求。

我在 Claude 對話中啟用 drawio Connector，接著輸入以下需求：

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

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

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

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

Claude 整理流程並呼叫工具後，圖表會直接出現在對話中。檢查這張圖時，我會先確認兩個判斷節點是否存在，再查看格式錯誤與帳號密碼錯誤的路徑，有沒有正確返回「輸入會員帳號與密碼」。這不只是確認圖表能否顯示，也是在檢查 Claude 是否正確理解原始流程。

圖表內嵌在對話中的好處，是產圖後可以立刻檢查流程，不需要先下載及匯入檔案。如果發現節點文字或流程方向不正確，可直接在同一段對話中提出修改要求。

若要手動調整節點位置、連線或樣式，可透過點擊「Open in draw.io」進入完整編輯器。

MCP App Server 的優點與限制

實際走過設定及產圖流程後，我整理出以下優點：

• 不需要安裝 npm 套件，只要在 Claude 加入官方提供的遠端 MCP 位址。
• 圖表直接顯示在對話中，可以立即檢查產圖結果。
• 支援縮放、平移、圖層切換及全螢幕檢視。
• 可以從對話中的按鈕開啟 draw.io，繼續進行細部編輯。
• 產圖、檢視及提出修改要求可以留在同一段對話中完成。

但也有其本身的限制：

• 必須在 Claude 的個別對話中啟用 drawio Connector，Claude 才能呼叫工具並顯示圖表。
• 內嵌圖表的顯示範圍受對話介面限制，流程較大時仍需要縮放或使用全螢幕模式。
• MCP App Server 主要負責圖表在對話中的呈現，本身不負責管理流程文件與繪圖規格。AI 是否依照規格產圖，仍取決於對話中提供的文件、指令及其他約束方式。
• 使用官方託管位址時，圖表內容會傳送至官方 MCP server；若流程包含敏感資料，仍須評估資料處理方式或改採自行託管。

明天開始測試第二種方式：MCP Tool Server。它需要透過 npm 安裝，產圖後會直接在瀏覽器開啟 draw.io 編輯器，上篇同樣會從安裝與設定開始。