FlowMiniMap

A scaled SVG overview of the graph with a draggable viewport rectangle.

Category: display · WCAG 2.1-AA · flow, minimap, overview, chrome

Props

Prop	Type	Default	Description
`nodes`	`FlowNode[]`	—	The nodes to render.
`viewport`	`Viewport`	—	The current pan/zoom viewport to reflect in the minimap.
`containerWidth`	`number`	—	Width of the flow container, used to scale the minimap.
`containerHeight`	`number`	—	Height of the flow container, used to scale the minimap.
`width`	`number`	`200`	Width in px.
`height`	`number`	`150`	Height in px.
`position`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`	`bottom-right`	Canvas corner the minimap is pinned to: `bottom-right`, `bottom-left`, `top-left` or `top-right`.
`onViewportChange`	`(viewport: Viewport) => void`	—	Called with the new viewport when the minimap is dragged.
`className`	`string`	—	Additional CSS class names merged onto the root element.
`ariaLabel`	`string`	—	Alias of `label` — the same invisible accessible name under the catalog spelling. Neither is deprecated.
`label`	`string \| undefined`	—	Accessible name for the minimap region.
`nodeColor`	`string \| undefined`	—	Fill colour for node rectangles in the minimap.

Design tokens

--cascivo-color-surface
--cascivo-color-border-strong
--cascivo-color-accent

When to use

Orienting users in a large graph
Letting users jump around by dragging the view rect

When not to use

Tiny graphs that fit on screen

Examples

Graph overview

() => (
  <FlowMiniMap
    nodes={[
      { id: 'a', position: { x: 0, y: 0 } },
      { id: 'b', position: { x: 220, y: 120 } },
      { id: 'c', position: { x: 440, y: 0 } },
    ]}
    viewport={{ x: 0, y: 0, zoom: 1 }}
    containerWidth={400}
    containerHeight={300}
  />
)

Related components

FlowControls — Complementary navigation chrome.

← Back to docs