synthetic
DiagramMinimap
A small thumbnail map of a large canvas: a dot per node and a viewport box.
Launch flowThe Harbour rebrand flow and its minimap
100%
In context
Studio mapPan or zoom the graph; the minimap box follows what is visible
100%
Minimap
Drag or zoom the graph; the highlighted box tracks what is visible.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
nodes | DiagramMinimapNode[] | Yes | — |
viewportBounds | DiagramMinimapViewportBounds | undefined | No | — |
width | number | undefined | No | 120 |
height | number | undefined | No | 90 |
title | string | undefined | No | — |
ariaLabel | string | undefined | No | — |
className | string | undefined | No | — |
Pairing with NodeLinkGraph
DiagramMinimap is static: it draws a dot per resolved node position, scaled into a small frame, and runs no layout of its own. Feed it the same coordinates as the canvas. NodeLinkGraph's onViewportChange fires with every node's position plus the currently visible region, both in the coordinate space the minimap expects.
data-rebar-* attributes
data-rebar-component="diagram-minimap" on the root <figure>.
Migrating to Ant Design
Not codemod-covered. AntD ships no diagramming components; a minimap typically migrates with whichever canvas library (React Flow, AntV X6) the main diagram uses.