Run a coding agent on a live Excalidraw canvas
Clone this repository. Task: Clone this repository For self-hosted knots, clone URLs may differ based on your setup. Rust 79% JavaScript 16% CSS 3% Shell 1% Makefile <1% 3 more languages <1% drawgent connects your own Claude Code, Codex or opencode (your install, login, config and repository) to an Excalidraw whiteboard. Ask for a diagram in the chat panel, write AGENT: … next to the part of a drawing you want changed, or point at it with the laser. The agent looks at the canvas (scene and screenshot), edits it live and checks its own layout. It keeps every box linked to the code it stands for, and it can change the code to match what you drew. How it works # The server: drawgent is a single binary. It serves the editor, keeps the boards, and runs a headless Chrome to render screenshots. The agent: drawgent starts your agent, or connects a session you already run, and gives it canvas tools over MCP. Rooms: in a shared excalidraw.com room or a self-hosted Excalidraw document, drawgent is one more collaborator. Install # drawgent is a single static binary. Download the latest release, 0.2.1, for your platform: Or from a terminal (set t to your platform's name from the table): macOS: the binary isn't notarized. Run xattr -d com.apple.quarantine ~/.local/bin/drawgent once. Other versions: every release is on the tags page. From source: see Development. Quick start # You need one agent installed and logged in (claude, codex or opencode). Nothing else: no Node.js, no Docker. Then ask: "Draw the architecture of this repository, grouped by role, each box linked to its code." The full walkthrough, with install and troubleshooting, is in Getting started. Features # Talk to the agent where the drawing is # Chat panel: replies and tool calls stream in, permission prompts show as buttons, and Stop cancels a turn. Under each turn: the tokens it used, context use and cost. AGENT: notes: a note written on the canvas fires once you stop typing, with what it points at. The agent answers with a green DONE: note. Undo: agent edits go on the undo stack. Ctrl+Z reverts them, and ↶ Undo reverts a whole turn. → The canvas Point with the laser, pick a task # Circle, cross out, connect or push apart parts of a diagram with Excalidraw's laser (K). drawgent recognises the gesture and what it's on. Two seconds later, a poll offers 2 or 3 tasks that would be tedious by hand, plus Other…: Drill down into a component, from its code; Trace A → B in the code; Remove from the architecture, with its impact on the code; Make room and re-balance. Crossing out a box also tells the agent what the deletion breaks. → Laser and gestures Diagrams linked to code # Code links: every box can point at a file, lines and a symbol, and opens it in the Code tab. Links are checked as ✅ ok, ↕ moved, ⚠ stale or ❌ missing, and drawgent check fails CI when they break. Repo map: 🗺 Map repo draws the workspace as a treemap, with every file linked. Pointing at code: point at folders, files and lines instead of typing paths. 🔨 Build what I drew: change the diagram and the agent implements the change, marking progress on the canvas. → Code and diagrams Boards, and diagrams in the repository # Boards: as many boards per workspace as you like. Move or copy diagrams between them, or split one by its frames. In the repository: --diagram docs/architecture.excalidraw keeps a board in a clean, diffable .excalidraw file that follows git pull. → The canvas Your agent, your way # Agents: Claude Code and Codex through bridges built into drawgent, opencode natively. Sessions: a new one, or --attach to one you're running; Claude sessions are forked, opencode and Codex sessions joined live. Permissions: --permissions canvas|ask|all. → Agents Shared documents and the browser extension # Rooms: join an excalidraw.com room, or any document on a self-hosted Excalidraw (drawgent remote add, behind SSO or not), as a collaborator. Firefox extension: a drawgent sidebar next to the document you have open. One click joins it, and your laser strokes there become gestures. → Shared rooms · Browser extension Runs where you work # Background: drawgent up -d, then status and down. Canvas only: --no-workspace, for diagrams with no codebase behind them. Remote machines: the ssh -L hint on headless machines, --token for anything exposed. → Running drawgent Documentation # Commands # Every option is in the reference. Limits # Chrome: the renderer needs Chrome or Chromium. setup finds or installs one.; tools: custom-built or unnamed agent. Human role: The original post does not say how a person stayed involved.; limitations: Prerequisites include a logged-in coding agent and Chrome/Chromium for rendering. macOS binaries are not notarized and require manual quarantine removal. Limitations include: Claude --attach creates a fork rather than live injection; Codex live attach is untested; shared rooms mirror only one board and do not sync images. Source reliability is secondary, based on project documentation..
Tools
custom-built or unnamed agent
Published on Agent Work Atlas:
Overview
Clone this repository
Workflow
Clone this repository For self-hosted knots, clone URLs may differ based on your setup. Rust 79% JavaScript 16% CSS 3% Shell 1% Makefile <1% 3 more languages <1% drawgent connects your own Claude Code, Codex or opencode (your install, login, config and repository) to an Excalidraw whiteboard. Ask for a diagram in the chat panel, write AGENT: … next to the part of a drawing you want changed, or point at it with the laser. The agent looks at the canvas (scene and screenshot), edits it live and checks its own layout. It keeps every box linked to the code it stands for, and it can change the code to match what you drew. How it works # The server: drawgent is a single binary. It serves the editor, keeps the boards, and runs a headless Chrome to render screenshots. The agent: drawgent starts your agent, or connects a session you already run, and gives it canvas tools over MCP. Rooms: in a shared excalidraw.com room or a self-hosted Excalidraw document, drawgent is one more collaborator. Install # drawgent is a single static binary. Download the latest release, 0.2.1, for your platform: Or from a terminal (set t to your platform's name from the table): macOS: the binary isn't notarized. Run xattr -d com.apple.quarantine ~/.local/bin/drawgent once. Other versions: every release is on the tags page. From source: see Development. Quick start # You need one agent installed and logged in (claude, codex or opencode). Nothing else: no Node.js, no Docker. Then ask: "Draw the architecture of this repository, grouped by role, each box linked to its code." The full walkthrough, with install and troubleshooting, is in Getting started. Features # Talk to the agent where the drawing is # Chat panel: replies and tool calls stream in, permission prompts show as buttons, and Stop cancels a turn. Under each turn: the tokens it used, context use and cost. AGENT: notes: a note written on the canvas fires once you stop typing, with what it points at. The agent answers with a green DONE: note. Undo: agent edits go on the undo stack. Ctrl+Z reverts them, and ↶ Undo reverts a whole turn. → The canvas Point with the laser, pick a task # Circle, cross out, connect or push apart parts of a diagram with Excalidraw's laser (K). drawgent recognises the gesture and what it's on. Two seconds later, a poll offers 2 or 3 tasks that would be tedious by hand, plus Other…: Drill down into a component, from its code; Trace A → B in the code; Remove from the architecture, with its impact on the code; Make room and re-balance. Crossing out a box also tells the agent what the deletion breaks. → Laser and gestures Diagrams linked to code # Code links: every box can point at a file, lines and a symbol, and opens it in the Code tab. Links are checked as ✅ ok, ↕ moved, ⚠ stale or ❌ missing, and drawgent check fails CI when they break. Repo map: 🗺 Map repo draws the workspace as a treemap, with every file linked. Pointing at code: point at folders, files and lines instead of typing paths. 🔨 Build what I drew: change the diagram and the agent implements the change, marking progress on the canvas. → Code and diagrams Boards, and diagrams in the repository # Boards: as many boards per workspace as you like. Move or copy diagrams between them, or split one by its frames. In the repository: --diagram docs/architecture.excalidraw keeps a board in a clean, diffable .excalidraw file that follows git pull. → The canvas Your agent, your way # Agents: Claude Code and Codex through bridges built into drawgent, opencode natively. Sessions: a new one, or --attach to one you're running; Claude sessions are forked, opencode and Codex sessions joined live. Permissions: --permissions canvas|ask|all. → Agents Shared documents and the browser extension # Rooms: join an excalidraw.com room, or any document on a self-hosted Excalidraw (drawgent remote add, behind SSO or not), as a collaborator. Firefox extension: a drawgent sidebar next to the document you have open. One click joins it, and your laser strokes there become gestures. → Shared rooms · Browser extension Runs where you work # Background: drawgent up -d, then status and down. Canvas only: --no-workspace, for diagrams with no codebase behind them. Remote machines: the ssh -L hint on headless machines, --token for anything exposed. → Running drawgent Documentation # Commands # Every option is in the reference. Limits # Chrome: the renderer needs Chrome or Chromium. setup finds or installs one.
Reported result
Actual outcomes are not reported in the source; only language statistics (Rust 79%, JavaScript 16%) are provided. No metrics on diagram accuracy, code generation success, or performance are available. Proposed acceptance check: Verify that 'drawgent check' passes CI for a sample repository and that generated diagrams correctly link to existing code symbols.
Human role
The original post does not say how a person stayed involved.
Limitations
Prerequisites include a logged-in coding agent and Chrome/Chromium for rendering. macOS binaries are not notarized and require manual quarantine removal. Limitations include: Claude --attach creates a fork rather than live injection; Codex live attach is untested; shared rooms mirror only one board and do not sync images. Source reliability is secondary, based on project documentation.
Try it
I want to test drawgent on my local repository [replaceable: repo_path]. First, download drawgent v0.2.1 for my OS [replaceable: os_type] and install it to ~/.local/bin. Ensure my coding agent [replaceable: agent_name, e.g., claude] is logged in. Run 'drawgent setup [agent_name]' to verify the bridge. Then, start the server with 'drawgent up' in the repo directory. Open the browser canvas and ask: 'Draw the architecture of this repository, grouped by role, each box linked to its code.' Wait for the agent to generate the diagram. Review the output: check if boxes link to correct files using the Code tab. If the diagram is incorrect, use the laser tool to circle a box and select 'Drill down' or 'Remove'. Do not allow the agent to modify code files without my explicit approval via the permission prompt. If the initial diagram fails to link correctly, stop and report the error. Only proceed to 'Build what I drew' after confirming the diagram structure is valid. Measure success by verifying that 'drawgent check' returns no broken links for the generated diagram.
Source reports are not independently verified. Publication date is the catalog publication date, not the original article date.