An interactive educational tool for visualizing graph algorithms step-by-step.
Project under active development. Contributions are welcome. Open an issue with suggestions or bugs!
G-Visualizer allows students to see every step of a graph algorithm happening on the canvas, with data structures and pseudocode always in sync.
The core approach is per-step immutable state: every state transition is a pure function, enabling forward and backward navigation through execution like a visual debugger.
- Step-by-step execution with navigable history
- Real-time data structures (queue/stack, visited nodes, visit order)
- Pseudocode with active line highlighting
- Integrated graph editor
- Connectivity analysis: connected components, bridges, and articulation points
- Mathematical representations: Adjacency List, Adjacency Matrix, and Incidence Matrix
- Light and dark modes with local persistence
| Algorithm | File |
|---|---|
| Breadth-First Search (BFS) | src/algorithms/BFS.js |
| Depth-First Search (DFS) | src/algorithms/DFS.js |
| Direct Transitive Closure (FTD) | src/algorithms/FT.js |
| Indirect Transitive Closure (FTI) | src/algorithms/FT.js |
| Topological Sort (TOPO) | src/algorithms/TopologicalSort.js |
| Connectivity (SCC / Bridges / APs) | src/algorithms/connectivity.js |
→ Full algorithm documentation
Prerequisites: Node.js 18+ and npm 9+
git clone https://github.com/matheusmra/G-Visualizer.git
cd G-Visualizer
npm install
npm run devOpen http://localhost:5173.
Build for production:
npm run build
npm run preview| Document | Content |
|---|---|
| docs/algorithms.md | Detailed description of BFS, DFS, FTD, FTI, and Connectivity; state structure guides |
| docs/architecture.md | Project structure, execution flow, canvas classes, routes, and theme system |
| docs/panels.md | The four visualizer panels: Structures, Pseudocode, Connectivity, and Representations |
| docs/contributing.md | How to add algorithms, presets, and contribute to the project |
| docs/technical-debt.md | Project roadmap and known issues |
| Technology | Version | Usage |
|---|---|---|
| React | 19 | Interface and state management |
| Vite | 5 | Build and development server |
| TailwindCSS | 4 | Styling |
| Cytoscape.js | 3 | Canvas and graph rendering |
| React Router | 7 | Page routing |
- Issues: GitHub Issues
- GitHub: @matheusmra
If this project was useful, leave a star on the repository!