交互式小地图 (Interactive Minimap)

yh-flow 的小地图组件不仅能够显示流程图的整体概览，还支持交互式导航和布局控制。

基本用法

启用小地图

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

小地图位置

可以通过 position 属性设置小地图的位置：

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

位置值	说明
bottom-right	右下角（默认）
bottom-left	左下角
top-right	右上角
top-left	左上角

交互式功能

点击跳转导航

启用 interactiveMinimap 属性后，点击小地图上的任意位置，画布将平滑移动到对应位置：

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

拖拽导航

小地图默认支持拖拽导航功能：

// 插件选项
const minimapOptions = {
  pannable: true, // 允许拖拽导航（默认 true）
  zoomable: true // 允许缩放（默认 true）
}

布局控制

显示布局按钮

通过 showLayoutControls 属性可以在小地图上显示布局控制按钮：

<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)
  // 根据布局类型执行自动布局
}
</script>

布局按钮说明

按钮	说明
D	Dagre 布局（层次布局）
E	ELK 布局（弹性布局）
F	Force 布局（力导向布局）
TB	从上到下方向
LR	从左到右方向

完整示例

开始

处理

分支

结束

交互式小地图演示

API 参考

Flow Props

属性	类型	默认值	说明
showMinimap	boolean	false	是否显示小地图
interactiveMinimap	boolean	false	启用点击跳转导航
showLayoutControls	boolean	false	显示布局控制按钮
layoutType	'dagre' | 'elk' | 'force' | 'grid' | 'none'	'none'	当前布局类型
layoutDirection	'TB' | 'BT' | 'LR' | 'RL'	'TB'	布局方向

事件

事件名	说明	参数
layout-change	布局类型改变时触发	(layout: string) => void
direction-change	布局方向改变时触发	(direction: string) => void

MiniMap 插件选项

选项	类型	默认值	说明
position	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	'bottom-right'	小地图位置
width	number	200	小地图宽度
height	number	150	小地图高度
nodeColor	(node: Node) => string	-	节点颜色函数
pannable	boolean	true	是否支持拖拽
interactive	boolean	false	是否支持点击跳转
showLayoutControls	boolean	false	显示布局按钮

最佳实践

1. 配合自动布局使用：将小地图的布局控制按钮与自动布局算法结合，提供一站式布局体验
2. 视觉反馈：使用 nodeColor 函数根据节点状态显示不同颜色，增强可视化效果
3. 导航效率：在大型流程图中启用交互式导航，帮助用户快速定位关注区域

TIP

点击小地图的空白区域可以快速跳转到对应的画布位置，特别适合大型流程图的导航。