Skip to content
arch-lab

Opening the shared document…

Diagram playground

Canvas editing for C4 diagrams and sequence diagrams. Nothing leaves your browser. Syntax reference

What you can do on the canvas, and how the formats relate
  • 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.

Tab indents · Esc then Tab leaves the editor · syntax reference

Diagram
BEFORE ANYONE NOTICEDTHE FIRST HOURTHE FIXAFTERWARDSA routine index migration started on the orders tableReviewed, approved, and run at the quietest hour of the week. Nothing about it was unusual.Write latency began climbing, slowly enough that no alert firedThe alert threshold was an absolute number rather than a rate of change, which is why fortyminutes of steady degradation looked like nothing at all.Checkout error rate crossed the page thresholdThe on-call engineer rolled back the most recent deploy, which wasunrelated, and then rolled back the two before it when the error rate didnot moveThe migration had run outside the deploy pipeline, so the timeline everyone was reading didnot contain the thing that mattered.A second engineer joined and found the running migrationThe migration was cancelled and the table recovered on its ownCheckout drained its queue over the following twenty minutesLong-running schema migrations were moved onto the same deploy timeline aseverything else, so the one view everybody opens during an incident containsevery changeNobody argued for it before the outage. The argument was that migrations are not deploys,which was true and beside the point.Latency alerting gained a rate-of-change ruleThis documentWritten the same week, while people still disagreed about the order, which is the only timea timeline is worth writing.