Skip to main content
The MiniMap component displays a small overview of your entire flow graph with viewport visualization.

​
Installation

npm install @vue-flow/minimap
Don’t forget to import the styles: import '@vue-flow/minimap/dist/style.css'

​
Usage

<script setup>
import { VueFlow } from '@vue-flow/core'
import { MiniMap } from '@vue-flow/minimap'
import '@vue-flow/minimap/dist/style.css'

const nodes = ref([])
const edges = ref([])
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges">
    <MiniMap />
  </VueFlow>
</template>

​
Props

​
nodeColor
string | MiniMapNodeFunc
default:"'#e2e2e2'"
Color for nodes in the minimap. Can be a static color string or a function that returns a color based on the node.
type MiniMapNodeFunc = (node: GraphNode) => string
​
nodeStrokeColor
string | MiniMapNodeFunc
default:"'transparent'"
Stroke color for nodes in the minimap. Can be a static color or a function.
​
nodeClassName
string | MiniMapNodeFunc
Additional CSS class name(s) for nodes. Can be a static string or a function that returns a class name.
​
nodeBorderRadius
number
default:"5"
Border radius for node shapes in the minimap.
​
nodeStrokeWidth
number
default:"2"
Width of the node stroke in the minimap.
​
maskColor
string
default:"'rgb(240, 240, 240, 0.6)'"
Color of the viewport mask overlay.
​
maskStrokeColor
string
default:"'none'"
Stroke color for the viewport mask border.
​
maskStrokeWidth
number
default:"1"
Width of the viewport mask border.
​
maskBorderRadius
number
default:"0"
Border radius for the viewport mask.
​
position
PanelPosition
default:"'bottom-right'"
Position of the minimap on the canvas.Options: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
​
pannable
boolean
default:"false"
Enable dragging the minimap to pan the main viewport.
​
zoomable
boolean
default:"false"
Enable scrolling on the minimap to zoom the main viewport.
​
inversePan
boolean
default:"false"
Invert the panning direction when dragging the minimap.
​
zoomStep
number
default:"1"
Step size for zooming when zoomable is enabled.
​
width
number
default:"200"
Width of the minimap in pixels.
​
height
number
default:"150"
Height of the minimap in pixels.
​
ariaLabel
string | null
default:"'Vue Flow mini map'"
ARIA label for accessibility. Set to null to disable.
​
offsetScale
number
default:"5"
Scale factor for the minimap offset/padding.

​
Events

​
@click
(params: { event: MouseEvent, position: { x: number, y: number } }) => void
Emitted when the minimap background is clicked.
​
@node-click
(params: NodeMouseEvent) => void
Emitted when a node in the minimap is clicked.
interface NodeMouseEvent {
  event: MouseEvent
  node: GraphNode
  connectedEdges: Edge[]
}
​
@node-dblclick
(params: NodeMouseEvent) => void
Emitted when a node in the minimap is double-clicked.
​
@node-mouseenter
(params: NodeMouseEvent) => void
Emitted when the mouse enters a node in the minimap.
​
@node-mousemove
(params: NodeMouseEvent) => void
Emitted when the mouse moves over a node in the minimap.
​
@node-mouseleave
(params: NodeMouseEvent) => void
Emitted when the mouse leaves a node in the minimap.

​
Slots

​
node-{type}
Custom slot for rendering specific node types in the minimap. Replace {type} with your node type.Receives MiniMapNodeProps:
interface MiniMapNodeProps {
  id: string
  type: string
  selected?: boolean
  dragging?: boolean
  position: XYPosition
  dimensions: Dimensions
  borderRadius?: number
  color?: string
  strokeColor?: string
  strokeWidth?: number
  hidden?: boolean
}

​
Examples

​
Interactive MiniMap

<MiniMap 
  :pannable="true" 
  :zoomable="true" 
  :zoom-step="0.5"
/>

​
Custom Node Colors

<script setup>
function getNodeColor(node) {
  if (node.type === 'input') return '#6ede87'
  if (node.type === 'output') return '#ff6b6b'
  return '#1a192b'
}
</script>

<template>
  <MiniMap 
    :node-color="getNodeColor"
    :node-stroke-color="'#fff'"
    :node-stroke-width="3"
  />
</template>

​
Custom Position and Size

<MiniMap 
  position="top-left"
  :width="300"
  :height="200"
/>

​
Handle Node Events

<script setup>
function onNodeClick({ node, event }) {
  console.log('Clicked node:', node.id)
}
</script>

<template>
  <MiniMap @node-click="onNodeClick" />
</template>

​
TypeScript

import type { MiniMapProps, MiniMapNodeFunc, MiniMapNodeProps } from '@vue-flow/minimap'

​
Exports

  • MiniMap - The main MiniMap component
  • MiniMapNode - Internal component for rendering nodes (can be used for custom implementations)
  • MiniMapProps - TypeScript interface for MiniMap props
  • MiniMapNodeFunc - Type for node styling functions
  • MiniMapNodeProps - TypeScript interface for minimap node properties

Build docs developers (and LLMs) love

Get started for freeTalk to us