Edges

Edges are the connections between nodes in your flow diagram. They represent relationships, data flow, or dependencies between different parts of your workflow.

Edge Structure

Every edge requires three essential properties:

id (string): A unique identifier
source (string): ID of the source node
target (string): ID of the target node

const edge = {
  id: 'e1-2',
  source: '1',
  target: '2'
}

Edge Interface

string

required

Unique identifier for the edge

source

string

required

ID of the source node

target

string

required

ID of the target node

type

string

default:"'default'"

Edge type: 'default' (bezier), 'step', 'smoothstep', 'straight', or custom

sourceHandle

string | null

ID of the source handle. If null or not provided, connects to the first available source handle

targetHandle

string | null

ID of the target handle

label

string | VNode | Component

Edge label content

animated

boolean

default:"false"

Animate the edge path

style

CSSProperties | StyleFunc

Inline styles for the edge path

class

string | string[] | ClassFunc

CSS classes for the edge

markerStart

EdgeMarkerType

Start marker (arrow at source)

markerEnd

EdgeMarkerType

End marker (arrow at target)

selectable

boolean

default:"true"

Enable edge selection

deletable

boolean

default:"true"

Enable edge deletion

updatable

boolean | 'source' | 'target'

default:"false"

Allow reconnecting edge. Use true for both ends, or specify 'source' or 'target'

focusable

boolean

default:"true"

Enable keyboard focus (a11y)

hidden

boolean

Hide the edge

data

any

Custom data object

zIndex

number

Stacking order

interactionWidth

number

default:"2"

Width of the invisible interaction area for easier edge selection

Edge Label Options

labelStyle

CSSProperties

Styles for the label text

labelShowBg

boolean

default:"true"

Show background behind label

labelBgStyle

CSSProperties

Styles for label background

labelBgPadding

[number, number]

default:"[2, 4]"

Padding around label [vertical, horizontal]

labelBgBorderRadius

number

default:"2"

Border radius for label background

Built-in Edge Types

Default (Bezier)
Straight
Step
Smooth Step

A curved bezier edge (default type).

const edge = {
  id: 'e1-2',
  source: '1',
  target: '2',
  type: 'default', // or omit for default
  pathOptions: {
    curvature: 0.5 // Control curve intensity
  }
}

A direct straight line between nodes.

const edge = {
  id: 'e1-2',
  source: '1',
  target: '2',
  type: 'straight'
}

A path with right angles (step pattern).

const edge = {
  id: 'e1-2',
  source: '1',
  target: '2',
  type: 'step'
}

A step path with rounded corners.

const edge = {
  id: 'e1-2',
  source: '1',
  target: '2',
  type: 'smoothstep',
  pathOptions: {
    offset: 20,
    borderRadius: 10
  }
}

Edge Markers

Add arrows or other markers to edge endpoints:

import { MarkerType } from '@vue-flow/core'

const edge = {
  id: 'e1-2',
  source: '1',
  target: '2',
  markerEnd: MarkerType.ArrowClosed, // Standard arrow
  markerStart: MarkerType.Arrow // Open arrow at start
}

// Custom marker
const edgeWithCustomMarker = {
  id: 'e1-2',
  source: '1',
  target: '2',
  markerEnd: {
    type: MarkerType.ArrowClosed,
    color: '#f6ab6c',
    width: 20,
    height: 20
  }
}

Available marker types:

MarkerType.Arrow - Open arrow
MarkerType.ArrowClosed - Filled arrow

Custom Edge Types

Create custom edges for specialized visualizations:

<script setup lang="ts">
import { BaseEdge, getBezierPath } from '@vue-flow/core'
import type { EdgeProps } from '@vue-flow/core'

interface CustomData {
  status: 'active' | 'inactive'
}

const props = defineProps<EdgeProps<CustomData>>()

const path = computed(() => {
  return getBezierPath({
    sourceX: props.sourceX,
    sourceY: props.sourceY,
    sourcePosition: props.sourcePosition,
    targetX: props.targetX,
    targetY: props.targetY,
    targetPosition: props.targetPosition,
  })
})

const edgeColor = computed(() => 
  props.data?.status === 'active' ? '#22c55e' : '#94a3b8'
)
</script>

<template>
  <BaseEdge
    :id="id"
    :style="{ stroke: edgeColor, strokeWidth: 2 }"
    :path="path[0]"
    :marker-end="markerEnd"
  />
</template>

Edge Path Helpers

Vue Flow provides utilities to calculate edge paths:

import {
  getBezierPath,
  getStraightPath,
  getSimpleBezierPath,
  getSmoothStepPath
} from '@vue-flow/core'

// Bezier curve
const [path, labelX, labelY] = getBezierPath({
  sourceX: 0,
  sourceY: 0,
  sourcePosition: Position.Right,
  targetX: 100,
  targetY: 100,
  targetPosition: Position.Left,
  curvature: 0.25
})

// Smooth step
const [path2] = getSmoothStepPath({
  sourceX: 0,
  sourceY: 0,
  sourcePosition: Position.Right,
  targetX: 100,
  targetY: 100,
  targetPosition: Position.Left,
  borderRadius: 8,
  offset: 20
})

Adding Edges

Using v-model
Using addEdges
On Connect

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

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

function addEdge() {
  edges.value.push({
    id: `e${Date.now()}`,
    source: '2',
    target: '3'
  })
}
</script>

import { useVueFlow } from '@vue-flow/core'

const { addEdges } = useVueFlow()

// Add single edge
addEdges({ id: 'e1-2', source: '1', target: '2' })

// Add multiple edges
addEdges([
  { id: 'e1-2', source: '1', target: '2' },
  { id: 'e2-3', source: '2', target: '3' }
])

<script setup>
import { useVueFlow } from '@vue-flow/core'

const { onConnect, addEdges } = useVueFlow()

onConnect((connection) => {
  addEdges({
    ...connection,
    id: `e${connection.source}-${connection.target}`,
    animated: true,
    style: { stroke: '#f6ab6c' }
  })
})
</script>

Updating Edges

import { useVueFlow } from '@vue-flow/core'

const { updateEdgeData, findEdge } = useVueFlow()

// Update edge data
updateEdgeData('e1-2', { weight: 10 })

// Update with function
updateEdgeData('e1-2', (edge) => ({
  weight: edge.data.weight * 2
}))

// Find and mutate
const edge = findEdge('e1-2')
if (edge) {
  edge.animated = true
  edge.style = { stroke: 'red' }
}

Removing Edges

import { useVueFlow } from '@vue-flow/core'

const { removeEdges } = useVueFlow()

// Remove single edge
removeEdges('e1-2')

// Remove multiple edges
removeEdges(['e1-2', 'e2-3'])

// Remove all edges from a node
const { getConnectedEdges } = useVueFlow()
const connectedEdges = getConnectedEdges('node-1')
removeEdges(connectedEdges.map(e => e.id))

Connection Validation

Control which connections are allowed:

import type { Connection } from '@vue-flow/core'

function isValidConnection(connection: Connection) {
  // Prevent self-connections
  if (connection.source === connection.target) {
    return false
  }
  
  // Prevent duplicate connections
  const existingEdge = edges.value.find(
    e => e.source === connection.source && e.target === connection.target
  )
  return !existingEdge
}

<template>
  <VueFlow :is-valid-connection="isValidConnection" />
</template>

Edge Updates

Allow users to reconnect edges by dragging endpoints:

const edge = {
  id: 'e1-2',
  source: '1',
  target: '2',
  updatable: true, // Both ends can be reconnected
  // updatable: 'source', // Only source can be reconnected
  // updatable: 'target', // Only target can be reconnected
}

Handle edge update events:

<script setup>
import { useVueFlow } from '@vue-flow/core'

const { onEdgeUpdate } = useVueFlow()

onEdgeUpdate(({ edge, connection }) => {
  console.log('Edge updated:', edge.id)
  console.log('New connection:', connection)
})
</script>

GraphEdge vs Edge

Edge: Input type you provide
GraphEdge: Internal representation with computed properties

interface GraphEdge extends Edge {
  selected: boolean
  sourceNode: GraphNode
  targetNode: GraphNode
  sourceX: number
  sourceY: number
  targetX: number
  targetY: number
}

Edge Props

Custom edge components receive:

interface EdgeProps<Data = any> {
  id: string
  source: string
  target: string
  sourceNode: GraphNode
  targetNode: GraphNode
  type: string
  data: Data
  selected: boolean
  sourceX: number
  sourceY: number
  targetX: number
  targetY: number
  sourcePosition: Position
  targetPosition: Position
  sourceHandleId?: string
  targetHandleId?: string
  markerStart: string
  markerEnd: string
  style?: CSSProperties
  label?: string | VNode | Component
  labelStyle?: CSSProperties
  labelShowBg?: boolean
  labelBgStyle?: CSSProperties
  labelBgPadding?: [number, number]
  labelBgBorderRadius?: number
}

TypeScript Support

import type { Edge } from '@vue-flow/core'

interface EdgeData {
  weight: number
  type: 'data' | 'control'
}

type CustomEdgeType = 'custom' | 'special'

type CustomEdge = Edge<EdgeData, any, CustomEdgeType>

const edges: CustomEdge[] = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    type: 'custom',
    data: {
      weight: 5,
      type: 'data'
    }
  }
]

Get Started

Core Concepts

Guides

Components

Edges

Edges

Edge Structure

Edge Interface

Edge Label Options

Built-in Edge Types

Edge Markers

Custom Edge Types

Edge Path Helpers

Adding Edges

Updating Edges

Removing Edges

Connection Validation

Edge Updates

GraphEdge vs Edge

Edge Props

TypeScript Support

See Also

Build docs developers (and LLMs) love

Get Started

Core Concepts

Guides

Components

​Edges

​Edge Structure

​Edge Interface

​Edge Label Options

​Built-in Edge Types

​Edge Markers

​Custom Edge Types

​Edge Path Helpers

​Adding Edges

​Updating Edges

​Removing Edges

​Connection Validation

​Edge Updates

​GraphEdge vs Edge

​Edge Props

​TypeScript Support

​See Also

Build docs developers (and LLMs) love

Edges

Edge Structure

Edge Interface

Edge Label Options

Built-in Edge Types

Edge Markers

Custom Edge Types

Edge Path Helpers

Adding Edges

Updating Edges

Removing Edges

Connection Validation

Edge Updates

GraphEdge vs Edge

Edge Props

TypeScript Support

See Also