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

NameTypeDescription
id (required)stringUnique identifier
source (required)stringId of the source node
target (required)stringId of the target node
sourceHandlestringYou only need this when you have multiple handles
targetHandlestringYou only need this when you have multiple handles
type'default' (bezier), 'step', 'smoothstep' or 'straight' + your custom types
animatedboolean
dataobjectCan be used to pass data to your custom edge
selectedboolean if true, the edge is selected
hiddenboolean if true, the edge will not be rendered
labelstringIf this is set, the edge has a label at its center
labelStyleSVGPropertiesAttributes for the edge label
labelShowBgbooleanIf true the label has a background
labelBgStyleSVGProperties
labelBgPaddingnumber)
labelBgBorderRadiusnumberThis is 2 by default
markerStartstring or objectstring (id for a svg marker that you need to define yourself) or a marker configuration object
markerEndstring or objectstring (id for a svg marker that you need to define yourself) or a marker configuration object
styleCSSProperties
classNamestring
zIndexnumber, default: 0controls the layer order of the edges

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