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
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();}Force
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
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
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
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
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();Grid
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
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();