Diagrams
DiagramMinimap
Where you are in something bigger than the window.
Ships from@misoto22/design/diagrams
When to reach for it
Examples
default
5 elements and 4 relationships.
- Browser (external)
- CloudFront (cloud)
- API (backend)
- Postgres (database)
- SQS (messagebus)
- Browser → CloudFront
- CloudFront → API
- API → Postgres
- API → SQS
Drag to pan. Plus and minus zoom, zero resets, the arrow keys pan.
Notes
Where you are in something bigger than the window.
Two things at once, and both are needed: a miniature of the whole artwork, and a rectangle showing which part of it the frame is currently over. The miniature alone answers "what is there"; the rectangle answers "and where am I", which is the question a reader who has just panned twice actually has.
THE RECTANGLE IS DERIVED, never stored. Its position comes out of the canvas's own view — the same three numbers the canvas is already transforming by — divided by the map's scale. Keeping a second copy of "where the viewport is" is how a minimap comes to disagree with the thing it is a map of, and a map that disagrees is worse than none.
CLICKING RECENTRES rather than jumping. onSeek reports a point in CONTENT coordinates, which is what a canvas's centerOn takes. The minimap does not move anything itself: it has no authority over the view, it only says where the reader pointed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| contentrequired | { width: number; height: number } | The whole artwork, at its natural size in CSS pixels. | |
| framerequired | { width: number; height: number } | The frame the artwork is being looked at through, in CSS pixels. | |
| viewrequired | CanvasView | Where that frame currently sits — a `DiagramCanvas`'s `onViewChange`. | |
| children | ReactNode | A miniature of the artwork. Usually the same figure, rendered again. | |
| className | string | — | |
| label | string | 'Diagram overview' | — |
| onSeek | (x: number, y: number) => void | Called with a point in CONTENT coordinates when the reader picks one. | |
| width | number | 200 | How wide the map is, in CSS pixels. Height follows the aspect ratio. |
Accessibility
- The miniature is aria-hidden. The figure it mirrors already publishes its own summary, and a second copy would read the whole diagram out twice.