# DiagramMinimap

Where you are in something bigger than the window.

- Group: Diagrams
- Import: `import { DiagramMinimap } from '@misoto22/design/diagrams'`
- Page: https://ui.misoto22.com/components/diagram-minimap/
- Related: diagram-canvas

## When to reach for it

Pairs with DiagramCanvas. The viewport rectangle is derived from the canvas’s own view, never stored — a map that disagrees with its territory is worse than none.

## 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.

## DiagramMinimap

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

- `content` (required) — `{ width: number; height: number }`. The whole artwork, at its natural size in CSS pixels.
- `frame` (required) — `{ width: number; height: number }`. The frame the artwork is being looked at through, in CSS pixels.
- `view` (required) — `CanvasView`. Where that frame currently sits — a `DiagramCanvas`'s `onViewChange`.
- `children` — `ReactNode`. A miniature of the artwork. Usually the same figure, rendered again.
- `onSeek` — `(x: number, y: number) => void`. Called with a point in CONTENT coordinates when the reader picks one.
- `width` — `number` default `200`. How wide the map is, in CSS pixels. Height follows the aspect ratio.
- `className` — `string`.
- `label` — `string` default `'Diagram overview'`.

## Example — default

```tsx
<div className="flex flex-col gap-3">
  <DiagramCanvas ref={canvas} height="14rem" label="Request path" onViewChange={setView}>
    <ArchitectureFigure spec={SPEC} heading={false} legend="hidden" cards={false} />
  </DiagramCanvas>
  <DiagramMinimap
    content={{ width: 900, height: 340 }}
    frame={{ width: 640, height: 224 }}
    view={view}
    width={180}
    onSeek={(x, y) => canvas.current?.centerOn(x, y)}
  >
    <ArchitectureFigure spec={SPEC} heading={false} legend="hidden" cards={false} />
  </DiagramMinimap>
</div>
```