Skip to Content
✨ Svelte Flow 1.0 is here! Rewritten for Svelte 5 with many new features and improvements.

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

NameTypeDefault
bgColorstring

Background color of minimap

nodeColorstring | GetMiniMapNodeAttribute

Color of nodes on the minimap

nodeStrokeColorstring | GetMiniMapNodeAttribute

Stroke color of nodes on the minimap

nodeClassstring | GetMiniMapNodeAttribute

Class applied to nodes on the minimap

nodeBorderRadiusnumber

Border radius of nodes on the minimap

nodeStrokeWidthnumber

Stroke width of nodes on the minimap

maskColorstring

Color of the mask representing viewport

maskStrokeColorstring

Stroke color of the mask representing viewport

maskStrokeWidthnumber

Stroke width of the mask representing viewport

positionPanelPosition

Position of the minimap on the pane

ariaLabelstring | null

The aria-label applied to container

widthnumber

Width of minimap

heightnumber

Height of minimap

pannableboolean
zoomableboolean
inversePanboolean

Invert the direction when panning the minimap viewport

zoomStepnumber

Step size for zooming in/out

...propsHTMLAttributes<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>
Last updated on