Draft Canvas Open editor
OverviewAll docs

Draft Canvas documentation

Draft Canvas is a tool for drawing and explaining software quickly, with modest architectural assistance. It runs in your browser or as a desktop app, with no backend and no account.

New here? Start with Getting started. It takes a few minutes.

Using Draft Canvas#

Guide Read it to
Getting started Draw a Service → Queue → Worker, add a note, present it as a flow, and export it
Shapes, connectors and boundaries Pick the kind of a shape, say what an arrow means, show the reply, mark the failure path
Flows and presenting Build a numbered path through the diagram and walk the room through it
Architecture examples Start from one of thirteen composed architectures and patterns, and see which five are offered up front
Explain a system at different levels Keep the overview small and draw the detail inside a shape, C4-style
Mark what is still open Attach a tentative, awaiting-input or parked point to a shape or connector, and pick the discussion up next time
Keyboard shortcuts and the command palette Draw quickly without the mouse
Saving, backing up and sharing Know what is saved for you, what isn't, and how to move a diagram between browsers
Draft Canvas Desktop Start a Quick Draft from the menu bar or tray, keep diagrams as files and folders, and build the app
Connect an AI agent Let a coding agent such as Claude Code draw and revise diagrams in the desktop app

Inside the app, the toolbar's More menu has Documentation (this index) and Keyboard shortcuts (?), and the command palette (⌘K) searches every command by name.

Running your own copy is covered in the README. The VS Code extension has been retired.

Contributing and reference#

Document Read it to
Contributing Set up, find your way around the repository, run the checks, and send a change
AGENTS.md Learn the rules that are load-bearing before touching core code
Architecture Understand why it is built this way: one renderer, the canvas/store boundary, persistence, and what is deliberately not built
Architecture semantics See what Draft Canvas understands about a diagram: node categories, the connector capability matrix, suggestion rules
Document schema Find the file format, version history and the import-validation contract
Privacy See exactly what is stored, where, and what leaves your machine
Performance Read the benchmark methodology and the latest results
The website Build, preview and deploy the landing page, and see how the editor's move was made safe
Agent integration See how the desktop app's MCP connector works: tools, guarantees about retries and saving, layout, C4, security and limits
Desktop updates Set up and check the desktop app's signed updates (maintainers)
What comes next The five pieces of work kept out of 1.12, in order, with scope and limits
Security Read the threat model, key lifecycle and how to report a concern
Changelog See what changed in each release

Where documentation lives#