DEV Community

Cover image for Visualization of route navigation in a React app
Manuel Micu
Manuel Micu

Posted on

Visualization of route navigation in a React app

This post describes how you can build your own visualization of the navigation inside a React web application.

Such visualization can transform a complex user journey into a more easy to understand, interactive network graph.

Context in my company

Tech stack:

  • react SPA
  • react-router
  • 30+ screens
  • screens grouped in multiple bundles, loaded only when/if needed
  • folder structure: src/screens/<bundle>/<screen>


No single place to view all these routes, that would allow new developers to quickly understand:

  • how the screens are split into bundles
  • the available navigation pathways between these screens

The alternatives would have been to:

  • Look inside the collaborative design tool. However there was no representation of ALL the screens, but rather they were spread in multiple places, usually grouped by feature.
  • Look inside the codebase, and follow the code. But this would be too tedious if you just want an overview of ALL the screens.


This started as a side project that I played with in a few evenings, since I wasn't sure if the end result would look good, or if my colleagues would find it useful.

The idea was simple: run a script that would generate a network graph made of:

  • nodes [{ id, bundle }] - screens, grouped by their bundle
  • edges [{ from, to }] - directed arrows between the screens, indicating that the navigation between these 2 screens is possible.

These nodes and edges would be generated by looking through the codebase, with an algorithm described by the following pseudocode:

nodes = [];
edges = [];
bundles = findBundles(); // find all the src/screens/<bundle>
bundles.forEach(bundle => {
  screens = findScreens(); // find all the src/screens/bundle/<screen>
  screens.forEach(screen => {
    nodes.push({ id: screen, bundle  });
    paths = findDestinationPaths(); // regexp of PATH.[...] inside src/screens/bundle/screen
    paths.forEach(path => {
      edges.push({ from: screen, to: mapPathToScreen(path) });
Enter fullscreen mode Exit fullscreen mode

This script will output 2 files: nodes.js and edges.js. These files were added to .gitignore.

Drawing the graph

I used vis.js network library (link) for drawing the network graph.

This library comes with a few useful built-in features, out of which I used:

  • left-to-right hierarchical layout
  • color grouping, based on the bundle
  • physics engine, using repulsion solver

NOTE: I had to play around with some of the options, in order to find the ones that gave the best looking output.

Running the script

I added a new script entry inside package.json, that does:

"view-network": "node scripts/network/extract.js && http-sever scripts/network/index.html
Enter fullscreen mode Exit fullscreen mode

The index.html file will do a few things:

  • import the generated nodes.js and edges.js
  • import the drawing library
  • draw the graph
  • add extra UI features, such as a dropdown select menu, so that you can choose which bundles to view.


Here are 2 examples of graphs that can be generated:

NOTE: I had to add some blur, so that I don't share confidential details.
Example of network graph

Another example, using a different layout:
Another example of network graph


Sometimes your side-projects can turn out to be useful for your company.

Top comments (0)