drawgent puts your own coding agent (Claude Code, Codex or opencode) on a live Excalidraw canvas: it draws, reads what you draw, and keeps diagrams tied to the code.

The agent drawing this repository's architecture

Start here #

Page	For
Getting started	Install, `setup`, your first diagram in five minutes
Use cases	Step-by-step walkthroughs: understand a codebase, design then build, review a PR, whiteboard without code, work in a teammate's document

Features #

Page	What's in it
The canvas	Chat panel, `AGENT:` notes, undo, several boards, `.excalidraw` files in the repo
Laser and gestures	Point at part of a diagram, gestures (cross out, arrow, ↔…), the poll of tasks
Code and diagrams	Code links, the Code tab, the repo map, pointing at code, Build what I drew, `drawgent check` in CI
Agents	Claude Code, Codex, opencode: setup, the built-in bridges, `--attach`, permissions
Shared rooms	excalidraw.com rooms and self-hosted Excalidraw servers (`remote add`)
Browser extension	drawgent in a sidebar next to any Excalidraw document (Firefox)
Running drawgent	Background mode, canvas only, remote machines, tokens, Docker

How it works #

The browser, the drawgent server, your coding agent and its MCP canvas tools

The agent: drawgent starts your agent (or connects a session you run) and gives it canvas tools over MCP.
The canvas: the editor in your browser syncs with drawgent over a WebSocket.
The renderer: a headless Chrome renders screenshots when the agent needs to see.
Rooms: in a shared room, drawgent is one more collaborator.

Reference #

Page	What's in it
Reference	Every command and option, the config file, environment variables, the MCP tools, the REST API
Development	Building, the code layout, tests, releasing, regenerating these images