Write your own diagram

live editor

C4 or sequence — .alab, arch-lab JSON, or Mermaid, auto-detected and rendered live. Nothing leaves your browser. Syntax reference

How .alab, JSON and Mermaid relate

.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. Nothing you type is uploaded or stored.

Source text

switches by rewriting the text

archlab 1.0 sequence
title "Checkout — Place Order"
description "One order placed: card charged, order stored, receipt sent."

@sequence
  autonumber
  cust:actor "Customer"
  web "Storefront" [Next.js]
  api:participant "Order API" [Go]
  pay:participant "Payments" [Stripe]
  db:participant "Orders DB" [PostgreSQL]

cust -> web : "Clicks Place order"
  web ->+ api : "Place the order" [HTTPS]
    desc "POST /api/v1/orders\nbody { cartId, addressId }\n201 → { orderId }\n409 → the cart moved on"
  api -> api : "Validates the cart"
  note right api : "Price and stock re-checked server-side"
  alt "card accepted"
    api ->+ pay : "Create charge" [REST]
      desc "curl https://api.payments.example/v1/charges \\\n  --request POST \\\n  --header 'Idempotency-Key: <order id>' \\\n  --data '{ \"amount\": 4250, \"currency\": \"THB\" }'\n\nThe idempotency key is the order id, so a retry cannot double-charge."
    pay ..>- api : "charge.succeeded"
    api -> db : "INSERT order" [SQL]
    par "receipt"
      api ~> cust : "Emails the receipt"
    and "audit"
      api ~> db : "Writes audit row"
    api ..>- web : "201 Created"
  else "card declined"
    api ..> web : "402 Payment Required"
  opt "first purchase"
    web -> cust : "Shows onboarding tips"
  note over cust db : "Order flow complete"

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

Diagram

Export

FormatSharpnessSmoothness

A still of the diagram exactly as it is on screen, folds included.

Click a message, participant, or fragment chip to focus it · a after a label means that message carries details · ← → move between messages · Ctrl + scroll or pinch to zoom · Esc clears focus · on a card folds away the services only it uses