The MiniMap component provides a bird’s-eye view of your entire flow, allowing users to see and navigate the overall structure.
Installation
npm install @vue-flow/minimap
Basic Usage
<script setup>
import { VueFlow } from '@vue-flow/core'
import { MiniMap } from '@vue-flow/minimap'
</script>
<template>
<VueFlow>
<MiniMap />
</VueFlow>
</template>
<style>
@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/minimap/dist/style.css';
</style>
Props
Appearance
nodeColor
string | MiniMapNodeFunc
default:"'#e2e2e2'"
Color of nodes in the minimap. Can be a string or a function that receives the node and returns a color.<!-- Static color -->
<MiniMap node-color="#3b82f6" />
<!-- Dynamic color -->
<MiniMap :node-color="(node) => node.type === 'input' ? '#3b82f6' : '#e2e2e2'" />
nodeStrokeColor
string | MiniMapNodeFunc
default:"'transparent'"
Stroke color of nodes. Can be a string or a function.
Additional CSS class for nodes. Can be a string or a function.
Border radius of nodes in pixels.
Stroke width of nodes in pixels.
Mask
maskColor
string
default:"'rgb(240, 240, 240, 0.6)'"
Color of the viewport mask overlay.
Stroke color of the viewport mask.
Stroke width of the viewport mask.
Border radius of the viewport mask.
Size & Position
Width of the minimap in pixels.
Height of the minimap in pixels.
position
PanelPosition
default:"'bottom-right'"
Position of the minimap panel. Options:
'top-left''top-center''top-right''bottom-left''bottom-center''bottom-right'
Interaction
Enable dragging the minimap to pan the main viewport.
Enable scrolling on the minimap to zoom the main viewport.
Invert the panning direction when pannable is enabled.
Zoom step when using scroll wheel on minimap.
Other
ariaLabel
string
default:"'Vue Flow mini map'"
ARIA label for accessibility.
Scale offset for the minimap viewport calculation.
Events
@click
(params: { event: MouseEvent; position: { x: number; y: number } }) => void
Fired when the minimap is clicked.
@nodeClick
(params: NodeMouseEvent) => void
Fired when a node in the minimap is clicked.
@nodeDblclick
(params: NodeMouseEvent) => void
Fired when a node in the minimap is double-clicked.
@nodeMouseenter
(params: NodeMouseEvent) => void
Fired when mouse enters a node in the minimap.
@nodeMousemove
(params: NodeMouseEvent) => void
Fired when mouse moves over a node in the minimap.
@nodeMouseleave
(params: NodeMouseEvent) => void
Fired when mouse leaves a node in the minimap.
Slots
node-{type}
(props: MiniMapNodeProps) => any
Custom node renderer for specific node types. Replace {type} with your node type.
Examples
Custom Colors
<script setup>
function getNodeColor(node) {
switch (node.type) {
case 'input': return '#3b82f6'
case 'output': return '#10b981'
default: return '#6b7280'
}
}
</script>
<template>
<VueFlow>
<MiniMap
:node-color="getNodeColor"
node-stroke-color="#1f2937"
:node-stroke-width="3"
/>
</VueFlow>
</template>
Interactive MiniMap
<template>
<VueFlow>
<MiniMap
pannable
zoomable
:zoom-step="0.5"
/>
</VueFlow>
</template>
Custom Size and Position
<template>
<VueFlow>
<MiniMap
:width="300"
:height="200"
position="top-left"
/>
</VueFlow>
</template>
Custom Mask
<template>
<VueFlow>
<MiniMap
mask-color="rgba(59, 130, 246, 0.3)"
mask-stroke-color="#3b82f6"
:mask-stroke-width="2"
:mask-border-radius="5"
/>
</VueFlow>
</template>
Event Handling
<script setup>
function handleNodeClick({ node, event }) {
console.log('Clicked node:', node.id)
console.log('Event:', event)
}
function handleMinimapClick({ position, event }) {
console.log('Clicked at position:', position)
}
</script>
<template>
<VueFlow>
<MiniMap
@node-click="handleNodeClick"
@click="handleMinimapClick"
/>
</VueFlow>
</template>
Custom Node Rendering
<template>
<VueFlow>
<MiniMap>
<template #node-custom="{ id, position, dimensions, color }">
<circle
:cx="position.x + dimensions.width / 2"
:cy="position.y + dimensions.height / 2"
:r="Math.min(dimensions.width, dimensions.height) / 2"
:fill="color"
/>
</template>
</MiniMap>
</VueFlow>
</template>
Dynamic Node Classes
<script setup>
function getNodeClass(node) {
if (node.selected) return 'selected'
if (node.dragging) return 'dragging'
return ''
}
</script>
<template>
<VueFlow>
<MiniMap :node-class-name="getNodeClass" />
</VueFlow>
</template>
<style>
.vue-flow__minimap-node.selected {
stroke: #3b82f6;
stroke-width: 3;
}
.vue-flow__minimap-node.dragging {
opacity: 0.5;
}
</style>
Styling
/* Minimap container */
.vue-flow__minimap {
background: white;
border: 1px solid #e5e7eb;
border-radius: 4px;
}
/* Minimap when pannable */
.vue-flow__minimap.pannable {
cursor: grab;
}
/* Minimap when zoomable */
.vue-flow__minimap.zoomable {
cursor: zoom-in;
}
/* Viewport mask */
.vue-flow__minimap-mask {
fill: rgba(240, 240, 240, 0.6);
}
/* Individual nodes */
.vue-flow__minimap-node {
/* Custom node styles */
}
The minimap automatically scales to show all nodes. Use offsetScale to adjust the padding around the visible area.