Interactive Minimap

yh-flow's minimap component not only displays an overview of the flowchart but also supports interactive navigation and layout controls.

Basic Usage

Enabling the Minimap

<template>
  <yh-flow :nodes="nodes" :edges="edges" show-minimap />
</template>

Minimap Position

You can set the minimap position using the position property:

<yh-flow
  :nodes="nodes"
  :edges="edges"
  show-minimap
  :minimap-node-color="(node) => (node.selected ? '#3b82f6' : '#94a3b8')"
/>

Position Value	Description
bottom-right	Bottom right (default)
bottom-left	Bottom left
top-right	Top right
top-left	Top left

Interactive Features

Click-to-Navigate

When interactiveMinimap is enabled, clicking anywhere on the minimap will smoothly pan the canvas to the corresponding position:

<template>
  <yh-flow ref="flowRef" :nodes="nodes" :edges="edges" show-minimap interactive-minimap />
</template>

Drag Navigation

The minimap supports drag navigation by default:

// Plugin options
const minimapOptions = {
  pannable: true, // Enable drag navigation (default: true)
  zoomable: true // Enable zoom (default: true)
}

Layout Controls

Showing Layout Buttons

Use showLayoutControls to display layout control buttons on the minimap:

<template>
  <yh-flow
    ref="flowRef"
    :nodes="nodes"
    :edges="edges"
    show-minimap
    show-layout-controls
    layout-type="dagre"
    layout-direction="TB"
    @layout-change="handleLayoutChange"
  />
</template>

<script setup lang="ts">
const handleLayoutChange = (layout: string) => {
  console.log('Layout changed to:', layout)
  // Execute auto-layout based on layout type
}
</script>

Layout Button Reference

Button	Description
D	Dagre Layout (Hierarchical)
E	ELK Layout (Elastic)
F	Force Layout
TB	Top to Bottom
LR	Left to Right

Complete Example

Start

Process

Branch

End

Interactive Minimap Demo

API Reference

Flow Props

Property	Type	Default	Description
showMinimap	boolean	false	Show minimap
interactiveMinimap	boolean	false	Enable click-to-navigate
showLayoutControls	boolean	false	Show layout control buttons
layoutType	'dagre' | 'elk' | 'force' | 'grid' | 'none'	'none'	Current layout type
layoutDirection	'TB' | 'BT' | 'LR' | 'RL'	'TB'	Layout direction

Events

Event	Description	Parameters
layout-change	Triggered when layout type changes	(layout: string) => void
direction-change	Triggered when layout direction changes	(direction: string) => void

MiniMap Plugin Options

Option	Type	Default	Description
position	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	'bottom-right'	Minimap position
width	number	200	Minimap width
height	number	150	Minimap height
nodeColor	(node: Node) => string	-	Node color function
pannable	boolean	true	Enable drag navigation
interactive	boolean	false	Enable click navigation
showLayoutControls	boolean	false	Show layout buttons

Best Practices

1. Combine with auto-layout: Combine minimap layout controls with auto-layout algorithms for a one-stop layout experience
2. Visual feedback: Use nodeColor function to display different colors based on node status
3. Navigation efficiency: Enable interactive navigation in large flowcharts to help users quickly locate areas of interest

TIP

Clicking on empty areas of the minimap quickly jumps to the corresponding canvas position, especially useful for navigation in large flowcharts.