Pathfinding visualizer
Replay BFS, DFS, Dijkstra and A* (Manhattan or Euclidean heuristic) on a grid: draw walls and drag the start or goal right on the canvas, then compare visited cells with the final path.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Grid and algorithm
All four algorithms run as pure functions in pathfinding-visualizer.ts and return the visit order plus the final path; the page only replays them. Neighbour order is fixed to up, right, down, left.
Visualisation
Reachable143115Time O(number of cells), space O(number of cells); A* depends on how good the heuristic is.
What this tool does
- Teach search algorithms by handing the same map to BFS, DFS, Dijkstra and A* in turn: you can see at a glance who floods the grid and who drives straight for the goal, with the visited-cell counts side by side.
- Check the claim that "A* is Dijkstra plus a heuristic": both return the same path length, but the number of visited cells differs, and switching the heuristic shows how much a better estimate narrows the search.
- Draw walls and drag the start or goal on the canvas to demonstrate that the straight line is only shortest until something gets in the way — the cost jumps from the Manhattan distance to the real detour.
- Debug pathfinding in a game or robot project: paste the map as # / S / E text, see what a reference implementation costs, then compare with your own result.
Example
Input
The default map (a wall down the middle, start top-left, goal top-right) with BFS
Output
Reachable, 31 visited cells, path of 15 cells / 14 steps
The Manhattan distance between start and goal is only 6, but the wall down the middle forces the path to drop to the bottom row and come back up, so the real cost is 14. On the same map DFS hits the goal after visiting just 15 cells and also costs 14 — but DFS guarantees no shortest path, so another map may take a long detour.
Frequently asked questions
Is A* always faster than BFS?
With an admissible heuristic (one that never overestimates the remaining cost) the set of nodes A* expands is a subset of what BFS visits, so it never visits more cells — both the Manhattan and Euclidean heuristics here qualify. "Never more" is not "always fewer" though: the gap is largest on open grids with the goal roughly in line with the start, while a map that forces a big detour can make both flood the same region.
Is the DFS path the shortest one?
No. DFS follows one branch until it dead-ends, then backtracks, and returns as soon as it touches the goal, so the length depends on the neighbour order. This tool fixes that order to up, right, down, left, which makes results reproducible, but the path is only guaranteed to be continuous, not minimal. Use BFS, Dijkstra or A* for shortest paths.
Manhattan or Euclidean heuristic?
On a 4-connected grid (up, down, left, right only) the Manhattan distance tracks the true cost much more closely, so A* expands fewer nodes; the Euclidean distance underestimates more in the same situation and usually widens the search. If diagonal moves were allowed you would want the octile distance instead.
How do I draw walls and move the start or goal?
Hold the left mouse button and drag on the canvas to draw walls; pressing on an existing wall erases instead. Switch the "left click action" control to "Move the start" or "Move the goal" and click any empty cell to relocate S or E. Both edits are written back into the text box above, so you can mix typing and drawing freely.
How big can the map be?
Up to 60 × 60 cells. The map is plain text where # is a wall, S the start, E the goal and . is empty; every row must have the same length and there must be exactly one S and one E. The search itself is O(number of cells) — the practical limit is the cell size on the canvas and the number of frames to replay.
Keywords：pathfinding visualizera stardijkstrabreadth first searchdepth first searchmazeheuristic寻路算法可视化A* 算法最短路径迷宫广度优先启发式搜索