JavaScript is required

Smart Tree Layout

This example shows how to load one generic relationship dataset into relation-graph's smart-tree layout and switch the mounted graph between horizontal and vertical presets. It also demonstrates the extra runtime step of resizing existing nodes and resetting line shape before relayout, together with a shared viewer shell for mini-view, canvas settings, and image export.

Edit on GraphPilot

Switching a Smart Tree Layout Between Horizontal and Vertical Views

What This Example Builds

This example builds a read-only smart-tree layout playground around one generic relationship dataset. The default view is a left-to-right tree with amber rectangular nodes and curved connectors, and the same mounted graph can be switched into a top-down preset from a selector in the floating window. In top-down mode, the nodes become tall vertical cards and the label text also turns vertical, so