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.

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.
Name | Type |
---|---|
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.
Name | Description | Type |
---|---|---|
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: |
groupNodePadding? | Provides the paddings for the group nodes, i.e., a rectangular area like padding in the interior of the node. | (node: TNodeData) => |
nodeMargins? | Provides margins for nodes, i.e., a rectangular area around a specific node considered during the layout. | (node: TNodeData) => |
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