Tree Layout

This demo shows basic configuration options for the Tree Layout .

The global layout orientation is changed to left-to-right to get a horizontal tree layout.
A DefaultNodePlacer is specified as placer for the tree nodes, its distance settings are configured to get a rather wide spacing between elements.
The port assignment is configured such that the edges are distributed at the node border and the segments are forced to keep some distance in this example (via minimumChannelSegmentDistance ). By default, the tree layout groups the edge segments and places the ports in the node center.
Edges from the parent to the child nodes are ordered with respect to the label text of the child nodes by defining an appropriate edge comparer function.

You can copy the code snippet to configure the layout from GitHub .

The Tree Layout Demo shows complex configurations of NodePlacer instances to further customize the node placement.
More features of the tree layout and supported use cases are shown in the Layout Styles Demo .

The Developer's Guide provides more in-depth information about the Tree Layout provided by yFiles.