What it is
The editor is a plain textarea over a syntax-colored layer. The visual flow on the right is not a second document: it is computed from the text on every render by parsing the lines and running the layout engine. Nothing is stored for the diagram, so nothing can drift.
That is why the pane header reads “Generated from text · read-only”. You cannot drag a box, and you never need to. The text is the only source of truth.
How it works
On every change the app calls parse() on the document and buildFlow() on the result, with a canvas-backed measurer so card heights match how the browser wraps the words. The layout is a pure function of the text: the same document always draws the same picture.
Cards carry a 0.35s transition on position, so a new line pushes the boxes below it down in a glide. Lines that did not exist a moment ago are found by a line diff and their nodes scale in at their final spot instead of sliding from a sibling’s old one. Reduced-motion settings turn both off.
Hover works both ways. Hover a line and its node rings violet and scrolls into view; hover a node and the editor highlights and scrolls to its line.
Why it matters
Mid-flow edits are the point. Inserting a step between two others is one Enter and one sentence; the diagram reflows around it. Mistakes surface as you make them: a line the parser cannot place tints red and the sync chip switches from “In sync” to “Check line N”.
Limits
Rendering runs on the main thread with no debounce. The grow-in animation is skipped when more than 30 lines arrive at once, such as a large paste. Before the first line the canvas reads “Nothing to draw yet”.
How to use it
- Type a stepWrite a sentence on its own line. A card appears under Start before you finish typing it.
- Insert in the middlePut the caret at the end of any line and press Enter. The new line keeps the indent above it; the boxes below glide down.
- Watch the sync chipThe header pill reads “In sync” while the document parses, or “Check line N” when a line cannot be placed.
- Hover to locateHover a line and its node rings violet; hover a card and the editor scrolls to its line.
- ZoomUse − and + in the toolbar, hold Ctrl or ⌘ and scroll, or click the percentage to type a value. Zoom runs from 25% to 250%.
Commands & shortcuts
| Enter | New line at the same indent; two spaces deeper after .then or .if |
| Ctrl / ⌘ + scroll | Zoom the diagram toward the cursor (trackpad pinch works too) |
| Click the % readout | Type a zoom level; Enter commits, Esc cancels |
| “Check line N” | Sync chip state when a line fails to parse |
Tips
- Each line is one card. Long sentences wrap inside the card rather than widening it, so keep steps short and put detail in a .note.
- The caret line’s number turns violet in the gutter. Use it to find yourself after a long scroll.
- Fullscreen the diagram with the Fullscreen button in the toolbar when presenting; Esc brings the panes back.
- Reduced-motion settings in your OS turn off the glide and grow-in animations.
Questions
Is there a save-and-render step?
No. Parsing and layout happen inside the same render as the keystroke. Saving is separate and automatic; the sync chip shows “Saving…” and “In sync”.
Can I move a box in the diagram?
No. Positions come from the text and the layout engine. To move a step, move its line: drag the ⋮⋮ handle or cut and paste.
Why did a line turn red?
The parser could not place that line, usually a .then outside an .if or an unknown command. No card is drawn for it until it parses, and the sync chip names the first bad line.