Layout examples
A layout positions your nodes. Call one through nodus.layouts.<name>(options), pass a duration to animate the transition, then await nodus.view.locateGraph() to fit everything in view. See the layouts concept and the layouts API for every option.
Every demo runs live in your browser — drag, zoom and use the controls.
Compare all layouts
Section titled “Compare all layouts”The same tree-shaped graph, re-arranged by each layout at the click of a button. Note that radial and concentric need a centralNode to organise around.
async function apply(name) { const opts = { duration: 500 }; if (name === 'radial' || name === 'concentric') opts.centralNode = root; await nodus.layouts[name](opts); await nodus.view.locateGraph();}The force-directed layout treats nodes as repelling charges and pulls connected ones together, settling into organic clusters.
await nodus.layouts.force({ duration: 600 });await nodus.view.locateGraph();Force-link
Section titled “Force-link”Force-link treats edges as springs, giving evenly spaced, link-driven placement that tends to spread the graph out more uniformly.
await nodus.layouts.forceLink({ duration: 600 });await nodus.view.locateGraph();Hierarchical
Section titled “Hierarchical”The hierarchical layout arranges a tree in layers. Set direction to one of 'TB', 'BT', 'LR' or 'RL' to flow the tree top-to-bottom, bottom-to-top, left-to-right or right-to-left.
await nodus.layouts.hierarchical({ duration: 500, direction: 'TB' }); // 'TB' | 'BT' | 'LR' | 'RL'await nodus.view.locateGraph();Radial
Section titled “Radial”The radial layout places a node at the centre and arranges the tree on rings around it. It requires a centralNode (a node id).
await nodus.layouts.radial({ duration: 600, centralNode: ROOT_ID });await nodus.view.locateGraph();Concentric
Section titled “Concentric”The concentric layout puts the central node in the middle and places the rest on concentric circles by graph distance. Like radial, it requires a centralNode.
await nodus.layouts.concentric({ duration: 600, centralNode: ROOT_ID });await nodus.view.locateGraph();The grid layout snaps every node onto a regular grid — a tidy, deterministic arrangement regardless of structure.
await nodus.layouts.grid({ duration: 600 });await nodus.view.locateGraph();Sequential
Section titled “Sequential”The sequential layout lays nodes out in order along a path, following the chain of edges.
await nodus.layouts.sequential({ duration: 600 });await nodus.view.locateGraph();