yFiles for HTML Demos Layout Features Hierarchic Layout yFiles Demos

Start here

Layout Features Tutorial

Hierarchic Layout

This demo shows common configuration options for HierarchicLayout .

For example, the demo code sets layout orientation , default (orthogonal) and individual (octilinear) edge routing styles , source and target port constraints ( pink edges ), critical paths ( orange edges ), straightened edges ( blue edges ) and various distances between graph items.

Code Snippet

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

Demos

The Layout Styles demo showcases more configuration options for the hierarchic layout algorithm .

Documentation

The Developer's Guide provides in-depth information about Hierarchic Layout and its features.