Editable canvases

Two canvases, one move. Someone dragged the blue card down on both. Drag it again, or press Move the card, and watch the two arrows.

Before the move, both arrows looked identical. Only one survived the drag. That is the whole lesson in one move: a canvas is worth what survives the next person's drag.

A finished figure is drawn once for readers. A canvas is for pictures people keep editing. So build it from real relationships (arrows bound to shapes, cards grouped in frames), not from coordinates that only happen to look right today.

Which tldraw to use

tldraw is an open-ended whiteboard, and it gives agents three ways in. Which one you use depends on where you are.

Six rules for a board that stays editable

1. Bind every meaningful arrow

   Create arrows with helpers.createArrowBetweenShapes, so they are bound to both shapes. A raw arrow placed by coordinates detaches on the next drag. Unbound arrows are for decoration only.

2. Generate structure, don't place it

   A flowchart, sequence, state machine or mind map comes from helpers.mermaid(source), which writes bound shapes for you. On a canvas, Mermaid is the right start, because people rearrange the result.

3. A card and its words are one shape

   Put the label inside the shape's own text. A long label needs a bigger card, not a separate text box laid on top. Loose text is only for words that stand alone, like a heading over a group.

4. Arrange with the editor, not arithmetic

   Use align, stack and distribute, and draw containers as frames. Shapes inside a frame are positioned relative to it, and text never crosses a frame's edge.

5. Lint before you call it done

   Run helpers.getLints() and fix every lint your edit introduced, on the shapes you touched. Don't tidy a neighbour nobody asked you to move.

6. One accent here too

   Canvas colors are names (blue, orange, grey), not hex codes. Pick one named color for the focal shapes and keep the rest neutral.

People share the board

A canvas is a team's space, and an agent working on it is a guest. Three habits make it a good one.

Comments are instructions with an address. An anchored comment is pinned to the shapes it means, so the agent reads the threads first and uses each anchor to find its target. It replies in the thread it acted on and resolves it. A thread addressed to someone else is not its job.

Ambiguity stops the edit. "Make the important one stand out" over six identical cards is a question. An unanswered question is not permission to pick one.

Scripts are code. A board can carry scripts that run whenever the file opens. So treat a .tldraw file from someone else the way you'd treat code from someone else, and ask before writing to a board whose scripts you didn't start.

Two more small things on Desktop: never edit a .tldraw file while it's open in the app, and save with helpers.saveDoc() yourself instead of asking the person to.

When the board becomes a figure

Boards often grow into something worth publishing. When that happens, redraw it as a finished figure from the board's structure: its shapes and the bindings between them. Don't screenshot it. A screenshot keeps the mess and loses the meaning.

Open the planning board in tldraw.
First read every comment thread; act only on threads addressed to you, reply in that thread, then resolve it.
Build the signup flow from a Mermaid source so every arrow is bound. Labels go inside their cards; group the flow in a frame.
Use one named color (blue) for the focal step and grey for the rest.
Run getLints and fix every lint your edit introduced. Don't move shapes you weren't asked to touch.
If a request is ambiguous (which card is "the important one"?), ask me instead of guessing.