yFiles for HTML Demos Orthogonal Layout yFiles Demos

Start here

Orthogonal Layout

This demo shows basic configuration options for the OrthogonalLayout algorithm.

It highlights the configuration of various aspects, including:

Decreased grid spacing for a more compact graph
node margins to reserve space around specific node (with the "Insets" label)
Directed edges (orange edges) with top-to-bottom orientation
Tree substructures configured with a compact arrangement style and left-to-right orientation

Demos

Documentation