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.

Hierachic layout with groups

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.

NameType
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.

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
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) => Insets
nodeMargins?
Provides margin 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
ports?
Provides information about how an edge connects to its nodes.
PortDataProvider =<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