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.

Source text

archlab 1.0 lifecycle
title "An order, from checkout to the doormat"
description "One order, the states it passes through, and the two ways it can leave the track"

@lifecycle
  subject "Order"
    desc "One customer order. Everything below is somewhere this one thing can BE, never something somebody does to it."
  state placed "Placed"
    desc "Checkout finished. Nothing has been charged and no stock is held."
    exit "Cancelled" ends
      when "the customer changes their mind before paying, or the basket expires"
      desc "The commonest way an order leaves, and the cheapest: nothing has moved yet."
  state paid "Paid"
    desc "Payment captured, stock reserved. From here a departure costs somebody something."
    exit "Refunded" ends
      when "the payment is disputed, or the customer cancels before anything is picked"
  state packed "Packed"
    desc "Picked, boxed and labelled, waiting on the carrier."
  state shipped "Shipped"
    exit "Returned" rejoins packed
      when "the parcel comes back unopened — refused at the door, or nobody in after three attempts"
      desc "Back to Packed rather than to Paid: the stock is intact and the box needs only a new label."
  state delivered "Delivered" ends
    desc "Signed for, or left where the customer asked. The order stops here."

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

Diagram