Skip to main content

Edge Options

You create edges by adding them to your edges or defaultEdges array of the ReactFlow component.

Edge example:

{
id: 'e1-2',
type: 'straight',
source: '1',
target: '2',
animated: true,
label: 'edge label'
}

If you wanted to display this edge, you would need a node with id = 1 (source node) and another one with id = 2 (target node).

Options

id (required)

Description:
Unique identifier
Type:
string

source (required)

Description:
Id of the source node
Type:
string

target (required)

Description:
Id of the target node
Type:
string

sourceHandle

Description:
You only need this when you have multiple handles
Type:
string

targetHandle

Description:
You only need this when you have multiple handles
Type:
string

type

Description:
Defines the edge type
Type:
'default' (bezier), 'step', 'smoothstep' or 'straight' + your custom types

animated

Description:
If true, edge is an animated flow
Type:
boolean

data

Description:
Can be used to pass data to your custom edge
Type:
object

selected

Description:
If true, the edge is selected
Type:
boolean

hidden

Description:
If true, the edge will not be rendered
Type:
boolean

updatable

Description:
String (id for a svg marker that you need to define yourself) or a marker configuration object
Type:
boolean or HandleType

interactionWidth

Description:
Renders an invisible edge for better interaction. Can be disabled by setting it to 0, default=20
Type:
number

label

Description:
If this is set, the edge has a label at its center
Type:
string

labelStyle

Description:
Attributes for the edge label
Type:
SVGProperties

labelShowBg

Description:
If true the label has a background
Type:
boolean

labelBgStyle

Description:
Style for the label background
Type:
SVGProperties

labelBgPadding

Description:
Padding for the label background
Type:
[number, number]

labelBgBorderRadius

Description:
Border radius for the label background (2 by default)
Type:
number

markerStart

Description:
String (id for a svg marker that you need to define yourself) or a marker configuration object

markerEnd

Description:
String (id for a svg marker that you need to define yourself) or a marker configuration object

style

Description:
Style for the edge
Type:
CSSProperties

className

Description:
Additional class name
Type:
string

zIndex

Description:
Controls the layer order of the edges
Type:
number, default: 0

ariaLabel

Description:
The aria-label for the edge
Type:
string, default: 'from ${source} to ${target}' `

pathOptions

Description:
Can only be used for smoothstep and default types
Type:
object - smoothstep: { offset: number, borderRadius: number }, default: { curvature: number }

You can find an example with different edges in the edge types example.

markerStart / markerEnd options

  • type: string: default 'arrow' or 'arrowclosed'
  • color: arrow fill color (optional)
  • width: marker width (optional)
  • height: marker width (optional)
  • markerUnits: defines coordinate system (optional)
  • orient: defines rotation - 'auto' | 'auto-start-reverse' | number (optional)
  • strokeWidth

Typescript

Edge

A edge uses the Edge type:

type Edge<T = any> = {
id: string;
type?: string;
source: string;
target: string;
sourceHandle?: string | null;
targetHandle?: string | null;
label?: string | ReactNode;
labelStyle?: CSSProperties;
labelShowBg?: boolean;
labelBgStyle?: CSSProperties;
labelBgPadding?: [number, number];
labelBgBorderRadius?: number;
style?: CSSProperties;
animated?: boolean;
hidden?: boolean;
deletable?: boolean;
focusable?: boolean;
data?: T;
className?: string;
sourceNode?: Node;
targetNode?: Node;
selected?: boolean;
markerStart?: EdgeMarkerType;
markerEnd?: EdgeMarkerType;
zIndex?: number;
ariaLabel?: string;
interactionWidth?: number;
};

EdgeMarker

type EdgeMarker {
type: MarkerType; // 'arrow' or 'arrowclosed'
color?: string; // arrow fill color
width?: number;
height?: number;
markerUnits?: string; // defines the coordinate system https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/markerUnits
orient?: string; // defines rotation - 'auto' | 'auto-start-reverse' | number
strokeWidth?: number;
}

EdgeMarkerType

type EdgeMarkerType = string | EdgeMarker;

MarkerType

enum MarkerType {
Arrow = 'arrow',
ArrowClosed = 'arrowclosed',
}