Skip to main content
The PathfindingEdge component creates smart edges that automatically route around nodes to avoid overlaps.

​
Installation

npm install @vue-flow/pathfinding-edge

​
Usage

<script setup>
import { VueFlow } from '@vue-flow/core'
import { PathFindingEdge } from '@vue-flow/pathfinding-edge'

const nodes = ref([
  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
  { id: '2', position: { x: 200, y: 0 }, data: { label: 'Node 2' } },
  { id: '3', position: { x: 100, y: 100 }, data: { label: 'Node 3' } },
])

const edges = ref([
  { 
    id: 'e1-2', 
    source: '1', 
    target: '2',
    type: 'pathfinding'
  },
])

const edgeTypes = {
  pathfinding: PathFindingEdge
}
</script>

<template>
  <VueFlow 
    :nodes="nodes" 
    :edges="edges"
    :edge-types="edgeTypes"
  />
</template>

​
Props

PathfindingEdge extends the standard EdgeProps from Vue Flow core.
​
id
string
required
Unique identifier for the edge.
​
source
string
required
ID of the source node.
​
target
string
required
ID of the target node.
​
sourceX
number
required
X coordinate of the source position.
​
sourceY
number
required
Y coordinate of the source position.
​
targetX
number
required
X coordinate of the target position.
​
targetY
number
required
Y coordinate of the target position.
​
sourcePosition
Position
default:"Position.Bottom"
Position of the source handle on the node.Options: Position.Top | Position.Right | Position.Bottom | Position.Left
​
targetPosition
Position
default:"Position.Top"
Position of the target handle on the node.
​
selected
boolean
default:"false"
Whether the edge is currently selected.
​
animated
boolean
default:"false"
Whether to show animation on the edge path.
​
label
string | Component
Label to display on the edge.
​
labelStyle
CSSProperties
Inline styles for the edge label.
​
labelShowBg
boolean
default:"true"
Whether to show a background behind the label.
​
labelBgStyle
CSSProperties
Inline styles for the label background.
​
labelBgPadding
[number, number]
Padding around the label background [horizontal, vertical].
​
labelBgBorderRadius
number
Border radius for the label background.
​
style
CSSProperties
Inline styles for the edge path.
​
markerEnd
string
ID of the marker to use at the edge end (arrow).
​
markerStart
string
ID of the marker to use at the edge start.
​
sourceHandleId
string
ID of the specific source handle to connect from.
​
targetHandleId
string
ID of the specific target handle to connect to.

​
How It Works

The PathfindingEdge component:
  1. Creates a 2D grid representation of the flow canvas
  2. Marks areas occupied by nodes as obstacles
  3. Uses the A* pathfinding algorithm to find the shortest path around obstacles
  4. Renders a smooth path that avoids overlapping with nodes
  5. Falls back to a standard Bezier edge if the path is very short (2 or fewer points)
The pathfinding calculation is performed on each render. For large graphs with many nodes, consider the performance implications.

​
Examples

​
Basic Pathfinding Edge

<script setup>
const edges = ref([
  { 
    id: 'e1-2',
    source: '1',
    target: '2',
    type: 'pathfinding'
  }
])

const edgeTypes = {
  pathfinding: PathFindingEdge
}
</script>

<template>
  <VueFlow :edges="edges" :edge-types="edgeTypes" />
</template>

​
Styled Pathfinding Edge

<script setup>
const edges = ref([
  { 
    id: 'e1-2',
    source: '1',
    target: '2',
    type: 'pathfinding',
    style: { stroke: '#ff6b6b', strokeWidth: 3 },
    animated: true
  }
])
</script>

​
With Label

<script setup>
const edges = ref([
  { 
    id: 'e1-2',
    source: '1',
    target: '2',
    type: 'pathfinding',
    label: 'Smart Connection',
    labelStyle: { fill: '#555', fontWeight: 600 },
    labelBgStyle: { fill: '#fff' }
  }
])
</script>

​
Custom Markers

<script setup>
const edges = ref([
  { 
    id: 'e1-2',
    source: '1',
    target: '2',
    type: 'pathfinding',
    markerEnd: 'arrow-red',
  }
])
</script>

<template>
  <VueFlow :edges="edges">
    <template #edge-pathfinding="props">
      <PathFindingEdge v-bind="props" />
    </template>
    
    <svg>
      <defs>
        <marker
          id="arrow-red"
          viewBox="0 0 10 10"
          refX="5"
          refY="5"
          markerWidth="6"
          markerHeight="6"
          orient="auto-start-reverse"
        >
          <path d="M 0 0 L 10 5 L 0 10 z" fill="#ff0000" />
        </marker>
      </defs>
    </svg>
  </VueFlow>
</template>

​
PerfectArrow Component

The package also exports a PerfectArrow component that creates elegant curved arrows between nodes using the perfect-arrows library.

​
Usage

<script setup>
import { PerfectArrow } from '@vue-flow/pathfinding-edge'

const edges = ref([
  { 
    id: 'e1-2',
    source: '1',
    target: '2',
    type: 'perfect-arrow'
  }
])

const edgeTypes = {
  'perfect-arrow': PerfectArrow
}
</script>

<template>
  <VueFlow :edges="edges" :edge-types="edgeTypes" />
</template>

​
PerfectArrow Props

Inherits all props from PathFindingEdgeProps, plus:
​
options
ArrowOptions
Configuration options for the perfect-arrows library.
interface ArrowOptions {
  padStart?: number
  padEnd?: number
  straights?: boolean
  bow?: number
  stretch?: number
}

​
TypeScript

import type { PathFindingEdgeProps, PerfectArrowProps } from '@vue-flow/pathfinding-edge'
import type { EdgeProps, Position } from '@vue-flow/core'

​
Exports

  • PathFindingEdge - Smart pathfinding edge component
  • PerfectArrow - Curved arrow edge component
  • PathFindingEdgeProps - TypeScript interface for PathFindingEdge props
  • PerfectArrowProps - TypeScript interface for PerfectArrow props

Build docs developers (and LLMs) love

Get started for freeTalk to us