Graph Visualizer

The Graph Visualizer is a free, browser-based tool that lets you build directed or undirected graphs on an interactive canvas and watch classic graph algorithms run step by step. Whether you are a computer science student learning about traversals, a developer debugging dependency graphs, or an educator preparing a lecture, this tool provides an intuitive way to experiment with graph structures and algorithms in real time.

You can add nodes by clicking the canvas, draw edges by selecting source and target nodes, and toggle between directed and undirected modes. Edges can be weighted — simply click an edge label to change its weight. A force-directed layout engine repositions nodes automatically to reduce visual clutter, and you can always drag nodes manually for fine-tuning.

The tool supports four classic algorithms with animated, step-by-step playback: Breadth-First Search (BFS), Depth-First Search (DFS), Dijkstra’s shortest-path algorithm, and Topological Sort for directed acyclic graphs. Each step shows the current node, visited set, queue or stack contents, and distance labels (for Dijkstra), making it easy to trace the algorithm’s progress.

A properties panel displays real-time graph statistics: node and edge counts, connectivity status, cycle detection, and bipartiteness. You can also toggle an adjacency matrix or adjacency list view to see the underlying data representation — useful when studying how different representations affect algorithm performance.

All processing runs entirely in your browser. No data is sent to any server, stored, or logged. You can safely visualize private network topologies or proprietary dependency structures. Import and export graphs as simple text for sharing or archiving.

If you work with tree structures, try the Binary Tree Visualizer. For diagram generation from text, check out the Mermaid Editor. To explore sorting algorithms visually, see the Sorting Visualizer.

1. Add nodes — Click anywhere on the canvas to place a new node.
2. Add edges — Select a node, click the Add Edge button, then click the target node.
3. Set edge weights — Enable the Weighted checkbox, then click the weight label on any edge to change its value.
4. Choose graph type — Toggle between Directed and Undirected in the dropdown.
5. Run an algorithm — Select BFS, DFS, Dijkstra, or Topological Sort and click Run. Use Play, Pause, and Step to control the animation.
6. Adjust speed — Drag the Speed slider to speed up or slow down the animation (100ms–2000ms per step).
7. View representations — Click Adjacency Matrix or Adjacency List to see the graph data structure.
8. Import/Export — Click Export to copy the graph as text, or Import to paste a previously exported graph.