Diagrams
ArchitectureFigure
A component map: services, datastores, trust boundaries, and what talks to what.
Ships from@misoto22/design/diagrams
When to reach for it
Examples
default
One request, end to end
5 elements and 4 relationships. The edge, the service, the row it reads.
- Browser (external) — Safari / Chrome
- CloudFront (cloud) — CDN
- API (backend) — FastAPI
- Redis (database) — read-through
- Postgres (database) — primary
- Browser → CloudFront: HTTPS
- CloudFront → API
- API → Redis: read-through
- API → Postgres: SQL
- Every request is fronted by the CDN.
- Reads go through Redis first.
- Postgres is the source of truth.
Notes
A component map: services, datastores, boundaries, and what talks to what.
Takes the same JSON an archify architecture specification carries — components, boundaries, connections — and draws it in this system's own terms: paper plates on a hairline, one reversed plate for the component the diagram is about, and seven drawn sigils where archify uses seven hues.
IT RENDERS ON A SERVER because every position is already in the specification. A component gives a row and a col into a grid whose cell size is either declared or defaulted, or it gives an absolute pos — nothing here is solved for, relaxed, or measured. So the markup is a pure function of the input, it is identical on the server and in the browser, and there is no layout shift on hydration because there is no layout to do.
BOUNDARIES ARE DRAWN FIRST, AND DRAWN DIFFERENTLY. A region is where something RUNS — a VPC, a zone, a cluster — and is a solid frame. A security-group is what may REACH it, and is dashed. That is not decoration: an infrastructure diagram is very often read for exactly one of those two questions, and a reader should be able to tell which line answers which without reading either label.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| specrequired | ArchitectureSpec | — |
Also accepts everything in FigureChrome. Those are forwarded to the underlying element and are not listed row by row.
Accessibility
- The <svg> is role="img" with a name, so a screen reader announces a picture instead of walking two hundred <text> nodes in drawing order.
- The diagram’s content is published beside it as an ordinary list — every node with its kind, every relationship as "A → B: over HTTPS". That list is where the meaning lives for anyone not looking at the picture.
- Passing onSelectNode turns that list into real buttons, which is the keyboard’s only route to a selection: the plates inside the picture are presentational by construction.