To animate graph traversal, draw the graph as nodes and edges, then highlight nodes in the order each algorithm visits them. Breadth-first search (BFS) spreads outward in rings from the start node; depth-first search (DFS) plunges down one path before backtracking. Side by side, the two animations make the difference unforgettable. Build it in Manim or generate it from a prompt with QuantumSketch.

The difference, visually

BFS and DFS visit the same nodes but in opposite shapes. BFS uses a queue and explores all neighbors before going deeper, so the highlight expands like ripples on water. DFS uses a stack (or recursion) and follows one branch to its end before backing up, so the highlight snakes down and around. You can describe this in words, but the animation is what makes it stick.

Draw the graph

Place nodes and connect them with edges in Manim:

from manim import *

class GraphTraversal(Scene):
    def construct(self):
        g = Graph(
            vertices=[1, 2, 3, 4, 5, 6],
            edges=[(1, 2), (1, 3), (2, 4), (2, 5), (3, 6)],
            layout="tree", root_vertex=1,
            labels=True,
        )
        self.play(Create(g))

Manim's built-in Graph mobject handles layout and labels, so you focus on the traversal, not the drawing.

Animate BFS

Walk the nodes in breadth-first order and flash each as it's visited:

        bfs_order = [1, 2, 3, 4, 5, 6]
        for v in bfs_order:
            self.play(g[v].animate.set_color(YELLOW), run_time=0.5)
        self.wait()

Because BFS visits node 1, then its children 2 and 3, then their children, the color spreads level by level — the visual signature of "explore nearest first."

Animate DFS

Swap in depth-first order to contrast the shape:

        dfs_order = [1, 2, 4, 5, 3, 6]
        for v in dfs_order:
            self.play(g[v].animate.set_color(GREEN), run_time=0.5)

DFS dives 1 → 2 → 4, hits a dead end, backtracks to 5, then returns up to take 3 → 6. The highlight follows one thread deep before retreating — exactly how the call stack behaves.

Make the data structure visible

The deepest insight comes from showing the queue (BFS) or stack (DFS) beside the graph. As each node is enqueued/pushed and dequeued/popped, viewers connect the abstract data structure to the concrete traversal order. That linkage — structure drives shape — is the real lesson and the thing static textbook diagrams can't convey.

Generate it from a prompt

Hand-coding traversals in Manim is a great way to learn the patterns; producing a polished, narrated comparison is faster with QuantumSketch, which scripts and renders the animation from a prompt like "compare BFS and DFS on a small tree." The Manim techniques are open in manim-coding-skill.

Frequently Asked Questions

How do you animate BFS and DFS? Draw the graph, then highlight nodes in each algorithm's visit order — BFS level by level from the start, DFS down one branch before backtracking.

What's the visual difference between BFS and DFS? BFS spreads outward in rings (queue-based, nearest first); DFS snakes deep down one path then backtracks (stack-based).

Why animate the queue or stack too? Showing the data structure update alongside the graph reveals why the order happens — the structure determines the traversal shape.

Can I make this without coding? Yes — QuantumSketch generates a narrated BFS/DFS animation from a text prompt.

---

Written by Shihab Shahriar Antor — AI Engineer & Founder of Shahriar Labs. Generate algorithm animations from a prompt with QuantumSketch; Manim patterns in manim-coding-skill. Also building freelm.