Diagrams
DiagramInspector
What the reader just picked, written out beside the picture.
Ships from@misoto22/design/diagrams
When to reach for it
Examples
default
API
FastAPI, behind the load balancer. Owns every read the cache misses.
- 8000
- ap-southeast-2
- api
- fromCloudFront
- toRedis
- toPostgres
Notes
What the reader just picked, written out.
A diagram can hold about eight words per node before it stops being a diagram and starts being a document with lines drawn on it. Everything past those eight — the port, the owning team, the file it was read out of, the six relationships it takes part in — belongs beside the picture rather than inside it, and this is that place.
NOT A DIALOG, and that is deliberate. An inspector is a REGION that changes with the selection, not a modal. Giving it role="dialog" would trap focus and demand dismissal for something the reader never opened — they clicked a node, and the panel followed. So it is a labelled region with aria-live="polite", which is what makes a screen reader announce the new selection without stealing the cursor from whatever the reader was doing.
The relationships are real buttons when they carry onSelect, which is how the diagram becomes navigable from the keyboard: a reader can walk the graph peer by peer without ever touching the picture.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| titlerequired | string | — | |
| actions | ReactNode | Buttons under the facts — copy a link, open the source. | |
| className | string | — | |
| description | ReactNode | — | |
| eyebrow | string | The kicker over the title — what KIND of thing this panel is showing. | |
| facts | InspectorFact[] | [] | — |
| floating | boolean | Renders as a floating panel over the surface rather than in the flow. | |
| links | InspectorLink[] | [] | — |
| onClose | () => void | — |
Accessibility
- A labelled region with aria-live="polite", not a dialog: the reader clicked a node, they did not open anything, so focus is never trapped or demanded.
- Relationships are real buttons when they carry onSelect, which is how the graph becomes walkable peer by peer from the keyboard.