Mini Map

You can use the mini map plugin by passing it as a children to the ReactFlow component:


import ReactFlow, { MiniMap } from 'react-flow-renderer';
const FlowWithMiniMap = () => (
<ReactFlow elements={elements}>
nodeColor={(node) => {
switch (node.type) {
case 'input':
return 'red';
case 'default':
return '#00ff00';
case 'output':
return 'rgb(0,0,255)';
return '#eee';

Prop Types

  • nodeColor: string or function - If you pass a color as a string all nodes will get that color. If you pass a function you can return a color depending on the passed node.
  • nodeBorderRadius: number
  • nodeStrokeWidth: number
  • nodeClassName: string or function for adding an additional class to the nodes inside the mini map
  • maskColor: string
  • style: css properties
  • className: additional class name
Typescript: The interface of the MiniMap Prop Types are exported as MiniMapProps.
Edit this page
current version: 9.6.9