Getting started

Drop a graph JSON file onto the page (or click the drop zone to browse). The file must contain nodes[] and edges[] arrays. Only root nodes are visible at first.

Navigating the graph

• Click a node to expand or collapse its children. Expanded nodes have a lighter outline.
• Click the background to clear the current selection.
• Scroll to zoom in and out. Click-drag the background to pan.
• Drag a node to reposition it (works in every layout).

Toolbar icons

• Pause/Resume (top-left): freezes or restarts the force simulation. Nodes can still be dragged while paused.
• Sidebar toggle (top-right): hides or shows the control sidebar.
• Help (bottom-left): opens this dialog.

Sidebar controls

• Expand All / Collapse All: expand or collapse every node. Collapse All also clears the selection.
• Labels: toggle node labels on or off.
• Search: type to search by node label or ID. Use arrow keys to navigate results, Enter to select, Escape to clear.
• Node Types: filter the graph by type. Click a colour swatch to customise the colour.
• Edge Types: view relationship counts. Click a colour swatch to customise edge colours.
• Visual Mapping: colour nodes by a numeric or categorical attribute, and size nodes by a numeric attribute. Enable Roll up descendant values to aggregate across sub-trees so ancestors without the raw attribute still get a colour or size.
• Layout: switch between force-directed and discrete layouts (circle, grid, concentric, radial tree, AVSDF circular). Discrete layouts stop the simulation and fit the view.
• Forces: adjust repulsion, link distance, gravity, collision, and clustering. Hidden while a discrete layout is active.

Keyboard shortcuts

Visual cues

• Yellow dashed stroke on a node marks a multi-parent node (part of a DAG diamond).
• Expanded nodes have a light stroke to distinguish them from collapsed nodes.
• Node sizes reflect hierarchy depth (roots are largest) and child count. When a size attribute is active, node area (not radius) is proportional to the attribute value.