Free online tool

Shortest Path Teaching Tool

Find the shortest route through a network. Compare the fewest steps with the lowest cost and see how the route is chosen.

Works on your deviceNo account neededGraph JSON / SVG / PNG / CSVOpen workspace ↓

Why can the fewest-hop route differ from the cheapest route?

A direct connection can cost more than several short steps. Choose start and destination nodes to compare Dijkstra’s lowest-cost path with the fewest-hop path. Block unavailable locations, inspect the selected route and settled distances, and export the route with your graph.

Make the connections.

On your device

Diagram title

Import graph JSON

Use directed: true or false, a nodes array with unique IDs, and edges with source and target IDs.

{
  "directed": false,
  "nodes": [
    {
      "id": "A",
      "label": "Village",
      "tags": [
        "home"
      ],
      "notes": "Starting point",
      "x": 140,
      "y": 200
    },
    {
      "id": "B",
      "label": "Forest",
      "tags": [
        "outdoors"
      ],
      "x": 380,
      "y": 90
    },
    {
      "id": "C",
      "label": "Bridge",
      "x": 380,
      "y": 310
    },
    {
      "id": "D",
      "label": "Castle",
      "x": 660,
      "y": 200
    },
    {
      "id": "E",
      "label": "Harbour",
      "x": 900,
      "y": 310
    }
  ],
  "edges": [
    {
      "id": "ab",
      "source": "A",
      "target": "B",
      "weight": 2
    },
    {
      "id": "ac",
      "source": "A",
      "target": "C",
      "weight": 6
    },
    {
      "id": "bc",
      "source": "B",
      "target": "C",
      "weight": 1
    },
    {
      "id": "bd",
      "source": "B",
      "target": "D",
      "weight": 7
    },
    {
      "id": "cd",
      "source": "C",
      "target": "D",
      "weight": 2
    },
    {
      "id": "de",
      "source": "D",
      "target": "E",
      "weight": 3
    }
  ]
}

Layout algorithmFlow directionNode spacing

Directed connectionsShow edge weights5 nodes · 6 connections

Edit nodes & connections ↓

Drag a node to move it. Drag blank space to pan.

Keyboard: focus a node and use arrow keys to move it; hold Shift for larger steps. Labels and notes are available in the editor below.

Find a route

Starting nodeDestination node

Blocked locations (select multiple)

Hold Command or Control to choose several blocked locations. Start and destination must remain available.

Nodes & notes

Search nodes, notes or tagsChoose node (5 matches)

Deleting a node also deletes its connections. Undo restores both. Keep at least one node.

Connections

Three simple steps

How to use Shortest Path Teaching Tool

Open a graph project or edit nodes and connections in the workspace.
Explore the graph and choose the relevant analysis or layout controls.
Export the diagram, data tables or an editable project.

Common questions

Good to know

Understand the result.
Keep the original.

Is this tool free, and are my files uploaded?

This tool is free with no account required. The work happens in your browser. Your input and files are not sent to a processing server.

What are the limits and details?

This uses your authored graph and nonnegative edge costs. Directed edges are one-way, and blocked nodes cannot be traversed. The route planner is for graph exercises and game maps; it does not provide real-world street navigation or live travel conditions.

Limits: 500 nodes, 2,000 edges and 500,000 project characters. Expensive operations run in a cancellable 30-second browser worker.

Why can the fewest-hop route differ from the cheapest route?

Make the connections.

Find a route

Nodes & notes

Connections

How to use Shortest Path Teaching Tool

Good to know

Related free tools

Graphviz DOT Playground

Dependency Map Builder

Decision Tree Builder