<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.


<script lang="ts">
  import { SvelteFlow, MiniMap } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
  let nodes = $state.raw([]);
  let edges = $state.raw([]);
</script>
 
<SvelteFlow bind:nodes bind:edges>
  <MiniMap nodeStrokeWidth={3} />
</SvelteFlow>

Props

The type for props of <MiniMap /> component is exported as MiniMapProps. Additionally, it extends the props of <div />.

Name	Type	Default
`bgColor`	`string` Background color of minimap
`nodeColor`	`string \| GetMiniMapNodeAttribute` Color of nodes on the minimap
`nodeStrokeColor`	`string \| GetMiniMapNodeAttribute` Stroke color of nodes on the minimap
`nodeClass`	`string \| GetMiniMapNodeAttribute` Class applied to nodes on the minimap
`nodeBorderRadius`	`number` Border radius of nodes on the minimap
`nodeStrokeWidth`	`number` Stroke width of nodes on the minimap
`nodeComponent`	`Component<MiniMapNodeProps, {}, string>` A custom component to render the nodes in the minimap. This component must render an SVG element!
`maskColor`	`string` Color of the mask representing viewport
`maskStrokeColor`	`string` Stroke color of the mask representing viewport
`maskStrokeWidth`	`number` Stroke width of the mask representing viewport
`position`	`PanelPosition` Position of the minimap on the pane
`ariaLabel`	`string \| null` The aria-label applied to container
`width`	`number` Width of minimap
`height`	`number` Height of minimap
`pannable`	`boolean`
`zoomable`	`boolean`
`inversePan`	`boolean` Invert the direction when panning the minimap viewport
`zoomStep`	`number` Step size for zooming in/out
`...props`	`HTMLAttributes<HTMLDivElement>`

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.


<script lang="ts">
  import { SvelteFlow, MiniMap } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
  let nodes = $state.raw([]);
  let edges = $state.raw([]);
</script>
 
 
<SvelteFlow bind:nodes bind:edges>
  <MiniMap pannable zoomable />
</SvelteFlow>

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:


<script lang="ts">
  import { SvelteFlow, MiniMap } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
  let nodes = $state.raw([]);
  let edges = $state.raw([]);
 
  function nodeColor(node) {
    return node.type === 'input' ? 'blue' : 'red';
  }
</script>
 
<SvelteFlow bind:nodes bind:edges>
  <MiniMap nodeColor={nodeColor} />
</SvelteFlow>