C4 model diagrams: context, container, component.

The four C4 levels drawn as four boards over the same set of systems, containers and components — so a rename on one reaches the others.

lantern coffee · pre-order · system context
Orders drinks usingSends ticketsReads ticketsTakes payments viaPERSONCustomerOrders ahead from a phonePERSONBaristaMakes the drinks at SoHoSOFTWARE SYSTEMLantern Pre-orderTakes orders aheadof pickupEXTERNAL SYSTEMSoHo tillPrints tickets at the barEXTERNAL SYSTEMPayments providerCards and wallets

Every box says which one it is.

C4 is four pictures of one architecture at four distances, and its boxes look alike. Here each one carries its type above it — person, software system, container, component — so a reader knows what they are looking at without a legend.

Every C4 figure, named ↓

lantern coffee · pre-order · the vocabulary
PERSONCustomerSOFTWARE SYSTEMPre-orderLantern Pre-order · System BoundaryCONTAINEROrder APItakes and tracks ordersCOMPONENTTicket printertalks to the tillRelationship · sends tickets toNOTEThe till prints at the bar.

Zoom in through the green dot.

The container level is a board under the system. Open Lantern Pre-order from its green dot and its containers are drawn inside its boundary — the mobile app, the order API and the orders database — with the customer and the till outside it, as they were one level up.

Read more: Boards that open boards →

system context
SOFTWARE SYSTEMLantern Pre-order1
system context › lantern pre-order · containers
PERSONCustomerLantern Pre-orderCONTAINERMobile appiOS and AndroidCONTAINEROrder APItakes and tracks ordersOrdersdatabaseSoHo tillsends tickets to

One system, on the context and inside the containers.

The box on the context board and the boundary on the container board are two figures of one object. Rename Lantern Pre-order on either and both say the new name; open it on the project page and both boards are listed, with the one under it.

Read more: One object, many boards →

lantern coffee · objects · lantern pre-order
Lantern Pre-orderSoftware System
Takes orders ahead of pickup.
ON 2 BOARDS · 2 FIGURES
System context×1 · Go ›
Containers×1 · Go ›
BOARDS UNDER IT
Containersopen ›
RELATIONS · 3
Customer → orders drinks using›
→ sends tickets to SoHo till›
→ takes payments via Payments provider›

Every figure, named.

The toolbar's own names — what you pick is what this list says: two groups, 13 figures.

C4 Model7

Useful beside it6