drawgent – 运行在实时 Excalidraw 画布上的 AI 编程助手
TL;DR
drawgent 将你自己的 Claude Code、Codex 或 opencode 实例连接到 Excalidraw 白板，允许你在画布上输入 AGENT: 笔记或使用激光区域，并让 LLM 实时编辑图表。 这创造了一种双向工作流，视觉头脑风暴可以直接驱动具备代码感知能力的图表更新。
drawgent 的功能
- 实时画布编辑 – 代理会监视屏幕截图和场景快照，发出 MCP 工具调用（添加、更新、删除元素），并在完成后将笔记标记为
DONE:。 - 多种后端支持 – 通过各自的 ACP 适配器支持 Claude Code、Codex 和 opencode。不捆绑任何代理二进制文件；你需要提供自己的 CLI。
- 两种交互模式 –
- 聊天面板：位于 Web UI 右侧，用于输入请求。
- 画布触发器 (
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
架构概览
- 浏览器 UI – 基于 React 的编辑器，带有聊天面板和激光区域处理功能。
- drawgent 服务器 (Rust) – 管理 ACP 会话、MCP 工具服务器、Chrome 渲染器和 WebSocket 同步。
- 代理进程 – 分叉或实时附加的 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 分叉、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文件仅包含实时元素，经过美化格式化，且仅在画布更改时更新，从而产生干净的差异对比。 - 房间模式 – 当你提供 Excalidraw.com 房间 URL 时，drawgent 将作为协作者加入。流量通过房间密钥进行端到端加密，本地 UI 会镜像远程房间。
- Docker 选项 –
docker compose up --build运行一个画布服务器 (drawgent + Chromium)，不带任何代理，适用于共享白板或房间桥接。
构建与分发
- 从源码构建 –
npm ci && npm run build构建 Web 资源，然后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 服务器；分享具体的用例有助于项目的成熟。
Sources
相关
- 项目
- 项目
- 项目
- 项目
- 项目