Skip to main content

<MiniMap />

The Minimap component adds an interactive Minimap to React Flow that shows the whole graph. You can use the MiniMap plugin by passing it as a children to the ReactFlow component.

Interactive Minimap

The minimap is not interactive by default. If you want to control the viewport with the mini map, you need to pass zoomable and pannable.

Usage Example

Prop Types

pannable

Description:
If set to true you can control the React Flow viewport position by dragging the minimap.
Type:
boolean
Default:
false

zoomable

Description:
If set to true you can control the React Flow viewport scale by zooming (scroll or pinch) the minimap.
Type:
boolean
Default:
false

nodeColor

Description:
If you pass a color string, all nodes get that color. If you pass a function you can return a color depending on the passed node
Type:
string or function
Default:
#fff

nodeStrokeColor

Description:
If you pass a color string, all nodes get that strokecolor. If you pass a function you can return a color depending on the passed node
Type:
string or function
Default:
#555

nodeBorderRadius

Description:
Node border radius
Type:
number
Default:
5

nodeStrokeWidth

Description:
Node stroke width
Type:
number
Default:
2

nodeClassName

Description:
Node class name
Type:
string or function
Default:
''

maskColor

Description:
Mask color
Type:
string
Default:
rgb(240, 242, 243, 0.7)

maskStrokeColor

Description:
Inner mask stroke color
Type:
string
Default:
none

maskStrokeWidth

Description:
Inner mask stroke width
Type:
number
Default:
1

onClick

Description:
Get's called when the minimap is clicked.
Type:
function
Default:
undefined

onNodeClick

Description:
Get's called when a minimap node is clicked.
Type:
function
Default:
undefined

ariaLabel

Description:
ariaLabel for the minimap. You can set it to `null` to hide it.
Type:
string | null
Default:
React Flow mini map

style

Description:
Mini map style attributes
Type:
CSSProperties
Default:
undefined

className

Description:
Additional class name
Type:
string
Default:
undefined

position

Description:
Position of the minimap panel in the viewport
Type:
PanelPosition ('top-left'`, 'top-center', 'top-right', 'bottom-left', 'bottom-center' or 'bottom-right')
Default:
'bottom-right'

Typescript

The interface of the MiniMap Prop Types are exported as MiniMapProps.

Npm Package

The minimap component is published under @reactflow/minimap and can also be installed and used separately.