昨天整理了 draw.io 官方提供的四種 AI 整合方式。從今天開始，我會依序實測這四種方式，每種方式分成上下兩篇：上篇說明運作方式與設定步驟，下篇再用相同的流程需求實際產圖，整理優點、限制與適用情境。首先登場的，是不需要安裝本機套件的 MCP App Server。

MCP App Server 是什麼

MCP App Server 的特色，是讓 AI 產生的 draw.io 圖表直接顯示在對話中。AI 呼叫 create_diagram 工具並傳入圖表內容後，支援 MCP Apps 的 AI 工具會在對話內載入 draw.io viewer，將圖表呈現在互動式檢視區域中。

使用者不需要先下載 .drawio 檔案，也不必另外開啟瀏覽器分頁，就能在對話中縮放、移動畫面、切換圖層或使用全螢幕模式。需要進一步編輯時，則可以透過「Open in draw.io」按鈕進入完整的 draw.io 編輯器。

這種做法與 Day 6 介紹的 MCP Tool Server 不同。MCP App Server 先將圖表內嵌在對話中；MCP Tool Server 則會直接開啟瀏覽器版 draw.io。兩者都能將 AI 產圖與 draw.io 串接起來，但檢視圖表的位置並不相同。

在 Claude 加入 MCP App Server

這次使用 Claude.ai 測試。draw.io 官方已提供託管的 MCP App Server，因此嚴格來說，這裡不是在電腦上安裝套件，而是將遠端 MCP server 加入 Claude 的自訂 Connector。

進入設定之前，先說明兩個 Claude.ai 介面上的名詞：

Claude 將「連接外部工具與資料來源」的功能稱為連接器（Connector），無論是官方目錄中的 Notion、Google Drive，還是自行加入的遠端 MCP server，都是透過這個入口與 Claude 連接。
以 Day 5 的架構來說，Claude.ai 是 MCP client，Connector 頁面就是把 MCP server 掛上去的地方。至於「Customize」，則是 Claude.ai 設定選單中的一個分頁，Connector 的管理頁面就放在這裡。

設定步驟如下：

1. 進入 draw.io MCP 官方 GitHub 的 MCP App Server 說明頁面。

2. 複製官方提供的 MCP App Server 位址：

   https://mcp.draw.io/mcp
   

3. 登入 Claude.ai，進入「Customize」，再選擇「Connectors」。
   
   

4. 點擊 Connectors 旁的「＋」，選擇「Add custom connector」。
   

5. 將 Connector 名稱設定為 drawio，貼上剛才複製的遠端 MCP server 位址，再點擊「Add」。draw.io 官方託管服務不需要另外填寫 OAuth Client ID 或 Client Secret。
   

6. 新增完成後，drawio 會出現在 Connectors 清單中，再點擊它旁邊的「Connect」完成連線。
   

7. 開啟一個新的 Claude 對話，點擊輸入框左下角的「＋」，進入「Connectors」，啟用剛才新增的 drawio。
   

8. 確認 Connector 已啟用後，就可以在對話中請 Claude 使用 draw.io 建立圖表。

明天進入下篇，實際以案例中的「電商購物網站登入」子流程進行產圖，觀察圖表在對話中的呈現效果，並整理 MCP App Server 的優點、限制與適用情境。