How the graph is laid out

Tree positions nodes on the canvas automatically using a layered graph layout algorithm. Horizontal axis is dependency depth, vertical axis groups related nodes.

Tree positions nodes on the canvas automatically using a layered graph layout algorithm. The algorithm runs whenever the graph's structure changes, repositioning nodes to maintain visual clarity as the project evolves.

The three layout rules

The layout follows three rules.

  • Horizontal position reflects dependency depth. Nodes with no prerequisites sit at the left edge of the canvas. Their direct dependents sit one column to the right. The columns extend rightward, with each column representing one tier of dependency depth. This produces a left-to-right flow that mirrors how work progresses through the project.
  • Vertical position groups related nodes. Branches that share prerequisites are clustered vertically near their parents. Independent branches are separated to reduce visual overlap. The algorithm prefers compact clusters over wide ones, packing related nodes together while keeping unrelated work visually distinct.
  • Edges are routed to minimize crossings. Connections between nodes follow paths that avoid intersecting other edges when possible. When crossings are unavoidable (in dense graphs with many cross-branch dependencies), the algorithm chooses routes that minimize total crossings rather than eliminating them entirely.

How recomputation works

The layout recomputes when the graph changes. Adding a node, removing a node, or modifying an edge triggers a partial recomputation: only the affected region of the canvas re-layouts, not the entire graph. This keeps the rest of the user's view stable while accommodating structural changes.

Manual overrides

Users can manually reposition nodes if they want, overriding the automatic layout for specific nodes. Manual positions persist until the user resets them or the structural change makes them invalid.

Why a layered layout

The algorithm isn't the only possible layout. Radial layouts, force-directed layouts, and timeline-based layouts all have their uses. Tree's choice of layered layout reflects the assumption that project work flows from prerequisites to outcomes, and a left-to-right reading order matches that intuition.

LAST UPDATED · 2026-05-11