drawgent – Excalidraw 即時畫布上的 AI 程式設計代理

TL;DR

drawgent 將您自己的 Claude Code、Codex 或 opencode 實例連接到 Excalidraw 白板，讓您可以在畫布上輸入 AGENT: 筆記或使用雷射區域，並讓 LLM 即時編輯圖表。 這創造了一種雙向工作流程，視覺化腦力激盪可以直接驅動具備程式碼感知能力的圖表更新。

drawgent 的功能

即時畫布編輯 – 代理會監控螢幕截圖與場景快照，發出 MCP 工具呼叫（新增、更新、刪除元素），並在完成後將筆記標記為 DONE:。
多種後端支援 – 透過各自的 ACP 轉接器支援 Claude Code、Codex 和 opencode。不綁定任何代理二進位檔；您需提供自己的 CLI。
兩種互動模式 –
1. 聊天面板：位於網頁 UI 右側，用於輸入請求。
2. 畫布觸發器 (AGENT: 文字筆記或雷射區域)：在短暫暫停後自動呼叫代理。
版本控制圖表 – 使用 --diagram 時，畫布會以乾淨的 .excalidraw 檔案形式保存，該檔案可提交至 Git，並在變更時同步回即時檢視。

快速入門檢查清單

安裝並登入其中一個支援的代理 (claude, codex, opencode)。
執行 drawgent setup <agent> – 此指令會驗證 CLI、登入狀態、ACP 橋接器、畫布工具與 Chrome 渲染器，並寫入 ~/.config/drawgent/config.toml。

在您的儲存庫目錄中，啟動工作階段：

drawgent up               # 啟動新的代理工作階段並開啟畫布
# 或附加到現有的工作階段
drawgent up --attach

選擇性地保存圖表：

drawgent up --diagram docs/architecture.excalidraw

架構概覽

drawgent architecture

瀏覽器 UI – 基於 React 的編輯器，具有聊天面板與雷射區域處理功能。
drawgent 伺服器 (Rust) – 管理 ACP 工作階段、MCP 工具伺服器、Chrome 渲染器與 WebSocket 同步。
代理處理程序 – 分岔 (forked) 或即時附加的 Claude/Codex/opencode 工作階段，負責接收 MCP 呼叫。
Chrome 無頭模式 – 為視覺化 (get_screenshot) 與元素幾何結構渲染畫布。

核心指令

指令	用途
`drawgent setup <agent>`	驗證環境、安裝 ACP 轉接器、設定 Chrome、寫入 `config.toml`。
`drawgent up`	啟動新的代理工作階段、啟動 UI，並在 `127.0.0.1:7300` 上提供畫布服務。
`drawgent up --attach [id]`	將 UI 連接到已執行的代理工作階段（Claude fork、opencode 即時 TUI 或 Codex 佇列）。
`drawgent up --diagram <path>`	將即時畫布保存至受 git 追蹤的 `.excalidraw` 檔案。
`drawgent up --room <url>`	以協作機器人 (`🤖 Agent`) 身分加入現有的 Excalidraw.com 房間。
`drawgent mcp`	獨立的 MCP 伺服器，為自訂指令碼公開畫布工具。
`drawgent serve`	用於容器化部署的低階伺服器；您透過 `--agent` 旗標指定代理。

有效使用畫布

AGENT: 筆記 – 將前綴放在圖形旁邊或繪製箭頭指向它。當您停止輸入後，drawgent 會等待約 2.5 秒，解析目標，並以綠色的 DONE: 筆記回覆。
雷射區域 – 啟用 Excalidraw 的雷射 (K)，圈選一個區域，紅色輪廓隨即出現。聊天面板會開啟並顯示包含所選元素的晶片（例如：🔴 Laser zone · API, Redis）。下一則訊息將與區域資料一併傳送；一旦代理完成，輪廓即會消失。
權限模型 – 預設情況下，繪圖工具會自動核准 (canvas 權限)。其他動作（例如檔案寫入）需要在聊天面板中明確核准。

持久化與協作

Git 追蹤圖表 – .excalidraw 檔案僅包含即時元素，經過美化格式處理，且僅在畫布變更時更新，從而產生乾淨的 diff。
房間模式 – 當您提供 Excalidraw.com 房間 URL 時，drawgent 會以協作者身分加入。流量會使用房間金鑰進行端對端加密，且本地 UI 會鏡像遠端房間。
Docker 選項 – docker compose up --build 可執行畫布伺服器 (drawgent + Chromium) 而無需任何代理，適用於共享白板或房間橋接。

建置與發布

從原始碼建置 – npm ci && npm run build 建置網頁資產，然後 cargo install --path . 產生二進位檔。
靜態 Linux – make musl 建立完全靜態的 x86_64 二進位檔；針對 ARM 設定 MUSL_TARGET。
macOS 通用 – make darwin 使用 Zig 從 Linux 交叉編譯通用二進位檔 (Intel + Apple Silicon)；arm64 切片已進行 ad-hoc 簽署。
相依性 – 渲染需要 Chrome/Chromium；安裝程式可以下載無頭 shell 或使用系統套件管理員。

來自 Hacker News 的社群見解

seemaze 指出 Excalidraw 已經提供第一方的 MCP 端點與伺服器 (https://mcp.excalidraw.com)。drawgent 的自訂 MCP 層增加了 Claude 與 Codex 的即時附加功能，這是官方端點尚未公開的。

armanj 分享了在 Obsidian 內部使用 Mermaid 的個人工作流程，並指出雖然 Mermaid 對“代理友善”，但 drawgent 透過直接編輯畫布提供了更豐富的視覺回饋迴圈。

4ndrewl 強調圖表繪製的真正價值在於它所引發的思考，drawgent 透過讓 LLM 即時迭代草圖來支援這一原則。

raesene9 提到 Excalidraw Obsidian 外掛作為替代方案；然而，drawgent 將圖表保存在儲存庫中並附加到現有代理工作階段的能力，提供了與程式碼庫更緊密的整合。

bad_haircut72 推薦 whiteboard-MCP 服務 (whiteboard-mcp.com) 作為架構圖生成的另一種選擇，突顯了 MCP 相容工具生態系統的成長。

brumar 發布了一個類似的專案 whiteboard-agents，可以檢視其以獲取實作想法，並與 drawgent 專注於 Excalidraw 與多代理支援的重點進行對比。

ramoz 認為基於 HTML 的白板可以為代理提供比 Excalidraw 等 JSON 密集型格式更豐富的語意，但 drawgent 已經證明 LLM 可以有效地操作 Excalidraw 的 JSON 模型。

需注意的限制

Chrome 相依性 – 目前的渲染器依賴 Chrome/Chromium 二進位檔；計畫開發原生渲染器，但目前尚未提供。
Claude 附加模型 – 由於 Claude Code 缺乏公開的注入 API，drawgent 為每個畫布附加動作分岔出一個新的 Claude 工作階段。
Codex 即時附加 – 已實作，但在撰寫本文時尚未完全使用已登入的 Codex 帳號進行測試。
每個工作區單一場景 – 僅支援一個即時畫布與一個 .excalidraw 檔案；影像或其他資產不會同步。

參與貢獻

執行測試套件 – cargo test 涵蓋了分數索引與房間加密；Node 指令碼 (smoke.mjs, e2e-browser.mjs 等) 驗證了端對端的畫布互動。
貢獻 – 儲存庫主要使用 Rust (約 77% 的程式碼)，並搭配小型的 JavaScript/HTML 前端。關於原生渲染、多場景支援或更廣泛的 MCP 相容性問題都是很好的切入點。
分享工作流程 – 社群成員已經發布了替代的白板工具、基於 Mermaid 的外掛與自訂 MCP 伺服器；分享具體的使用案例有助於專案成熟。