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