Graph Traversal Visualizer

What this shows

Breadth-First Search and Depth-First Search running step by step on the same randomly generated, guaranteed-connected graph — with the queue (BFS) or call stack (DFS) visible at every step, not just the final visit order. Pick any node as the start and watch how the same graph gets explored in a completely different order depending on which structure drives the traversal.

The white/gray/black coloring, from CLRS

Node coloring here follows the classic scheme from Introduction to Algorithms (Cormen, Leiserson, Rivest, Stein): every node starts undiscovered (white). The moment it's added to the queue or call stack it becomes discovered (gray, shown here in amber) — found, but its own neighbors haven't been checked yet. Once every neighbor has been examined, it becomes finished (black, shown here in emerald). The node with a blue ring is the one actively being expanded right now.

Why BFS and DFS visit nodes in a different order

Both algorithms are the same skeleton — pull a node from a structure, check its neighbors, add the undiscovered ones back into the structure, repeat — with one difference: BFS uses a queue (FIFO), so it explores every neighbor of the start node before going any further out, expanding outward in layers. DFS uses a stack (LIFO, here via actual recursive calls), so it commits to one neighbor and follows it as deep as possible before backtracking. Same graph, same starting point, genuinely different paths through it — that difference is the entire reason both algorithms exist rather than just one.

What the edge colors mean

• Amber — the edge currently being examined this step.
• Emerald — a tree edge: the edge that was used to discover a node for the first time. The set of tree edges always ends up with exactly V − 1 edges for a connected graph with V nodes — a spanning tree, regardless of which algorithm found it.
• Gray — every other edge: either not checked yet, or a legitimate edge to a node that was already discovered some other way.

FAQ

Why is the graph always fully connected?

It's generated by building a random spanning tree first (each new node connects to a random earlier one), then adding a handful of extra random edges for cycles — that guarantees every node is reachable from any starting node. A traversal on a disconnected graph would simply leave the other components' nodes undiscovered forever, which is correct behavior for both algorithms — just not what this tool generates by default.

Does DFS here use an explicit stack or real recursion?

Real recursion — each call is a genuine function call, and the "call stack" shown during playback is the actual sequence of nodes currently on the JavaScript call stack, the same idea covered in Recursion vs Iteration Visualizer.

Where does O(V + E) come from?

Every node is discovered once and finished once — that's the V — and every edge gets examined from each of its two endpoints over the life of the traversal, which is a constant amount of work per edge — that's the E. See Algorithm Complexity Explained for more on what these classes mean, and Algorithm Runtime Estimator for what O(V + E) looks like in real time at a given graph size.

Is anything I do here sent anywhere?

No — every traversal runs entirely in your browser. Nothing here is ever sent to a server.