Hierarchic Layout
The hierarchic layout algorithm arranges graphs in a hierarchic fashion. It aims to highlight the main direction or flow within a directed graph. The nodes of a graph are placed in hierarchically arranged layers such that the (majority of) edges of the graph show the same overall orientation, for example, top-to-bottom. Additionally, the ordering of the nodes within each layer is chosen in such a way that the number of edge crossings is small.

The hierarchical layout algorithm offers extensive customization options through a wide array of properties accessible
via HierarchicalLayoutOptions
. Fundamental options include layout orientation, orthogonal edge routing, layer distance, and others.
Moreover, the hierarchic layout supports grouped graphs. 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 HierarchicalLayoutDataProvider
.
Feel free to play around with the hierarchic layout configuration in our online playground.
Extensive documentation detailing all available properties of the hierarchic layout supported by yFiles layouts for React Flow can be found here.
runLayout({
name: 'HierarchicalLayout',
layoutOptions: {
minimumLayerDistance: 60,
edgeLabelPlacement: 'integrated',
nodeLabelPlacement: 'consider'
},
layoutData: {
ports: {
sourcePortCandidates: (edge: EdgeProps) =>
parseInt(edge.target) % 2 === 0 ? ['right'] : ['left']
}
}
})
HierarchicalLayoutOptions
The configuration options for the hierarchic layout algorithm that arranges graphs in a hierarchic fashion.
For more information on the layout algorithm and its available settings, see HierarchicalLayout.
Name | Type |
---|---|
automaticEdgeGrouping? | boolean |
componentArrangementPolicy? | “compact” | “topmost” |
defaultEdgeDescriptor? | HierarchicalLayoutEdgeDescriptor |
defaultNodeDescriptor? | HierarchicalLayoutNodeDescriptor |
edgeDistance? | number |
edgeLabelPlacement? | “generic” | “ignore” | “integrated” |
fromScratchLayeringStrategy? | “hierarchical-topmost” | “hierarchical-optimal” | “hierarchical-tight-tree” | “hierarchical-downshift” | “bfs” | “from-sketch” | “user-defined” | “unknown” |
fromSketchMode? | boolean |
gridSpacing? | number |
groupAlignmentPolicy? | “top” | “center” | “bottom” |
groupLayeringPolicy? | “ignore-groups” | “recursive” | “recursive-compact” |
layoutOrientation? | “top-to-bottom” | “left-to-right” | “right-to-left” | “bottom-to-top” |
minimumLayerDistance? | number |
nodeDistance? | number |
nodeLabelPlacement? | “consider” | “generic” | “ignore” |
nodeToEdgeDistance? | number |
stopDuration? | number |
HierarchicalLayoutDataProvider<TNodeData, TEdgeData>
A provider for individual options per nodes or edges in a HierarchicalLayout. It allows for defining a function that provides values for each element.
For more information, see HierarchicalLayoutData.
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: |
edgeThickness? | Provides a numerical value that represents the thickness of an edge. | (edge: TEdgeData) => number |
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 margin 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 |
ports? | Provides information about how an edge connects to its nodes. |
|
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