Opening the shared document…
Diagram playground
Write a diagram as text and it renders here as you type. Canvas editing for six of ten notations. Nothing leaves your browser. Syntax reference ·
1
archlab 1.0
2
title "Coffee Shop"
3
description "A tiny two-level example — edit either pane and the other follows."
4
tags #demo
5
6
@context d-ctx "Coffee Shop — Context"
7
desc "Who talks to the system."
8
customer:person "Customer" #demo
9
desc "Orders and pays for coffee."
10
shop:system "Coffee Shop System" @service! #demo >d-cnt
11
desc "Takes orders and brews coffee."
12
payments:external "Payment Provider" [Stripe]
13
14
customer -> shop : "Places orders with" [HTTPS]
15
shop ..> payments : "Charges cards via" [REST]
16
17
@container d-cnt "Coffee Shop System — Containers" owner=shop
18
desc "Deployable units inside the coffee shop system."
19
customerRef:person ^d-ctx/customer
20
app:container "Ordering App" @nextjs! [Next.js] #demo
21
api:container "Order API" @golang! [Go]
22
db:database "Order Store" @postgresql! [PostgreSQL]
23
paymentsRef:external ^d-ctx/payments
24
25
customerRef -> app : "Orders through" [HTTPS]
26
app -> api : "Calls" [JSON/HTTPS]
27
api -> db : "Reads and writes" [SQL]
28
api ..> paymentsRef : "Charges cards via" [REST]
Tab indents · Esc then Tab leaves the editor · syntax reference
Read-only
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
Coffee Shop
A tiny two-level example — edit either pane and the other follows.