How to Use the Playground
Creating Graphs
- Click "Add Node" for auto-generated name, or enter a custom name first
- Click any node to select and edit/rename it
- Delete selected nodes with the "Delete Node" button
- Edge Mode ON: Click source node, then target node to create edge
- Manual Edge: Enter source/target names and click "Add Edge"
- Click any edge to select and edit its properties
- Add optional Weight, Label, and Direction to edges
- Check "Directed" to show arrows on edges
- Delete selected edges with "Delete Edge" button
Algorithms & Visualization
- Enter a start node name for BFS or DFS
- For Dijkstra, enter both start and end nodes
- Use Reset Highlighting to clear algorithm visualizations
- Change graph layouts using the dropdown menu (cose, circle, grid, breadthfirst)
- Toggle between Cytoscape (editor) and Force-Directed views
- In Force-Directed view, adjust physics with sliders
- Show/hide node labels, edge labels, and arrows independently
- Click "Center View" to reset camera position for Force-Directed View
Managing Graphs
- Save: Store your graph with name, description, and tags
- Load: Access previously saved graphs from your collection
- Import: Upload graphs in JSON format
- Export: Download your graph as JSON file
- Selection indicator shows currently selected node/edge
- Click "X" in selection indicator or press Escape to deselect
- All changes are preserved when switching between views
- Use keyboard shortcuts for quick actions
Graph Elements
Edge Properties