Visualize Graphs Online
Graphs are the most versatile data structure in computer science. They model everything from road networks and social media connections to internet routing and artificial intelligence decision trees. However, when solving complex algorithms in competitive programming (like Codeforces, LeetCode, or ICPC), raw text inputs can be impossible to trace mentally. The Black Claaw Tools Graph Visualizer instantly translates raw edge lists, matrices, and parent arrays into interactive, visual maps, accelerating your debugging and learning process.
What Is a Graph in Computer Science?
A graph is a non-linear data structure consisting of nodes and edges. The nodes are sometimes also referred to as vertices and the edges are lines or arcs that connect any two nodes in the graph.
Graph Terminology
- Nodes (Vertices): The fundamental units of a graph. Think of them as cities on a map.
- Edges: The connections between nodes. Think of them as the roads connecting the cities.
- Paths: A sequence of edges that allows you to go from node A to node B.
- Cycles: A path that starts and ends at the exact same node without traversing any edge twice.
- Components: A subgraph in which any two vertices are connected to each other by paths, and which is connected to no additional vertices in the supergraph.
Directed vs Undirected Graphs
In an undirected graph, edges have no direction. The road between City A and City B goes both ways. If node 1 connects to node 2, you can traverse from 1 to 2, and 2 to 1.
In a directed graph (Digraph), edges have a specific direction, represented by arrows. It is a one-way street. If an edge goes from node 1 to node 2, you cannot use that same edge to go from 2 back to 1.
Advertisement
Supported Graph Input Formats
Edge Lists
The most common input in competitive programming. Each line contains two integers representing an edge between those two nodes. Optionally, a third integer represents the weight (distance/cost) of that edge.
Adjacency Matrices
A 2D array of size V x V where V is the number of vertices. A value of 1 (or the weight) at row i and column j indicates an edge from node i to node j. A value of 0 indicates no edge.
Adjacency Lists
Each node is followed by a list of all the nodes directly connected (adjacent) to it. Instead of listing every edge separately, the graph is represented by storing the neighbors of each vertex.
1: 2 4
2: 1 3 5
3: 2
4: 1
5: 2
This means Node 1 is connected to 2 and 4, Node 2 is connected to 1, 3, and 5, and so on. The corresponding graph forms a tree structure.
Why is it used? It stores only existing edges, making it very memory efficient for sparse graphs. It allows you to quickly iterate over all neighbors of a node. It is the most common graph representation used in competitive programming after converting the input.
Time and Space Complexity:
- Space: O(V + E)
- Iterating over all neighbors of a node: O(degree of the node)
- Checking whether an edge exists: O(degree of the node) (unless additional data structures are used)
In competitive programming, even if the input is given as an edge list, you will usually build an adjacency list first because it is the preferred representation for algorithms like DFS, BFS, Dijkstra, and Topological Sort.
Entity-to-Items List
A compact adjacency list variant common in problems involving relationships or preferences. The first line gives n (the number of nodes). Then each subsequent line describes one node: the first number is k (how many neighbors follow), then k neighbor IDs.
3
2 1 3
1 2
2 2 3
This means: Node 1 → {1, 3}, Node 2 → {2}, Node 3 → {2, 3}. Each line describes a single node's neighbor list using a leading count, so no colon separator is needed.
How to recognize it: Look for wording like “for each vertex, the input contains the list of adjacent vertices”, “for each person, the input lists the people they know”, or “for each city, the input lists the roads leaving it”. A line that starts with a count k followed by exactly k node IDs is the signature pattern.
Notes: The graph is already in adjacency list form — no edge-list conversion is needed. It can be directed (outgoing edges only) or bipartite (e.g., daughters ↔ kingdoms). Time and space complexity is identical to a standard adjacency list: O(V + E).
Parent Arrays
Commonly used to represent trees. An array where the value at index i represents the parent node of node i. Often used in Union-Find implementations.
Graph Algorithms Explained
DFS (Depth-First Search): Explores as far as possible along each branch before backtracking. Great for finding connected components, detecting cycles, and topological sorting.
BFS (Breadth-First Search): Explores the neighbor nodes first, before moving to the next level neighbors. Perfect for finding the shortest path in unweighted graphs.
Dijkstra's Algorithm: Finds the shortest paths between nodes in a graph with non-negative edge weights.
Advertisement
Final Thoughts
Our visualizer uses robust heuristics to guess your input format so you don't have to manually select it. By processing everything locally in your browser via Javascript, we ensure that your competitive programming solutions and proprietary network data remain completely private.