Examples
Every diagram here is built by diagc from a source in this repository. Click an image to open the live page: it folds, drills and switches planes the way the PNG cannot. Source is the file to copy from; Guide is the page that explains it.
To open them in the studio instead, run diagc studio in a clone of this repository (or pnpm dev from the checkout) and pick one from the diagram picker — they are grouped by the same folders.
Diagram types
Each type has a starter — the smallest file worth copying, shown whole in its guide — and a realistic example. Where a guide walks through a figure of its own, that figure comes first.
C4
The canonical C4 picture, kept small: a person and two systems at context level, with the primary system's containers one drill below — solid fills per element kind and a technology subtitle, from m.notation('c4').
Live · Source · Guide
Starter: expense claims
An employee, one system and its two containers — the smallest diagram that still shows the C4 fills, the [Container: technology] subtitles and labelled relations.
Live · Source · Guide
Online bookstore
A bookstore at all three C4 levels in one model: a customer and two external systems at context level, seven containers inside the shop — a database, a queue and a search index among them — and the Checkout API's components one drill further down. Live · Source · Guide
Activity
Order processing across three swimlanes: a decision, a fork and join, an object flow, and an interruptible region that a received signal cuts short — m.activity() with lane, region, flow, objectFlow and interrupt.
Live · Source · Guide
Starter: expense approval
One lane: a start, a check, a decision with two guards, and a final node — the smallest activity diagram that still branches. Live · Source · Guide
Order fulfilment
A paid order handed down three lanes to the carrier. An interruptible region holds the warehouse's fork and join, so a cancellation signal can cut the work short; the tracking number reaches the outgoing signal as an object flow; a note marks the point of no return. Placed by hand, so every hand-over reads left to right. Live · Source · Guide
Git graph
A branching strategy as lanes of commits: a release line, a hotfix, release candidates, a nightly integration lane and two feature teams, with tags, branch-offs and merges — m.gitGraph().
Live · Source · Guide
Starter: dark mode toggle
A feature branch cut from main, two commits, and a tagged merge back.
Live · Source · Guide
Courier app release train
A trunk-based release train: two release branches cut from main, and a hotfix that lands on a shipped release and is backported to main before the next cut — commit({ from }), merge, a gap, two stage frames and a color per lane.
Live · Source · Guide
Fishbone
A postmortem's cause-and-effect fish: the six Software preset bones, with causes and sub-causes hung on them — m.fishbone() and categories('Software').
Live · Source · Guide
Starter: checkout outage
The guide's own listing: the Software preset with causes on three of its six bones, one of them chained into a sub-cause.
Live · Source · Guide
Checkout latency at peak
A slow-checkout postmortem on four hand-made bones — Database, Network, Application, Third-party — with a sub-cause on every bone, descriptions, and a color on one category: fb.category() instead of a preset.
Live · Source · Guide
Second-order thinking
One decision and what follows from it, banded by order: good, bad and neutral consequences, and two branches that join — m.secondOrder() with then and leadsTo.
Live · Source · Guide
Starter: requiring two-factor authentication
One decision with a good and a bad first-order consequence, each carried one step further. Live · Source · Guide
Moving to a four-day work week
A four-day-week proposal traced three orders out: good, bad and neutral consequences, labelled arrows, and two branches that leadsTo joins into the same burnout.
Live · Source · Guide
Threat model
A STRIDE data-flow diagram of a checkout: entities, processes and a store inside two trust boundaries, with seven threats recorded on the elements and flows they belong to. The live page lists them in a register under the canvas — m.threatModel().
Live · Source · Guide
Starter: password reset
A customer, an auth service inside one trust boundary, and one information-disclosure threat on the flow between them. Live · Source · Guide
Payments API
A charge API that tokenizes cards in a PCI enclave nested inside the internal boundary, writes to a ledger and settles with a card network — seven threats across elements and flows, open, mitigated and accepted. Live · Source · Guide
Deployment
Starter: two-subnet VPC
A load balancer in a public subnet, an API and its database in a private one, both in a VPC. Live · Source · Guide
Web app
A three-tier web app in one region: public traffic reaches only the load balancer, the app hosts sit in private subnets in two availability zones, and the database replicates across them. Live · Source · Guide
Plan
Starter: launch plan
Three phases, one nested twice, a code freeze and a launch, three people with all three roles on Build, a comment and a link. Live · Source · Guide
Q4 roadmap
A C4 container view and a plan plane that schedules those containers inside zones — switch planes on the page. Live · Source · Guide
ER
Starter: library loans
Two tables and the foreign key between them — the smallest ER diagram there is. Live · Source · Guide
Shop schema
A shop's eight tables in a catalog half and an orders half: a composite primary key on the order lines, and one foreign key that names the column it points at instead of resolving to a primary key — m.table() and m.fk().
Live · Source · Guide
Causal loop
Starter: word-of-mouth growth
Three variables in one reinforcing loop: every link is +, so the loop is badged R.
Live · Source · Guide
Technical debt: the shortcut spiral
Why shortcuts feed on themselves: a reinforcing loop through delivery speed and deadline pressure, and two balancing loops through refactoring, one of them delayed. The R and B badges are derived from the links' polarities — m.notation('causal-loop') and plain m.relate().
Live · Source · Guide
Architecture
Starter: shop
A customer and one system holding two services and a database — the smallest diagram that folds: the system rests closed with the arrows into it bundled, and opens on a double-click. The image shows it opened; the live page rests closed. Live · Source · Guide
Acme SaaS
A small platform seen three ways over the same services: an architecture plane of who owns what, an infra plane of where it runs, and a flow plane that shows only the data-flow layer — plus icons and node metadata. The image shows the first plane; the live page switches between them. Live · Source · Guide
Multi-AZ EKS on AWS
A classic AWS reference architecture drawn with the bundled library: aws-* boundary containers with corner badges, official service icons, Kubernetes pod icons and tech-pack logos, all as image asset refs.
Live · Source · Guide
Features
Semantic zoom
Everything rests folded: two groups, each showing how many children it holds, and the three relations between their contents drawn as one aggregated arrow. Open the live page and double-click a group to unfold it. Live · Source · Guide
Planes
One model, three hierarchies over the same nodes: who owns what, where it runs, and a flow view that borrows the first plane's structure, presets a layer and drops the ordinary arrows. Three thin files share one module and differ only in which plane comes first. Live · Source · Guide
Legend
An on-canvas key: rows derived from the layers and relation kinds in use, plus two hand-written ones — a caption for a kind, and a colour only the author can explain. Live · Source · Guide
The docs' own figures
The explanation pages are illustrated with the tool too: anatomy of a model (source, in What is in a model) · the pipeline (source, in How a diagram becomes a picture) · compiling a view (source, in What you see is not what is stored) · the workspace (source, in the same page).