<MiniMap />

Source on GitHub

The <MiniMap /> component can be used to render an overview of your flow. It renders each node as an SVG element and visualizes where the current viewport is in relation to the rest of the flow.


import { ReactFlow, MiniMap } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]]} edges={[...]]}>
      <MiniMap nodeStrokeWidth={3} />
    </ReactFlow>
  );
}

Props

For TypeScript users, the props type for the <MiniMap /> component is exported as MiniMapProps.

Name	Type	Default
#`nodeColor?`	`string \| (node: Node<T>) => string`	`"#e2e2e2"`
#`nodeStrokeColor?`	`string \| (node: Node<T>) => string`	`"transparent"`
#`nodeClassName?`	`string \| (node: Node<T>) => string`
#`nodeBorderRadius?`	`number`	`5`
#`nodeStrokeWidth?`	`number`	`2`
#`nodeComponent?`	`React.ComponentType<MiniMapNodeProps>` A custom component to render the nodes in the minimap. This component must render an SVG element!
#`maskColor?`	`string` The color of the mask that covers the portion of the minimap not currently visible in the viewport.	`"rgb(240, 240, 240, 0.6)"`
#`maskStrokeColor?`	`string`	`"none"`
#`maskStrokeWidth?`	`number`	`1`
#`position?`	`PanelPosition`	`"bottom-right"`
#`onClick?`	`(event: React.MouseEvent, position: XYPosition) => void`
#`onNodeClick?`	`(event: React.MouseEvent, node: Node<T>) => void`
#`pannable?`	`boolean` Determines whether you can pan the viewport by dragging inside the minimap.	`false`
#`zoomable?`	`boolean` Determines whether you can zoom the viewport by scrolling inside the minimap.	`false`
#`ariaLabel?`	`string \| null` There is no text inside the minimap for a screen reader to use as an accessible name, so it's important we provide one to make the minimap accessible. The default is sufficient but you may want to replace it with something more relevant to your app or product.	`"React Flow mini map"`
#`inversePan?`	`boolean`
#`zoomStep?`	`number`	`10`
#`offsetScale?`	`number`	`5`

Examples

Making the mini map interactive

By default, the mini map is non-interactive. To allow users to interact with the viewport by panning or zooming the minimap, you can set either of the zoomable or pannable (or both!) props to true.


import { ReactFlow,  MiniMap } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]]} edges={[...]]}>
      <MiniMap pannable zoomable />
    </ReactFlow>
  );
}

Implement a custom mini map node

It is possible to pass a custom component to the nodeComponent prop to change how nodes are rendered in the mini map. If you do this you must use only SVG elements in your component if you want it to work correctly.


import { ReactFlow,  MiniMap } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]]} edges={[...]]}>
      <MiniMap nodeComponent={MiniMapNode} />
    </ReactFlow>
  );
}
 
function MiniMapNode({ x, y }) {
  return <circle cx={x} cy={y} r="50" />;
}

Check out the documentation for MiniMapNodeProps to see what props are passed to your custom component.

Customising mini map node color

The nodeColor, nodeStrokeColor, and nodeClassName props can be a function that takes a Node and computes a value for the prop. This can be used to customize the appearance of each mini map node.

This example shows how to color each mini map node based on the node’s type:


import { ReactFlow,  MiniMap } from '@xyflow/react';
 
export default function Flow() {
  return (
    <ReactFlow nodes={[...]]} edges={[...]]}>
      <MiniMap nodeColor={nodeColor} />
    </ReactFlow>
  );
}
 
function nodeColor(node) {
  switch (node.type) {
    case 'input':
      return '#6ede87';
    case 'output':
      return '#6865A5';
    default:
      return '#ff0072';
  }
}

Typescript

This component accepts a generic type argument of custom node types. See this section in our Typescript guide for more information.


<MiniMap<CustomNodeType> nodeColor={nodeColor} />