The code panel

The code panel is where you write diagram code and turn it into shapes. It sits next to the assistant, top-right of the canvas, behind the </> button, and ⌥D opens and closes it.

Generating a diagram#

Open the panel, type or paste code, then Generate (or press ⌘↵). The diagram lands to the right of anything already on the board, and the code stays in the panel for tweaking. Generate again and the diagram updates.

title: Checkout

Cart [browser]
API [server, blue]
Payments [aws/lambda, green]
Ledger [cylinder, blue]

Cart -> API: checkout
API -> Payments: charge
Payments --> Ledger: record

Editing a diagram as code#

Select a generated diagram with the panel open, or right-click its frame and choose Edit as code, and the editor prefills with that diagram's source, linked to the frame. Generating then replaces the frame's contents in place, as a single undo step.

Both hand-written and AI-written diagrams are re-editable this way. When the assistant draws a diagram, a deterministic serializer stamps the equivalent code onto the frame, so it re-opens as text you can edit. See editing and round-trip.

The editor#

The editor colours what the compiler understands, so a typo shows up before you generate: family headers and directives read as keywords, connectors and ERD cardinalities as connectors, […] attribute lists as attributes, and // comments greyed out. A word that stays plain when you expected a keyword is the first sign it is not spelled the way the compiler reads it.

Autocomplete is context-aware, and offers what is legal in the position the caret is in:

• At the start of the first line, every family (architecture, sequence, gitgraph, venn, …) and the directives.
• At the start of a later line, that family's own openers — group and legend in a graph, screen and the control kinds in a wireframe, loop / alt / note in a sequence, commit / branch / merge in a git graph, section in a gantt or journey, overlap in a venn — plus every name already used in the document.
• After a connector or comma, the connectors and the existing names.
• Inside […], the attribute keys and their values: palette colours, shapes, fills, frames, head: marks, widths, and the icon catalog (type a set prefix like aws/ to list just that set).

↑ / ↓ move through the menu, ⏎ or Tab accepts, Esc dismisses it, and Ctrl Space asks for it explicitly. ⌘↵ always generates, menu or no menu.

Manual edits#

Dragging shapes around afterwards does not update the stored code. The code and the shapes are two views that only sync when you Generate. Regenerate from the panel to make the code authoritative again.

Pasting Mermaid or eraser.io#

When pasted text looks like Mermaid or eraser.io, the panel offers a one-click Convert into this language. Conversion is a one-shot import: it rewrites the text into Koboyo diagram code, which you then edit and generate like anything else.

Diagnostics#

Warnings and errors appear under the editor, keyed to the line. The diagram still renders; a bad line is dropped, not fatal. This is the same forgiving behaviour described in error handling.

Server [chartreuse]
Cache [cylinder, blue]
Server -> Cache