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.

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.

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