Graph Visualizer & Editor

An edge list is the least readable format for a graph and the only one problems are ever stated in. Paste one into the Graph Visualizer and it lays the vertices out with a force simulation, so a tree looks like a tree and a cycle is visible as a cycle rather than as a row of number pairs.

Layout works by physics rather than by hierarchy. Every edge is a spring with a natural length, every pair of nodes repels, and a gentle pull toward the centre keeps the drawing off the edges of the box, so a 7-node tree settles into shape on its own in about 3 seconds. Drag a node and its neighbours follow on their springs; let go and it rejoins the layout. Click a node to pin it where it stands, double-click to release it. Editing the edge list keeps every node where it was and grows new ones beside their neighbours.

Three property badges light up as the structure warrants: Tree, Has Cycle and Disconnected, alongside a connectivity badge that reads weakly connected on a directed graph. Cycles are found by a depth-first search colouring nodes white, grey and black, which is the standard way to distinguish a back edge from a forward one.

Getting a Graph Onto the Canvas

1. The editor starts on a 7-node tree written as 6 lines of 0 1 style pairs. Load Sample Tree moves to the next stored edge list, and you can paste your own with one edge per line.
2. Add a third number for a weight, so 0 1 5 is an edge of weight 5. Mixing weighted and unweighted lines is fine, and the label only renders where a weight exists.
3. Tick Directed if the edges are ordered. Arrowheads appear and the cycle test switches to the directed definition, where a pair of opposite edges is a cycle and an undirected repeat is not.
4. Tick 1-indexed when your problem numbers vertices from 1, which relabels without renumbering your input.
5. Click a node to pin it, then drag the others around it for a screenshot. A pinned node stays put even when dragged to a new spot; double-click it to let it go again.

Edge Cases the Property Badges Catch

• Tree requires all 4 conditions at once: undirected, acyclic, connected, and exactly V minus 1 edges. Any one of them failing turns the badge off, which makes it a genuine check rather than an edge count.
• Has Cycle uses a 3-colour depth-first search. A grey node reached a second time is a back edge and therefore a cycle; a black one has already finished and is not.
• Disconnected counts components. On a directed graph connectivity is reported as weak, meaning the underlying undirected graph is connected, which is the cheaper and more commonly wanted test.
• A self-loop is a cycle of length 1 and registers as one. A repeated edge between the same pair counts twice towards E, so it breaks the tree test even when the drawing looks like a tree.
• An isolated vertex only exists if some line mentions it. An edge list cannot express a vertex with no edges, so the vertex count comes from what appears in the input.