JavaScript is required

Tree Layout and Line Options

This example turns a fixed tree dataset into a live tuning playground for relation-graph. Users can change tree direction and spacing, batch-restyle existing lines, switch canvas interaction modes, and export the current view as an image without rebuilding the data.

Edit on GraphPilot

Tune a Tree Graph with Live Layout and Line Controls

What This Example Builds

This example builds a full-height tree-layout playground around one prepared hierarchy. The canvas shows a compact monochrome blue tree with boxed line labels, a built-in toolbar at the bottom center, and a floating white control window above the graph.

Users can switch the tree orientation, change horizontal and vertical spacing, restyle every rendered line, move line-label offsets, change wheel and drag behav