Visualizing how your code works

I have this idea and I have made a prototype, let me explain how it works.

Did you ever get lost working on a big code base with many files and lines of code? I have been working on an idea to fix this.

When you start working on a new big codebase you already know something about it. You expect to see some design patterns, tests and config files. However, there are many things specific to the project that you need to see the software working to understand the code.

Our current tools are reading the code, using the debugger, and print lining (e.g. console.log ... ). While these are helpful, in nature it is hard to communicate with human brain using just text. It's much easier to understand inflation looking at a chart than to read the numbers in a table of numbers.

We can do the same to code using something similar. A 3d force graph. I tried to draw a graph for a specific request to a web piece of software using simple edges for each time the code jumps from one file to another. The result was astonishing. I tried it on a create post request sent to Discourse, a big forum webapp.

See how it works in action: https://youtu.be/-1GSaUeNPWQ

Without reading a single line of code, I knew what controllers and models are involved and how they work together. This way you can know which files you should be working on in no time and it will ease your learning curve when you’re starting on a project or even a new task.

What do you all think?