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​

Description:
Unique identifier
Type:
string

source​

Description:
Id of the source node
Type:
string

target​

Description:
Id of the target node
Type:
string

sourceHandle?​

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

targetHandle?​

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

type​

Description:
Defines the edge type
Type:
('default' | 'step' | 'smoothstep' | 'straight') & CustomEdgeTypes

animated?​

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

data​

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

selected?​

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

hidden?​

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

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
Type:
number
Default:
20

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
Type:
EdgeMarkerType

markerEnd?​

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

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:
{ offset: number, borderRadius: number } if type == 'smoothstep' | { curvature: number } if type == 'default'

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

Markers​

An edge is a SVG path. SVG paths have a markerStart and a markerEnd attribute. In SVG world you can create a marker definition and then use the id on an SVG path element. React Flow comes with two predefined markers. An arrow and a closed arrow. The marker definitions get created dynamically if one of the edges use the markerStart or markerEnd option. If you want to create a custom marker, you can add marker definitions within your app and use the ids as markerStart and markerEnd edge options as seen in the Edge Marker example.

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',
}