xyflow/website/src/markdown/docs/api/edges.md

title

title
Edge Options

You create edges by adding them to your elements 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: string (required)
• source: string (an id of a node) (required)
• target: string (an id of a node) (required)
• type: 'default' (bezier), 'straight', 'step' and 'smoothedge' or a custom one depending on your implementation
• animated: boolean
• style: css properties for the edge line path
• className: additional class name
• label: string
• labelStyle: css properties for the text
• labelShowBg: boolean - default: true
• labelBgStyle: css properties for the text background
• labelBgPadding: [number, number] background rectangle padding - default: [2, 4]
• labelBgBorderRadius: number - default 2
• arrowHeadType: 'arrow' or 'arrowclosed' - defines the arrowhead of the edge
• markerEndId: custom marker end url - if this is used arrowHeadType gets ignored
• isHidden: if true, the edge will not be rendered
• data: {} you can use this to pass data to your custom edges.

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