Skip to content

MiniMap

Installation

bash
yarn add @vue-flow/minimap
  
# or
npm install @vue-flow/minimap
yarn add @vue-flow/minimap
  
# or
npm install @vue-flow/minimap

Usage

To use the minimap simply pass the MiniMap component as a child to the VueFlow component.

WARNING

Make sure you also import the styles as these are not part of the default theme anymore.

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

// import default minimap styles
import '@vue-flow/minimap/dist/style.css'

import initialElements from './initial-elements'

// some nodes and edges
const elements = ref(initialElements)
</script>

<template>
  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
    <MiniMap />
  </VueFlow>
</template>
<script setup>
import { VueFlow } from '@vue-flow/core'
import { MiniMap } from '@vue-flow/minimap'

// import default minimap styles
import '@vue-flow/minimap/dist/style.css'

import initialElements from './initial-elements'

// some nodes and edges
const elements = ref(initialElements)
</script>

<template>
  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
    <MiniMap />
  </VueFlow>
</template>

Interactive MiniMap

The minimap can be made interactive by using the pannable and zoomable props.

vue
<template>
  <VueFlow>
    <MiniMap pannable zoomable />
  </VueFlow>
</template>
<template>
  <VueFlow>
    <MiniMap pannable zoomable />
  </VueFlow>
</template>

When enabled, these props allow you to pan on drag and zoom on scroll using the MiniMap.

Props

NameDefinitionTypeOptionalDefault
nodeColorNode(s) Background colorstring, MiniMapNodeFunctrue#fff
nodeStrokeColorBorder colorstring, MiniMapNodeFunctrue#555
nodeClassNameExtra classesstring, MiniMapNodeFunctrue-
nodeBorderRadiusBorder radiusnumbertrue5
nodeStrokeWidthStroke widthnumbertrue2
maskColorMinimap Background colorstringtruergb(240, 242, 243, 0.7)
pannableUse Minimap to pan on dragbooleantruefalse
zoomableUse Minimap to zoom on wheelbooleantruefalse

Slots

NameDefinitionPropsDefault
node-${node.type}MiniMap Node slotMiniMapNodePropsMiniMapNode

Released under the MIT License.