Data View: Graph Canvas

Every Data View uses a force-directed graph canvas where model entities appear as interactive nodes and relationships appear as labelled edges. The graph canvas is shared across persistence and search mode views - the view mode determines what the Entity Overlay shows when you click a node, not how the graph itself renders.

Force-Directed Layout

Nodes are positioned by a D3 force simulation that balances several forces: charge repulsion pushes nodes apart, link forces pull connected nodes together, and centre gravity prevents the graph from drifting. The simulation runs when the view first loads, then settles into a stable arrangement.

Node Spacing Slider

The spacing slider in the bottom-right corner of the canvas adjusts how spread out the graph is. Moving the slider changes the D3 charge force strength in real time - nodes flow smoothly to new positions without rebuilding the graph. The spacing value (1-10 scale) is saved with the view and honoured in the published viewer.

Node Pinning

Drag any node and release it to pin it in place. Pinned nodes are exempt from the force simulation - they stay where you put them while unpinned nodes flow around them. This lets you create stable reference points in the layout while allowing the simulation to optimise the rest.

Node Search

Press Ctrl+F (or Cmd+F) to open the search bar. Search uses fuzzy matching with ranked results.

The camera pans to the current search result as you type. Press Enter to cycle through results, Shift+Enter to go backwards. Press Alt+Enter to open the Entity Overlay for the highlighted result. All matching nodes are highlighted on the canvas with a visual indicator, and the search shows the current match index and total (e.g., "1/5").

Semantic Zoom

The graph canvas adjusts its level of detail based on the current zoom level, keeping the visualisation readable at every scale.

Groups and Hulls

If the central model defines groups (representing subdomains, bounded contexts, or logical clusters), Data Views render them as semi-transparent convex hulls around the member nodes. Group hulls provide visual organisation at every zoom level - they become the primary visual element when zoomed out.

Minimap

Toggle the minimap using the control button in the top-right toolbar. The minimap shows a 150x100px overview of the entire graph with all nodes rendered as scaled dots. A viewport rectangle shows the current visible area. Click or drag within the minimap to pan the canvas. Nodes not matching a search query appear faded in the minimap.

Style Overrides

Each node supports optional style overrides that change its visual appearance without modifying the model. Overrides are scoped to the individual view.

Canvas Navigation