Graph Visualizer is a web application powered by vis.js that allows users to draw graphs and visualize how different graph search algorithms work in real time. Follow this link to try it now.
Loads a graph from a .dot file, supporting only label properties for nodes and edges. Other styling attributes are not currently supported.
Saves the current graph to a .dot file, including only label properties for nodes and edges. Styling attributes are not included in the exported file.
You can switch between four edit modes:
- Move & Drag: Allows you to drag individual nodes or move the entire graph.
- Add Nodes: Click anywhere on the canvas to add a new node.
- Add Edges: Click on a start node, then drag to another node to create an undirected edge.
- Add Directed Edges: Same as "Add Edges", but the edge will have a direction (arrow) from the start node to the end node.
Clicking this will open the Properties sidebar, where you can view and edit the attributes of the selected nodes and edges.
Delete selected nodes and edges.
Delete all elements in the graph.
Adjusts the view to fit the entire graph within the canvas.
Clicking this will open a dialog where you can select options for graph generation, including the graph type and the number of nodes.
Currently, five graph types are supported:
- Fully Connected Graph
- Cycle Graph
- Path Graph
- Binary Tree
- Erdos Renyi Graph
Clicking this will open a dialog that allows for interactive search.
- Select one search algorithm from DFS, BFS and Dijkstra's.
- Click
Start. The same graph will be display in the canvas. - Select a start node in the graph.
- Continue clicking
Nextuntil the entire search process is complete. You can clickStartagain to restart the search.
Clicking this will open a dialog for interactively generating a Minimum/Maximum Spanning Tree (MST).
- Select one algorithm from Greedy and Kruskal's.
- Click
Start. The same graph will be display in the canvas. - Continue clicking
Nextuntil the whole process is complete. You can clickStartagain to restart.