Layout and Positioning

Graph diagrams use D3.js force-directed layouts that automatically position nodes based on their connections. Two layout modes that let you balance automatic arrangement with manual control: Exploration mode for dynamic layouts and Design mode for precise positioning.

Layout Modes

The graph editor has two layout modes, toggled with the Space key or the mode button in the toolbar.

Exploration Mode

Exploration mode keeps the force simulation active. Nodes continuously adjust positions based on:

Design Mode

Design mode stops the force simulation entirely. Nodes stay exactly where you place them with no automatic adjustment. Use Design mode when:

Node Pinning

Pinned nodes have fixed positions that the force simulation respects. Other nodes flow around pinned nodes, making pinning useful for anchoring key elements while letting the rest of the graph organise naturally.

Pinning Methods

Unpinning

Node Spacing

The spacing slider controls how far apart nodes spread in the force simulation. The slider uses a 1-10 scale where higher values increase the repulsion force between nodes.

Adjust spacing when:

Force Presets by Mode

Each authoring mode uses different force simulation settings:

Workflow Tips

Position Persistence

Node positions are saved in the diagram file. When you reopen a diagram:

Next Steps