Editing and round-trip

The assistant generates diagrams through its JSON tools, and a deterministic serializer writes the equivalent diagram code onto the generated frame. No model is involved: serialization is a pure function of the diagram. That is why any AI diagram re-opens as editable code.

The round-trip is pinned#

The round-trip is guaranteed by tests. Emitted code reparses to the same normalized diagram, and re-serializing reproduces the text byte for byte. Ids the language cannot spell are normalized first to what the parser would derive (slugify plus first-claim dedup; a duplicate label falls back to a slug [label: …] declaration).

Because the panel stamps its own generations with the exact text you wrote, hand-written and AI-written diagrams are equally re-editable.

Code is authoritative on generate#

Manual shape edits (dragging a node, recolouring by hand) do not update the stored source. The code and the canvas are two views that only sync when you Generate. Regenerate from the code panel to make the code authoritative again.

Editing a diagram as code#

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

title: Edit me

Draft [rectangle, gray]
Review [rectangle, orange]
Publish [rectangle, green]

Draft -> Review -> Publish
Edit meDraftReviewPublish
Generate this, tweak a colour or add a node, and generate again; the frame updates in place.
Every diagram on these pages is compiled live from the code above it, through the same pipeline the app uses. Open the canvas to try it.