Edge Router

The edge router algorithm applies polyline routes to the edges of the graph. Edges are by default routed in an orthogonal fashion, i.e., they only consist of horizontal and vertical segments. The edge router algorithm does not affect the node placement.

Edge router

The edge router algorithm provides customization options through a wide array of properties accessible via the EdgeRouterOptions. The edge router can be applied on the whole graph set or only on a set of selected edges. It also automatically places node and edge labels when the corresponding properties are activated.

Additional customization for individual graph elements, such as sourcePortCandidates, nodeMargins, and more, can be achieved via the EdgeRouterDataProvider.

Feel free to play around with the orthogonal layout configuration in our online playground.

Extensive documentation detailing all available properties of the orthogonal layout supported by yFiles layouts for React Flow can be found here.

runLayout({
  name: 'EdgeRouter',
  layoutOptions: {
    defaultEdgeDescriptor: { routingStyle: 'octilinear'},
    edgeLabelPlacement: 'integrated'
  },
  layoutData: {
    ports: {
      sourcePortCandidates: (edge: EdgeProps) =>
        parseInt(edge.target) % 2 === 0 ? ['right'] : ['left'],
    },
    nodeMargins: () => 20
  }
})

EdgeRouterOptions

The configuration options for the edge routing algorithm that applies polyline routes to the edges of the graph.

For more information on layout algorithm and its available settings, see EdgeRouter.

NameType
defaultEdgeDescriptor?
EdgeRouterEdgeDescriptor
edgeLabelPlacement?
“consider-unaffected-edge-labels” | “generic” | “ignore” | “integrated”
gridSpacing?
number
minimumNodeToEdgeDistance?
number
nodeLabelPlacement?
“consider” | “generic” | “ignore” | “ignore-group-labels”
rerouting?
boolean
stopDuration?
number

EdgeRouterDataProvider<TNodeData, TEdgeData>

A provider for individual options per nodes or edges in a EdgeRouter. It allows for defining a function that provide values for each element.

For more information, see EdgeRouterData.

NameDescriptionType
edgeLabelPreferredPlacements?
Provides descriptors for the placement of edge labels.
(label: LabelData) => EdgeLabelPreferredPlacement
nodeMargins?
Provides margins for nodes, i.e., a rectangular area around a specific node considered during the layout.
(node: TNodeData) => NodeMargins
ports?
Provides information about how an edge connects to its nodes.
PortDataProvider<TEdgeData>
scope?
Provides which edges should be routed.
EdgeRouterScopeDataProvider<TNodeData,TEdgeData>
sourceGroupIds?
Provides which edges should be grouped at source, i.e., share the beginning of their routes.
(edge: TEdgeData) => any
targetGroupIds?
Provides which edges should be grouped at target, i.e., share the end of their routes.
(edge: TEdgeData) => any

Playground