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