Diagram playground

• a C4 node drags to a position the text records
• a sequence message or lifeline drags into a new order, its wording edited in place
• a C4 node's type, name, description, technology, icon, colour, tags and boundary edited in the details panel beside it, where a child view is added or removed, a selected boundary renamed or removed, and a selected relationship's wording, direction and line style edited — or the relationship deleted
• a new C4 node — or a reference to an element from an outer level — added from the palette, at a spot the text records
• a relationship drawn from one C4 element onto another — or onto a new element added with it — landing as a relationship line
• C4 nodes group into a boundary with a drag selection — the Select / Pan toggle by the zoom controls makes a drag pan instead
• on a sequence diagram: reword a step · change ends · move a step in time · remove a step · rename a lifeline · move a column · remove a lifeline · add a step · add a lifeline · number the steps
• the other kinds lay themselves out from the text

.alab is the format to write: it is what the syntax reference documents, what share links carry, and what reads cleanly in a code review. .archlab.json is the same C4 model on disk — the interchange form any other tool can read without implementing a grammar; the two are lossless twins in both directions (proved on every build), so you never have to write the JSON by hand. Mermaid is read and written too, lossily — the format toggle above the pane converts in place and states what each direction drops.