昨天在 Claude.ai 完成了 MCP App Server 的設定與產圖測試，也看到圖表如何直接顯示在對話中。今天接著介紹第二種做法：MCP Tool Server。這一篇會先了解它的運作方式，並在 Claude Code 完成本機環境與連線設定。

MCP Tool Server 在本機執行。AI 產生圖表後，它會回傳一個 draw.io 網址；開啟連結，就能在瀏覽器版 draw.io 檢視及編輯圖表。至於實際的產圖結果、優點與限制，留到明天的內容再進行測試。

兩種 MCP server，圖表出現的位置不同

MCP App Server 由 draw.io 官方託管。當 AI 工具支援 MCP Apps 擴充時，AI 呼叫工具後，圖表可以直接內嵌在對話中顯示。

MCP Tool Server 則以本機行程執行。它收到 XML、CSV 或 Mermaid 格式的圖表內容後，會先壓縮並編碼資料，再組成帶有 #create 參數的 draw.io 網址，最後將網址回傳給 AI。使用者開啟連結後，瀏覽器版 draw.io 才會載入圖表。

兩者的差異不只在圖表顯示的位置，對 AI 工具的要求也不同。MCP App Server 必須由支援 MCP Apps 的 AI 工具呈現互動式圖表；MCP Tool Server 回傳的則是一般網址，可以搭配 Claude Code 這類終端機型 coding agent，以及支援本機 MCP server 的 VS Code 等編輯器使用。

換句話說，MCP Tool Server 負責把 AI 產生的圖表內容送進 draw.io；流程文件與繪圖規格仍由原本的專案管理，取得連結後再到瀏覽器檢視或編輯圖表。

安裝前先確認 Node.js 環境

MCP Tool Server 以 npm 套件 @drawio/mcp 發布。目前套件要求 Node.js 18 以上，因此設定前可以先在終端機確認版本：

node --version
npm --version

官方提供三種執行方式：直接以 npx 執行、透過 npm install -g 全域安裝，或下載原始碼自行建置。

這次測試使用官方建議的 npx。這種方式不必預先進行全域安裝；如果專案中沒有相符的套件，npx 會將套件下載至 npm 快取後執行。未指定版本時，實際使用的版本會受到本機相依套件與 npm 快取狀態影響，不能視為每次啟動都一定重新下載最新版本。

官方提供的基本執行方式如下：

npx @drawio/mcp

直接執行後，程式會以 MCP server 的身分等待客戶端連線，因此終端機看起來沒有進一步輸出並不一定代表執行失敗。實際使用時，我會讓 Claude Code 負責啟動它。

我只提出需求，Claude Code 負責註冊

這次我沒有自己查指令或手動編輯設定檔，而是直接在 IDE 的 Claude Code 中提出需求：

我要安裝 draw.io MCP Tool Server，請協助我確認官方套件、完成 Claude Code 設定，並測試 MCP server 是否能正常啟動

根據 prompt 指令 Claude Code 依序做了四件事：搜尋官方套件、寫入 MCP 設定、啟動 server，以及檢查工具清單。整個過程不需要我另外開啟終端機輸入安裝指令。

第一步：確認官方套件

Claude Code 先到 npm 搜尋 draw.io MCP 相關套件，從搜尋結果確認 @drawio/mcp 是 draw.io 官方發布的 MCP server。接著，它讀取套件的 README，確認官方建議使用 npx 執行，並找到 Claude Code 的設定方式。

第二步：將 draw.io 寫入 MCP 設定

Claude Code 原本準備透過 claude CLI 加入 MCP server，但當時的執行環境找不到這個指令——我是在 VS Code 的擴充功能中使用 Claude Code，終端機沒有另外安裝 CLI 版本，因此改為直接更新設定檔。為了避免原本的設定受影響，它先備份 ~/.claude.json，再加入 draw.io MCP 的啟動方式。

實際寫入的內容如下：

{
  "mcpServers": {
    "drawio": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@drawio/mcp"],
      "env": {}
    }
  }
}

~/.claude.json 中還存放其他 Claude Code 設定，這裡只列出新增的 mcpServers 部分。

這段設定的重點是告訴 Claude Code：啟動時要以 npx -y @drawio/mcp 拉起一個本機 MCP server，並透過 stdio 和它溝通。設定放在使用者層級，因此同一台電腦上的其他 Claude Code 專案也可以使用。

直接更新 ~/.claude.json 是可行的替代方式，但一般情況仍建議使用官方 CLI 建立等效設定：

claude mcp add drawio --scope user -- npx -y @drawio/mcp

這不是我當時親自執行的指令，而是對應的標準做法；當時實際的設定與備份都由 Claude Code 完成。

第三步：啟動 MCP server

寫入設定後，Claude Code 沒有只停在「設定完成」，而是接著執行 npx -y @drawio/mcp，用 MCP 的初始化訊息測試 server 能否正常啟動。

第一次測試沒有收到輸出，因此 Claude Code 延長等待時間後再次嘗試。第二次測試成功收到回應，當時顯示的 server 版本為 drawio-mcp 1.4.0，並確認它以 stdio 模式執行。

第四步：確認有哪些工具

server 成功回應後，Claude Code 再呼叫 MCP 的工具清單，確認它提供以下工具：

• open_drawio_xml
• open_drawio_csv
• open_drawio_mermaid
• list_pages
• get_page
• set_page
• search_shapes

到這一步，才能確定 @drawio/mcp 不只是寫進設定檔，而是真的可以啟動並回傳工具清單。

重新啟動 Claude Code，載入新設定

Claude Code 也提醒我，MCP server 會在工作階段啟動時建立連線，因此新增設定後，需要重新啟動 Claude Code 工作階段或開啟新對話。重新進入後，再執行：

/mcp

/mcp 可以用來查看 MCP server 的連線狀態。當 drawio 顯示為 connected，就表示新的工作階段已經載入設定。這裡只需要確認連線是否成功；各項工具的用途已在 Day 6 介紹過，不再重複展開。

明天實際產圖時，會先使用 open_drawio_xml 工具，讓 AI 產生 draw.io XML，再取得可開啟圖表的網址。

今天完成了哪些設定

到這裡已經完成三件事：確認 Node.js 環境、將 @drawio/mcp 加入 Claude Code，以及透過 /mcp 檢查連線狀態。現在只能確定工具已經可以使用，至於實際產圖效果，還需要下一步測試才能判斷。

明天進入下篇，一樣使用「電商購物網站登入」子流程實際產圖，看看圖表在瀏覽器版 draw.io 中的呈現結果，並整理 MCP Tool Server 的優點、限制與適用情境。