Graph Playground

Create and Experiment with Graphs

How to Use the Playground

1
Add Nodes

Type a name and click Add Node, or click empty space to place auto-named nodes.

2
Link Edges

Select source/target nodes and click Add Edge, or toggle Edge Mode to click-connect nodes.

3
Style Graph

Click any node or edge to edit its color, shape, size, border width, styles, and arrow directions.

1
Choose Start/End

Enter start and end node IDs in the Start/End inputs under the Algorithms panel.

2
Run Search

Click BFS, DFS, or Dijkstra to compute and highlight the shortest path.

3
Toggle Views

Switch between Editor and Force-Directed views; use layout dropdowns to organize nodes.

1
Save & Load

Store graphs securely to your profile or load saved sessions from the Save & Export panel.

2
Export Images

Select PNG or JPG, and click Export to download high-resolution canvas snapshots.

3
Reset Styles

Click Reset All Settings to restore node/edge properties back to their basic default states.

CONTROLS
Node Settings
Node Styles
Edge Settings
Edge Properties
Edge Styles
Format Rules:
  • a-b = undirected edge between a and b
  • b-(5)>c = weighted directed edge from b to c with weight 5
  • c>d = directed edge from c to d
  • d-(3)-a = weighted undirected edge between d and a with weight 3
  • a<b = directed edge from b to a
  • a<(1)-b = weighted directed edge from b to a with weight 1
Use Ctrl + ← → ↑ ↓ keys to move between cells
Matrix Format:
  • 0 = no edge, 1 = edge exists
  • Numbers > 1 = weighted edges
  • Matrix must be square (n×n)
  • Diagonal values are ignored