Skip to main content

<MiniMap />

You can use the MiniMap component by passing it as a children to the ReactFlow component:

Usage

import ReactFlow, { MiniMap } from 'react-flow-renderer';

const nodeColor = (node) => {
switch (node.type) {
case 'input':
return 'red';
case 'default':
return '#00ff00';
case 'output':
return 'rgb(0,0,255)';
default:
return '#eee';
}
};

function FlowWithMiniMap() {
return (
<ReactFlow defaultNodes={[]}>
<MiniMap nodeColor={nodeColor} nodeStrokeWidth={3} />
</ReactFlow>
);
}

Prop Types

NameTypeDefaultDescription
nodeColorstring or function#fffIf 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
nodeStrokeColorstring or function#555If 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
nodeBorderRadiusnumber5Node border radius
nodeStrokeWidthnumber2Node stroke width
nodeClassNamestring or function''Node class name
maskColorstring or functionrgb(240, 242, 243, 0.7)Mini map mask color
styleCSSPropertiesundefinedMini map style attributes
classNamestringundefinedAdditional class name

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