Draw.io 科學插圖即時繪製 MCP 外掛

解決什麼

科學論文配圖重繪是研究者的常見痛點:參考文獻中的示意圖需要用自己的資料重新繪製,手工操作 draw.io 或 Illustrator 既耗時又難以精確還原佈局。現有 AI 繪圖方案通常生成靜態圖片或 XML 檔案,無法即時觀察繪製過程,也難以在生成後進行細節調整。該專案通過 MCP(Model Context Protocol)讓 Codex AI 直接控制 draw.io 桌面版的圖形 API,在可見畫布上逐步繪製形狀、標註、箭頭和樣式,使用者可即時觀察並介入調整,最終匯出可編輯的 .drawio 檔案和高解析度 PNG/SVG/PDF。

為何火

專案上線僅9天即獲 1066 stars,因為它填補了"AI 輔助科學插圖"的空白市場。核心亮點有三:一是即時視覺化,不像傳統工具先生成程式碼再渲染,而是讓 AI 像人類設計師一樣在畫布上作畫;二是保持可編輯性,所有元素都是 draw.io 原生物件,可後續手工修改;三是技術路徑獨特,通過 Electron 遠端除錯協議直接操作 draw.io 的圖形模型,避免了脆弱的 OS 級滑鼠鍵盤自動化。對於需要頻繁重繪論文配圖的研究團隊,這比手工操作效率提升數倍,且輸出符合期刊投稿的向量圖要求。

核心功能

1. 即時畫布控制:通過 drawio_live_launch 啟動 draw.io 並建立 localhost MCP 連線,後續工具呼叫直接修改活動圖形模型
2. 分步繪製:drawio_live_draw_sequence 支援設定延遲(如100ms),讓 AI 逐個新增形狀/邊/標籤,使用者可觀察構建過程
3. 視覺檢查迴圈:drawio_live_screenshot 擷取當前畫布,AI 分析後用 drawio_live_update_cell 修正位置/樣式/文字
4. 多格式匯出:drawio_export 支援 PNG(可指定寬度如2000px)、SVG、PDF、JPEG,滿足不同發表需求
5. Codex 技能包:內建提示詞模板教 AI 如何分解參考圖、控制繪製節奏、處理多面板佈局和圖例

典型工作流:上傳參考圖 → 提示"用 Draw.io Scientific Illustrator 重繪" → AI 啟動 draw.io → 逐步新增元素 → 截圖檢查 → 調整細節 → 儲存 .drawio 和匯出 PNG。

安裝

前置依賴:

• Codex 桌面版或 CLI(需外掛支援)
• draw.io 桌面版(從官網下載)
• Node.js 22+(用於執行 MCP 伺服器)
• Git

一鍵安裝(Windows):

$p="$env:TEMP\drawio-scientific-install.ps1"; Invoke-WebRequest https://raw.githubusercontent.com/icebird1998/drawio-scientific-illustrator/main/install.ps1 -OutFile $p; powershell -ExecutionPolicy Bypass -File $p

手動安裝:

git clone https://github.com/icebird1998/drawio-scientific-illustrator.git
cd drawio-scientific-illustrator
codex plugin marketplace add "$(pwd)"
codex plugin add drawio-scientific-illustrator@drawio-scientific-tools

安裝後必須重啟 Codex 並新建任務才能載入外掛。draw.io 路徑自動檢測,非標準安裝可設 DRAWIO_PATH 環境變數。

適合誰

1. 學術研究者:需重繪論文配圖、製作實驗流程圖、繪製系統架構示意圖
2. 技術文件作者:快速將草圖或參考圖轉為規範的向量插圖
3. 教育工作者:演示覆雜概念的分步構建過程
4. 設計師:用 AI 輔助完成重複性繪圖任務,保留手工調整空間

不適合:需要畫素級精確還原照片的場景(應用 AI 影像生成),或完全自動化無需人工介入的批次生產(該工具強調互動式調整)。

社群評價

暫無足量社群公開討論,以下為基於專案本身的中立評估:

該專案技術路徑新穎,通過 MCP 協議橋接 AI 與專業繪圖工具,避免了傳統 RPA 方案的脆弱性。9天獲千星說明需求真實,但專案極早期(單一貢獻者、僅3個 issue),文件完善但缺少實際案例展示。README 明確標註 Windows 測試最充分,macOS/Linux 可能遇到 Electron 打包差異導致的相容性問題。技能包依賴 Codex 的推理能力,建議使用 GPT-5.6 Sol + Max 推理檔位處理複雜配圖,這會增加 token 成本。安全設計合理(僅繫結 127.0.0.1),但需注意 draw.io 程序會持續執行佔用資源。

選型對比

vs BioRender(商業工具):BioRender 提供海量生物醫學素材庫和拖拽式編輯,適合快速組裝標準化插圖,但訂閱費高昂(年費數百美元)且素材風格固定。Draw.io Scientific Illustrator 完全免費開源,可繪製任意領域插圖,AI 輔助降低學習曲線,但需自備 draw.io 技能且依賴 Codex 訂閱。

vs Inkscape + AI 指令碼:Inkscape 是開源向量編輯器,可通過 Python 指令碼自動化,但需編寫大量程式碼且難以即時調整。該專案用自然語言控制,即時視覺化反饋,更適合非程式設計師。

vs 直接用 ChatGPT 生成 SVG:ChatGPT 可輸出 SVG 程式碼但常出現語法錯誤,且無法利用 draw.io 的佈局演算法和樣式庫。該方案生成的是 draw.io 原生物件,可無縫銜接後續手工編輯。

已知坑

1. 平臺相容性:README 明確提示 macOS/Linux 的 draw.io 執行檔檢測和 Electron 行為可能不一致,建議 Windows 使用者優先嚐試
2. 埠衝突:預設使用 9333 埠,若被佔用需手動設 DRAWIO_LIVE_PORT 或讓程式自動選擇鄰近埠
3. Node.js 版本:需 22+,部分系統預設 Node 版本過低會導致 MCP 伺服器啟動失敗
4. Codex 依賴:專案強繫結 Codex 生態,無法單獨作為通用 draw.io 自動化工具使用
5. 推理成本:複雜科學插圖建議用 Max 推理檔位,單次任務可能消耗數萬 tokens
6. 程序管理:draw.io 例項由外掛啟動後會持續執行,需手動關閉避免資源佔用
7. 匯出限制:依賴 draw.io 桌面版的匯出能力,某些複雜樣式可能在 PNG 匯出時渲染異常

中國使用者額外注意:Codex 桌面版獲取可能需要特殊網路環境,draw.io 官網國內可直連但下載速度慢,建議使用映象源或 GitHub Releases 下載。