Tree Layout

The Tree layout algorithm is designed to arrange graphs in a tree fashion. It provides multiple different arrangements of trees and subtrees. Tree layout algorithms are commonly applied to visualize relational data and produce diagrams of high quality that are able to reveal possible hierarchical properties of the graph. More precisely, they find applications in dataflow analysis, software engineering, bioinformatics and business administration.

Compact tree layout

The tree layout algorithm provides extensive customization options through a wide array of properties accessible via the TreeLayoutOptions. Fundamental options include the custom ordering of the edges, the port assignment, the arrangement of the nodes for each subtree., and others. It also automatically places node labels when the corresponding properties are activated.

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

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

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

runLayout({
  name: 'TreeLayout',
  layoutOptions: {
    allowMultiParent: true,
    edgeLabelPlacement: 'integrated',
    layoutOrientation: 'left-to-right'
  },
  layoutData: {
    edgeLabelPreferredPlacements: () => ({
      edgeSize: 'left-of-edge',
      distanceToEdge: 20,
    }),
  }
})

TreeLayoutOptions

The configuration options for the tree layout algorithm that arranges graphs with a tree structure.

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

NameType
allowMultiParent?
boolean
defaultSubtreePlacer?
ISubtreePlacer
edgeLabelPlacement?
“generic” | “ignore” | “integrated”
layoutOrientation?
“top-to-bottom” | “left-to-right” | “right-to-left” | “bottom-to-top”
nodeLabelPlacement?
“consider” | “generic” | “ignore”

TreeLayoutDataProvider<TNodeData, TEdgeData, TLabelData>

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

For more information, see TreeLayoutData.

NameDescriptionType
assistantNodes?
Provides which nodes should be placed separately from their siblings.
(node: TNodeData) => boolean
childOrder?
Provides an order for outgoing edges at the given node in which the edges are arranged.
ChildOrderDataProviderlt;TNodeData,TEdgeData>
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

Playground