chevron_right Demos chevron_right Hierarchical Layout with Edge Grouping
Legal Disclosure Privacy Policy
yFiles for HTML chevron_right Demos chevron_right Hierarchical Layout with Edge Grouping
Discover More
Book a live Demo

See yFiles in action

30 min • Online • No install required

For developers, PMs & tech leads

  • Quick-start walkthrough + a real integration example
  • Live Q&A with next-step recommendations

Prefer another tool over Zoom? Just say so when you book.

Pick a time

Opens our scheduling page with Zoom's booking widget embedded. Using it shares your data with Zoom under its Privacy Policy.

See yFiles in action

30 min • Online • No install required

For developers, PMs & tech leads

Prefer another tool over Zoom? Just say so when you book.

Pick a time

Opens our scheduling page with Zoom's booking widget embedded. Using it shares your data with Zoom under its Privacy Policy.

Hierarchical Layout with Edge Grouping

This demo shows how to customize the HierarchicalLayout to group edges at their source or target nodes.

An alternative: automaticEdgeGrouping.

Edge Grouping

The layout is configured such that:

The default hierarchical layout without edge grouping will place each edge individually.

Things to Try

Click the button in the toolbar to toggle between hierarchical layout with and without edge grouping.

Documentation