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 "A manuscript, from submission to print"
description "One submission, the states it passes through, and every way it can leave"

@lifecycle
  subject "Manuscript"
    desc "One submitted paper, followed from the moment it arrives until it is in print or out of the process."
  state submitted "Submitted"
    desc "Uploaded and assigned a number. Nobody has read it yet."
  state screened "Screened"
    desc "An editor has checked scope, formatting and ethics approval."
    exit "Desk rejected" ends
      when "it is out of scope, or the ethics paperwork is missing and cannot be produced"
      desc "Roughly half of everything that arrives leaves here, within a week."
  state underReview "Under review"
    desc "With two or three reviewers, who have six weeks."
    exit "Rejected" ends
      when "the reviewers agree the work does not stand up"
    exit "Sent back for revision" rejoins submitted
      when "the reviewers want changes large enough to need a fresh read"
      desc "It goes all the way back to Submitted rather than to Screened: a revised manuscript is screened again, because the changes can move it out of scope."
  state accepted "Accepted"
    desc "The editor has taken it. Nothing about the content changes after this."
  state typeset "Typeset"
    exit "Proof corrections needed" rejoins accepted
      when "the author finds an error in the proofs"
  state published "Published" ends
    desc "Assigned a DOI and out. The manuscript stops here."

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

Diagram