昨天介紹的 MCP Tool Server，可以讓 AI 產圖後直接開啟 draw.io。不過，這只是官方專案提供的其中一種做法，依照工作環境與圖表呈現位置，還有其他方式可以選擇。
draw.io 官方 GitHub 目前整理了四種 AI 整合方式，分別是 MCP App Server、MCP Tool Server、Assistant Plugins 與 Project Instructions。前兩種透過 MCP 連接 AI 與 draw.io；後兩種不需要設定 MCP，而是透過外掛或專案指令產生圖表。
| 方式 | 如何設定 | 產圖後如何呈現 | 如何繼續編輯 |
|---|---|---|---|
| MCP App Server | 加入官方提供的遠端 MCP 位址 | 圖表直接顯示在 AI 對話中 | 點擊按鈕後使用 draw.io 編輯 |
| MCP Tool Server | 透過 npm 安裝並設定 MCP server | 在新分頁開啟 draw.io 編輯器 | 直接在瀏覽器中編輯 |
| Assistant Plugins | 安裝對應 AI 工具的 draw.io 外掛 | 預設建立本機 .drawio 檔，也可輸出圖片、PDF 或網址 |
使用 draw.io 開啟檔案或網址 |
| Project Instructions | 將官方指令貼到 Claude Projects | 在對話中產生可點擊的 draw.io 網址 | 點擊網址後使用 draw.io 編輯 |
對我而言，能否立即查看圖表，以及後續是否方便修改，是選擇時最重要的考量。若需要調整節點與連線，直接進入完整的 draw.io 編輯器會更符合我的操作習慣。
接下來四天，我會使用相同的流程需求測試這四種方式，分別記錄設定步驟、產圖過程與最後的呈現結果。
明天先從 MCP App Server 開始。
iThome鐵人賽
看影片追技術