Skip to main content

​
Edge

Union type for all edge types in Vue Flow. 
type Edge<Data = ElementData, CustomEvents = any, Type extends string = string> =
  | DefaultEdge<Data, CustomEvents, Type>
  | SmoothStepEdgeType<Data, CustomEvents>
  | BezierEdgeType<Data, CustomEvents>

​
DefaultEdge

The base interface for defining edges in Vue Flow.
​
id
string
required
Unique edge identifier
​
source
string
required
Source node id
​
target
string
required
Target node id
​
sourceHandle
string | null
Source handle id
​
targetHandle
string | null
Target handle id
​
type
string
Edge type - can be a default type or a custom type
​
label
string | VNode | Component<EdgeTextProps>
Edge label
​
data
any
Additional data passed to your custom components

​
Interaction Properties

​
animated
boolean
Whether the edge is animated
​
selectable
boolean
Enable or disable selecting this edge
​
focusable
boolean
Enable or disable focusing this edge (accessibility)
​
deletable
boolean
Enable or disable deleting this edge
​
updatable
EdgeUpdatable
Enable or disable updating edge. Can be boolean, 'target', or 'source'
​
interactionWidth
number
Radius of mouse event triggers (to ease selecting edges). Defaults to 2

​
Markers

​
markerStart
EdgeMarkerType
Edge marker at the start. Can be string, MarkerType, or EdgeMarker object
​
markerEnd
EdgeMarkerType
Edge marker at the end. Can be string, MarkerType, or EdgeMarker object

​
Label Styling

​
labelStyle
CSSProperties
Label styles
​
labelShowBg
boolean
Show label background
​
labelBgStyle
CSSProperties
Label background styles
​
labelBgPadding
[number, number]
Label background padding as [horizontal, vertical]
​
labelBgBorderRadius
number
Label background border radius

​
Styling

​
class
string | string[] | Record<string, any> | ClassFunc<GraphEdge>
Additional class names. Can be a string, array, object, or callback
​
style
Styles | StyleFunc<GraphEdge>
Additional styles. Can be an object or a callback
​
hidden
boolean
Hide or show the edge
​
zIndex
number
z-index for the edge

​
Accessibility

​
ariaLabel
string | null
Aria label for the edge
​
domAttributes
SVGAttributes
General escape hatch for adding custom attributes to the edge’s DOM element

​
Deprecated Properties

​
template
EdgeComponent
Overwrites current edge type
​
events
Partial<EdgeEventsHandler>
Deprecated - will be removed in next major release
Contextual and custom events

​
SmoothStepEdgeType

Smooth step edge with configurable path options. 
type SmoothStepEdgeType<Data = ElementData, CustomEvents = any> = 
  DefaultEdge<Data, CustomEvents> & {
    type: 'smoothstep'
    pathOptions?: SmoothStepPathOptions
  }

​
SmoothStepPathOptions

​
offset
number
Offset for the smooth step path
​
borderRadius
number
Border radius for corners

​
BezierEdgeType

Bezier edge with configurable curvature. 
type BezierEdgeType<Data = ElementData, CustomEvents = any> = 
  DefaultEdge<Data, CustomEvents> & {
    type: 'default'
    pathOptions?: BezierPathOptions
  }

​
BezierPathOptions

​
curvature
number
Curvature of the bezier curve

​
GraphEdge

Internal edge type that extends Edge with computed properties.
​
selected
boolean
Whether the edge is currently selected
​
sourceNode
GraphNode
Reference to the source node
​
targetNode
GraphNode
Reference to the target node
​
sourceX
number
X coordinate of source position
​
sourceY
number
Y coordinate of source position
​
targetX
number
X coordinate of target position
​
targetY
number
Y coordinate of target position

​
EdgeProps

Props passed to edge components when rendering custom edges.
​
id
string
Edge identifier
​
source
string
Source node id
​
target
string
Target node id
​
sourceNode
GraphNode
Source node object
​
targetNode
GraphNode
Target node object
​
type
string
Edge type
​
label
string | VNode | Component | object
Edge label
​
selected
boolean
Whether edge is selected
​
animated
boolean
Whether edge is animated
​
updatable
boolean
Whether edge is updatable
​
sourcePosition
Position
Source handle position
​
targetPosition
Position
Target handle position
​
sourceHandleId
string
Source handle id
​
targetHandleId
string
Target handle id
​
sourceX
number
Source X coordinate
​
sourceY
number
Source Y coordinate
​
targetX
number
Target X coordinate
​
targetY
number
Target Y coordinate
​
markerStart
string
Marker URL for start
​
markerEnd
string
Marker URL for end
​
style
CSSProperties
Edge styles
​
data
any
Additional data

​
MarkerType

Enum for edge marker types. 
enum MarkerType {
  Arrow = 'arrow',
  ArrowClosed = 'arrowclosed'
}

​
EdgeMarker

Detailed edge marker definition.
​
type
MarkerType
required
Marker type
​
id
string
Unique marker id
​
color
string
Marker color
​
width
number
Marker width
​
height
number
Marker height
​
markerUnits
string
Marker units
​
orient
string
Marker orientation
​
strokeWidth
number
Marker stroke width

​
EdgeMarkerType

Type for edge marker specification. 
type EdgeMarkerType = string | MarkerType | EdgeMarker

​
EdgeUpdatable

Type for edge updatable property. 
type EdgeUpdatable = boolean | 'target' | 'source'
  • true - both ends can be updated
  • false - edge cannot be updated
  • 'target' - only target can be updated
  • 'source' - only source can be updated

​
Type Utilities

​
ToGraphEdge

Transform an Edge type to a GraphEdge type. 
type ToGraphEdge<T extends Edge> = GraphEdge<
  T extends Edge<infer Data> ? Data : never,
  T extends Edge<never, infer CustomEvents> ? CustomEvents : never,
  T extends Edge<never, never, infer Type> ? Type : never
>

​
Example Usage

interface MyEdgeData {
  label: string
  weight: number
}

type MyEdge = Edge<MyEdgeData>

const edge: MyEdge = {
  id: 'e1-2',
  source: '1',
  target: '2',
  data: { 
    label: 'Connection', 
    weight: 5 
  },
  animated: true,
  markerEnd: MarkerType.ArrowClosed
}

Build docs developers (and LLMs) love

Get started for freeTalk to us