yFiles for HTML Demos Basic Tree Layout yFiles Demos

Start here

Basic Tree Layout

This demo showcases basic configuration options for the TreeLayout algorithm.

It highlights the configuration of various aspects, including:

Layout orientation changed to left-to-right for horizontal flow
Subtree placer configuration for wide spacing between elements
Port assignment configured to distribute edges at node borders
Edge ordering based on child node label text using edge comparers

Demos

Documentation