Orthogonal Layout

The orthogonal layout algorithm arranges the graph in an orthogonal fashion such that each edge is drawn as an alternating sequence of horizontal and vertical segments. It produces compact drawings with no overlapping nodes, few crossings and few bends and is well suited for small and medium-sized sparse graphs.

Orthogonal layout

The orthogonal layout algorithm provides extensive customization options through a wide array of properties accessible via the OrthogonalLayoutOptions. Fundamental options include different layout style and orientations, substructure detection, and more. It also automatically places node and edge labels when the corresponding properties are activated.

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

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: 'OrthogonalLayout',
  layoutOptions: {
    edgeLabelPlacement: 'integrated',
    nodeLabelPlacement: 'consider',
    chainSubstructureStyle: 'straight'
  },
  layoutData: {
    edgeLabelPreferredPlacements: () => ({
      sideOfEdge: 'left-of-edge',
      distanceToEdge: 20,
    }),
    nodeMargins: () => 20
  }
})

OrthogonalLayoutOptions

The configuration options for the Orthogonal layout algorithm that arranges graphs in an orthogonal fashion.

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

NameType
alignDegreeOneNodes?
boolean
chainSubstructureSize?
number
chainSubstructureStyle?
“none” | “straight” | “wrapped-with-nodes-at-turns” | “wrapped-with-bends-at-turns”
cycleSubstructureSize?
number
cycleSubstructureStyle?
“none” | “circular” | “circular-with-nodes-at-corners” | “circular-with-bends-at-corners”
defaultEdgeDescriptor?
OrthogonalLayoutEdgeDescriptor
edgeLabelPlacement?
“generic” | “ignore” | “integrated”
fromSketchMode?
boolean
gridSpacing?
number
layoutOrientation?
“top-to-bottom” | “left-to-right” | “right-to-left” | “bottom-to-top”
nodeLabelPlacement?
“consider” | “generic” | “ignore”
preferParallelRoutes?
boolean
stopDuration?
number
treeSubstructureOrientation?
“top-to-bottom” | “bottom-to-top” | “left-to-right” | “right-to-left” | “auto-detect”
treeSubstructureSize?
number
treeSubstructureStyle?
“none” | “default” | “integrated” | “compact” | “aspect-ratio”
uniformPortAssignment?
boolean

OrthogonalLayoutDataProvider<TNodeData, TEdgeData>

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

For more information, see OrthogonalLayoutData.

NameDescriptionType
edgeDirectedness?
Provides 0, 1, or -1 for each edge to indicate if it is undirected, in layout direction, or against layout direction.
(edge: TEdgeData) => number
edgeLabelPreferredPlacements?
Provides descriptors for the placement of edge labels.
(label: LabelData) => EdgeLabelPreferredPlacement
groupNodePadding?
Provides the paddings for the group nodes, i.e., a rectangular area like padding in the interior of the node.
(node: TNodeData) => Insets
nodeMargins?
Provides margins for nodes, i.e., a rectangular area around a specific node considered during the layout.
(node: TNodeData) => NodeMargins
nodeTypes?
Provides types which can influence the ordering of nodes during layout.
(node: TNodeData) => any
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