How to Use

Graph Editing

  • Add Node: Click "Add Node" to create nodes A-Z. First 4 nodes (A-D) form a linear path from Home to School. After D, nodes connect with 2-3 random edges.
  • Create Link: Click first node (green highlight appears) → Click second node to create directed edge.
  • Remove Link: Click same two nodes again to delete existing edge.
  • Edit Weight: Double-click on any edge, enter new weight (1-999) in popup.
  • Move Node: Click and drag any node to reposition. Physics simulation auto-adjusts connected nodes.
  • Graph Mode: Toggle directed/undirected mode (top-left button). Undirected creates bidirectional edges.

Algorithm Visualization

  • Start Algorithm: Select algorithm (Dijkstra) → Click "Start". Graph editing disabled during visualization.
  • Playback Controls: Use ⏮️ (first), ◀️ (previous), ▶️ (play/pause), ▶️ (next), ⏭️ (last) buttons to control step-by-step execution.
  • Speed Control: Adjust slider (0.25x-4.0x) to change auto-play speed.
  • Step Table: Draggable/resizable window shows algorithm state per iteration. Each row represents one iteration. Columns show (distance, previous) for each node.
  • Path Selector: Choose any destination from dropdown to highlight shortest path from Home in purple.
  • Stop: Click "Stop" button to end visualization and re-enable graph editing.

Understanding Step Table

  • Yellow Cell (★): Chosen node - currently being processed by algorithm.
  • Green Cell: Updated node - distance was improved (edge relaxed) in this step.
  • Yellow Border: Checked node - edge is being evaluated but not improved.
  • Gray Cell (-): Visited node - already processed, no longer in frontier.
  • Blue Row: Current step being displayed.
  • Faded Rows: Previous steps already executed.
  • Cell Format: (distance, previous_node) - e.g., (15, A) means distance 15 via node A.
  • (∞, -): Infinity - node not yet reachable from source.

Visual Indicators

  • Green Ring: Selected node for creating link, or algorithm initialization.
  • Blue Ring: Current node being processed (SELECT step).
  • Yellow Edge: Edge being checked (CHECK step).
  • Green Edge: Edge successfully relaxed (UPDATE step).
  • Purple Path: Highlighted shortest path from Path Selector.
  • Gray Nodes: Visited/processed nodes during algorithm.
  • Dimmed Graph: When path selected, non-path elements dimmed.

Import/Export

  • Export: Generates adjacency matrix. Node order: Home, A-Z alphabetically, School. Click "Copy to Clipboard" to copy.
  • Import: Paste comma-separated adjacency matrix. Must be square (NxN). Auto-detects directed (asymmetric) vs undirected (symmetric) from matrix structure.
  • Format: Rows = source nodes, Columns = target nodes, Values = edge weights (0 = no edge).
  • Reset: Clears all custom nodes, returns to initial Home → School graph.

Tips & Shortcuts

  • Navigation: Mouse wheel to zoom, click-drag canvas to pan, click-drag nodes to move.
  • Toolbar: Click toggle button (⊕/⊖) at top-center to collapse/expand toolbar.
  • Mobile: App auto-zooms on small screens. Touch gestures: pinch to zoom, drag to pan.
  • During Visualization: Graph editing disabled. Path selector and playback controls enabled.
  • Step Table: Drag header to move window. Drag bottom-right corner to resize. Click collapse (−) to minimize.
  • Performance: Keep graph under 50 nodes for smooth physics. Open console (F12) and use Graph.pauseAnimation() to freeze simulation if needed.
Created by IzukiNo • 2025