<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 { writable } from 'svelte/store';
  import { SvelteFlow, MiniMap } from '@xyflow/svelte';
 
  const nodes = writable([]);
  const edges = writable([]);
</script>
 
<SvelteFlow nodes={nodes} edges={edges}>
  <MiniMap nodeStrokeWidth={3} />
</SvelteFlow>

Props

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

Name	Type	Default
#`class?`	`string`	`-`
#`style?`	`string`	`-`
#`width?`	`number`	`-`
#`height?`	`number`	`-`
#`bgColor?`	`string`	`"#fff"`
#`nodeColor?`	`string \| (node: Node<T>) => string`	`"#e2e2e2"`
#`nodeStrokeColor?`	`string \| (node: Node<T>) => string`	`"transparent"`
#`nodeClass?`	`string \| (node: Node<T>) => string`
#`nodeBorderRadius?`	`number`	`5`
#`nodeStrokeWidth?`	`number`	`2`
#`maskColor?`	`string`	`"rgb(240, 240, 240, 0.6)"`
#`maskStrokeColor?`	`string`	`"none"`
#`maskStrokeWidth?`	`number`	`1`
#`position?`	`PanelPosition`	`"bottom-right"`
#`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.	`"Svelte Flow mini map"`
#`inversePan?`	`boolean`
#`zoomStep?`	`number`	`10`

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 { writable } from 'svelte/store';
  import { SvelteFlow, MiniMap } from '@xyflow/svelte';
 
  const nodes = writable([]);
  const edges = writable([]);
</script>
 
<SvelteFlow nodes={nodes} edges={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 { writable } from 'svelte/store';
  import { SvelteFlow, MiniMap } from '@xyflow/svelte';
 
  const nodes = writable([]);
  const edges = writable([]);
 
  function nodeColor(node) {
    return node.type === 'input' ? 'blue' : 'red';
  }
</script>
 
<SvelteFlow nodes={nodes} edges={edges}>
  <MiniMap nodeColor={nodeColor} />
</SvelteFlow>