Hacker News 中文摘要

RSS订阅

Drawgent：在实时 Excalidraw 画布上运行的编程 agent -- Drawgent: Coding agent on a live Excalidraw canvas

原文链接 | HN讨论 | 2026-09-27 09:11:06

绘图代理（drawgent）将你自己的克劳德代码（Claude Code）、码本（Codex）或开放代码（opencode）（即你本地的安装、登录、配置与仓库）连接到绘图白板（Excalidraw）上。你可以在聊天面板中请求一张示意图，或在想要修改的图画旁写下 AGENT: …。该代理会查看画布（截图与场景），实时编辑，检查结果，并将笔记标记为 DONE。

正文

drawgent：运行在实时 Excalidraw 画布上的编码智能体

drawgent 把你自己的 Claude Code、Codex 或 opencode（包括本地的安装、登录、配置和仓库）连接到 Excalidraw 白板。你可以在聊天面板里要求画一张图，或者在想修改的绘图旁写上 AGENT: …。智能体看着画布（截图加场景）实时编辑，检查结果，然后把便签标记为 DONE。

快速开始

前提：已安装并登录 claude、codex 或 opencode 其中之一，Claude 和 Codex 桥接还需 Node.js ≥ 18（npm）。

先执行 drawgent setup claude（每个智能体只需一次，参数可选 claude、codex 或 opencode）；进入仓库目录 cd ~/my-repo；运行 drawgent up 在该仓库新建智能体会话并在浏览器打开画布；或用 drawgent up --attach 挑选正在运行的会话并连接画布。

drawgent setup <agent>

该命令一次性检查所有依赖，缺失时精确报错并给出修复方法，然后写入 ~/.config/drawgent/config.toml：

  1. 智能体命令行：PATH 中的 claude / codex / opencode。
  2. 登录状态：分别检查 claude auth status、codex login status 或 opencode auth list。
  3. ACP 桥接：opencode 自带 ACP（opencode acp）；Claude Code 和 Codex 使用官方 ACP 适配器，一次性装到 ~/.cache/drawgent/adapters（约 60 MB，不含捆绑的智能体二进制），并指向你自己的 CLI（CLAUDE_CODE_EXECUTABLE、CODEX_PATH）。安装后验证 ACP 握手。
  4. 附加会话的画布工具：仅 Codex 需改动，执行 codex mcp add drawgent -- drawgent mcp；Claude 和 opencode 在附加时自动获取。
  5. 渲染器用的无头 Chrome：若已有 Chrome/Chromium 则直接用，否则建议下载 Chrome Headless Shell（Chrome for Testing，约 120 MB，无需 sudo）到 ~/.cache/drawgent/chrome，并精确提示缺失的系统库；或用包管理器（apt、snap、dnf、pacman、zypper、apk、brew 或无需 sudo 的 nix）装 Chromium。

非交互模式可传 --chrome download | system | /path/to/chrome。若配置记录的某项消失或该智能体未设好，drawgent up 会拒绝启动。

drawgent up

在当前目录（工作区）运行： - 启动编辑器与 API 于 127.0.0.1:7300（被占用则顺延端口）； - 通过 ACP 启动该智能体的新会话并在工作区工作； - 打开浏览器，无头机器上则打印 ssh -L 命令。

场景存于 .drawgent/scene.json，已自动加入 git 忽略。

drawgent up --attach [id]

把画布连到你已运行的会话。不带 id 时会列出找到的会话（当前目录优先）供选择：

| 智能体 | 发现方式 | 画布连接机制 | | --- | --- | --- | | Claude Code | claude agents --json（交互与后台会话） | fork：新建携带完整对话的会话，由 drawgent 通过 ACP 驱动，终端会话不受影响 | | opencode | 本地监听的 opencode 服务：用 opencode --port 4096（或 opencode serve）启动 TUI | live：消息进入运行中的会话（TUI 可见）；drawgent 运行时加 MCP 工具到该服务；TUI 里的回复、工具调用和提示镜像到聊天面板 | | Codex | ~/.codex/sessions 中的会话 | live：codex queue --thread <id>；回复从会话 rollout 文件镜像。会话需 drawgent MCP（由 setup 注册，Codex 启动时加载） |

使用画布

  • 聊天面板（右侧）：发请求、看回复和工具调用流入、批准权限提示，按 Stop 取消一轮。
  • 画布上：在图形旁或内写以 AGENT: 开头的文本，或从便签画箭头指向图形。停输约 2.5 秒后触发，附带位置、指向物和附近内容。智能体将其落实为绿色 DONE: … 便签；改回 AGENT: 可重发。
  • 激光区：选 Excalidraw 激光笔（K）在图上圈涂。轨迹留为红色轮廓，聊天面板待命并带芯片列出覆盖物（如 🔴 Laser zone · API, Redis ×）。下条消息连同区域（边界和元素）发给智能体，完成后轨迹消失。间隔 4 秒内的笔画算同一区，× 丢弃。
  • 提示排队逐一运行，已处理的排队便签跳过。

运行 drawgent up --room 'https://excalidraw.com/#room=<id>,<key>' 可加入共享房间：drawgent 作为协作者（🤖 Agent，光标随编辑移动）加入。人可留在 excalidraw.com，其 AGENT: 便签会到达你的智能体，编辑实时显示。通信经房间密钥端到端加密，空房间从 excalidraw 的 Firestore 加载保存。本地编辑器镜像房间且保留聊天面板。

其他命令

  • drawgent mcp：带画布工具的 stdio MCP 服务，由智能体启动，自动发现运行的 drawgent up。
  • drawgent serve：底层服务，显式指定智能体（--agent claude,codex,opencode 或 name=command 任意 ACP 智能体），供脚本和容器用。
  • up / serve 选项：--port、--room、--token（API bearer 及 URL 中 ?token=）、--permissions canvas|ask|all（默认 canvas：绘图工具自动准，其余在面板问）、--data、--settle-ms。

可选：Docker

执行 docker compose up --build 运行画布服务（drawgent + Chromium，不含智能体），如托管共享画布或房间桥。智能体绝不打包，始终用你自己的环境运行。

从源码构建

运行 npm ci && npm run build 构建编辑器与渲染页到 dist/（嵌入二进制），再用 cargo install --path . 或 cargo build --release 编译。

智能体工具（MCP）

包括 get_scene、get_screenshot（视觉，用 element_ids 缩放）、add_elements（Excalidraw 骨架，箭头按 id 绑定并边到边布线）、add_mermaid（自动布局）、update_elements（标签跟随图形，绑定箭头重布线）、delete_elements、clear_canvas、list_instructions、resolve_instruction、set_status。

API

提供 GET /api/health、GET /api/scene、GET /api/screenshot?ids=&padding=&max=、POST|PATCH|DELETE /api/elements、POST /api/mermaid、POST /api/clear、GET /api/instructions、POST /api/instructions/{id}/resolve、POST /api/status、POST /api/chat {agent?, text} 及 WS /ws（浏览器同步与聊天事件）。

测试

运行 cargo test 测分数索引与房间加密/分帧；node scripts/smoke.mjs [url] 测聊天与 AGENT: 便签；node scripts/e2e-browser.mjs [url] 用真实浏览器测面板与画布输入；node scripts/room-e2e.mjs 测 excalidraw.com 房间双向；node scripts/laser-e2e.mjs 测激光区到智能体编辑（需先 setup claude）。

结构

src/（Rust）： - main.rs：CLI。 - setup.rs、config.rs、chrome.rs：安装、配置、渲染器。 - attach.rs：会话发现与选择。 - agents.rs + acp.rs：ACP 驱动（新建/fork 会话）。 - live.rs：opencode / Codex 实时驱动。 - hub.rs：路由、便签、聊天日志。 - scene.rs：存储与编辑。 - renderer.rs：基于 CDP 的 Chrome。 - mcp.rs：MCP 服务。 - room.rs：excalidraw.com 客户端。 - fractional.rs、geometry.rs、el.rs：辅助。

web/：编辑器（main.jsx、chat.jsx、laser.js）与渲染页（render.jsx）。

限制

  • 渲染器需 Chrome（计划做原生渲染器）。
  • Claude 的“attach”是 fork，因 Claude Code 无公开方式注入运行中的终端会话。
  • Codex 实时附加已实现，但尚未对登录态 Codex 测试。
  • 每工作区一个场景，图片/文件不同步。

评论

讨论围绕智能体如何更好地借助白板类工具与人协作，主流意见认为现有专用工具对模型不友好且生成图质量差，分歧在于应转向 Mermaid/HTML 等文本语义载体，还是继续打磨集成方案。

认为现有白板工具对智能体不够友好，Mermaid 等文本格式更合适

  • 开发者尝试给智能体配白板协作，发现包括 Excalidraw 在内方案不达预期，最终用 Mermaid 做插件实现共同编辑脑暴（较多人） > 我意外发现当前方案包括 Excalidraw 都不够好，反而 Mermaid 最适配智能体（@armanj）

认为直接用 HTML 比专门白板 DSL 更符合智能体能力

  • 有人认为许多项目低估 HTML，Excalidraw 等 MCP 需模型算坐标框，而 HTML 给模型自然语义和样式零抽象，近期模型画逻辑流程图已很好（少数人，反直觉） > 用 HTML 智能体得到自然语义且零抽象，模型能出色画出各类图（@ramoz）

认为智能体格式依赖明显，AI 生成图表质量仍差

  • 开发者指出智能体对 SVG 等训练多而小众格式弱，策略是做原生渲染器让模型读图迭代；并直言尚未见到不像垃圾的 AI 图（较多人） > 智能体在特定格式上强但小众格式弱，还没见过真正好的 AI 图（@dtkav）

认为画图价值在于思考过程而非产物

  • 用户强调从画图中梳理思路能暴露团队知识盲点和假设，工具只是载体（较多人） > 画图得到的价值源于思考，它揭示我们知识和假设的缺口（@4ndrewl）

认为手绘风格工具能套利反 AI 偏见获取注意力

  • 经验称 Excalidraw 因貌似手绘，让未意识到可自动化的人及反 AI 者仍给关注，甚至可绕过社区禁 AI 令（少数人，反直觉） > 只要看起来像人画的，反自动化偏见者也会给注意力（@augment_me）

认为集成现有 AI 账户到应用内很笨拙

  • 想把自己 ChatGPT/Claude 账户接进第三方应用供智能体用，但即使最佳 MCP 也繁琐（少数人） > 连接已有账户给应用内智能体用的一切尝试都很笨重（@tetrisgm）

开源项目应利用 AI 轻松做视觉演示进 README

  • 吐槽很多项目 README 冗长却无图视频，如今 AI 生成演示极易，作者应花几分钟加媒体免得克隆运行（少数人） > 现在粘贴图让 AI 写进 README 很容易，别再只写百行文档（@AM1010101）

有价值的补充

  • Excalidraw 官方已提供开源 MCP 端点与服务器，可直接接入（@seemaze）
  • likec4 作为不同用例，大语言模型对其操作熟练（@0xdeafbeef）
  • tldraw 具备较多程序化访问接口，但模型制图能力与工具使用间仍有差距待弥合（@jimmySixDOF）
  • whiteboard-mcp 在架构图创建上表现优于其他免费替代（@bad_haircut72）
  • 有相似开源白板智能体项目可对比实现笔记（@brumar）