Graph Visualizer — Nodes, Edges, BFS & DFS
Build graphs with nodes and edges, switch directed/undirected mode, and run BFS/DFS with step-by-step visited/frontier explanations.
Interactive learning • Step-by-step operations • Visual explanations
Controls
Pick an operation, then execute and step through.
Graph (undirected)
0 nodes • 0 edges
Code-like representation
Connect the visual model to what you’d write in code.
Undirected adjacency list:
Step-by-step explanation
Watch intermediate reasoning, not just the final result.
Choose an operation and click Execute to generate steps.
Teaching notes
Short, beginner-friendly reminders.
Learning mode
A graph models relationships using nodes (vertices) and edges.
BFS explores layer-by-layer; DFS explores depth-first.
Operation history
Track what you tried and what happened.
No operations yet.
Data Structures Visualizers
Explore the family of visualizers.
Processed Locally
Your file never leaves your device. Everything is processed in your browser — we never see or store your data.
Related Tools
Tree Visualizer — Hierarchy, Levels & Traversal
Learn tree concepts (root/parent/child/leaf) and traversals with step-by-step highlights.
Queue Visualizer — Enqueue, Dequeue (FIFO)
Learn queue operations step by step with front/rear labels and FIFO intuition.
Stack Visualizer — Push, Pop, Peek (LIFO)
Learn stack operations step by step with a visual “top” view and underflow handling.