One canvas for everything you are working out.

Words, diagrams, and code live on the same surface. Everything below is a real capture of the canvas, with an example board.

Write it down while it is still rough.

Notes come in five soft colors, so you can sort by eye. Press / for commands, and search every note from the sidebar.

Three colored notes on the canvas: Why retry at all, Open question, and Decision.

Draw the system when words stop helping.

Add rectangles, ellipses, diamonds, cylinders, and containers. Join them with labeled connectors that stay attached when you move things. Pick straight, elbow, or curved routes.

A flowchart built from a rectangle, cylinder, diamond, and ellipse, joined by labeled connectors.

Keep the code beside the thinking.

Code blocks highlight 13 languages, with line numbers, wrapping, and one-click copy. Expand a block when you need focus, and press Esc to return to the board.

A TypeScript code block with line numbers on the canvas, next to a Decision note.

Give each project its own room.

Frames group related work, and move and collapse as one. Spaces keep separate boards apart, and you switch between them from the sidebar.

The sidebar lists three Spaces and searchable notes, next to a frame titled Retry plan that holds two notes.

Your work stays on your device.

Guest boards save to your browser's IndexedDB as you edit, and the header shows when a save succeeds. That also means they stay in that one browser. Cloud sync is coming, and it is not here yet.

Read the privacy details

The canvas with three example notes and the header status Saved in this browser.

Let an agent do the layout.

Four MCP tools let an agent plan positions, check for collisions, arrange a board, and create objects. This is a real response from suggest_positions.

Connect a local agent

{
  "base_revision": 0,
  "geometry_version": 1,
  "engine_version": "barrio-local/1",
  "strategy_used": "local",
  "seed": 1,
  "options": { "gap": 24 },
  "positions": {
    "a": { "x": 0, "y": 0 },
    "b": { "x": 0, "y": -124 }
  },
  "bounds": { "x": 0, "y": -124, "width": 200, "height": 224 },
  "moved_ids": [],
  "collision_pairs": [],
  "label_conflicts": [],
  "warnings": [],
  "complete": true
}

The canvas is one click away.

Open canvas