Nodes, edges, and where they aren't
A graph records relationships, not positions. These dots can sit anywhere on the page; as long as the same pairs stay joined, it is the exact same graph. Connectivity — the topology — is the real content; the layout is just one of infinitely many ways to draw it.
Drag the nodes, or shuffle the whole layout — the network underneath never changes.
Letting the graph arrange itself
Rather than place every node by hand, give the graph physics: edges behave like springs pulling linked nodes together, while every node gently repels every other so they don't pile up. Release it and the tangle relaxes into a balanced, readable shape — then settles to a stop.
This is how node-graph tools auto-arrange. Drag a node and watch it ease back.
The cheapest way across
Give each edge a cost — here, its length — and a classic question follows: what is the least-expensive route between two nodes? Dijkstra's algorithm answers it exactly, fanning out from the start and always extending the cheapest frontier first. It's the engine under wayfinding, circulation planning, and routing.
Drag the green start and orange end onto any nodes; the best path re-solves instantly.
Connecting everything, cheaply
A different goal: link every node together using the least total length. That backbone is the minimum spanning tree — the shape behind efficient road, pipe, and cable layouts. Notice it never wastes a loop: exactly enough edges to hold everything in one piece.
Drag the points, tap empty space to add one, tap a point to remove it — the tree re-solves live.
The network studio
Now build one. Tap empty space to drop a node; in Build mode tap one node then another to link or unlink them; switch to Path mode and tap two nodes to trace the shortest route between them. Turn on the physics to auto-arrange, reveal the spanning-tree backbone, colour the separate components, or size each node by how many links it has to find the hubs. Every idea from this chapter, in one canvas.