DepViz - A visual tool to understand inter-file dependencies

Hi everyone :wave:

I’ve always wanted a tool to better visually understand inter-file dependencies in Elixir projects to help me reduce compilation dependencies (and hence, reduce recompilation times), but none existed so I wrote my own! As part of my Code BEAM BR talk I’d like to release the tool.

Try it online at: https://depviz.jasonaxelson.com/
(or the old link: https://dep-viz.herokuapp.com/)

Or view the code:

This is what it looks like when you view a project:

It can highlight dependencies of a given file:

It can also highlight the files that depend on the given file at compile time:

To better understand how to use the tool, watching parts of my Code BEAM BR will likely be helpful:
https://www.codebeambr.com/video/12

Who is it for?

Any elixir developer that wants to better understand (and hopefully reduce!) the inter-file dependencies of their project.

Acknowledgements

I’d like to thank my wife for helping me with the design, along with @rodrigues and members of the Elixir Hawaii community for providing valuable feedback during the initial design and development.

I hope this tool can prove helpful to people!

66 Likes

This is awesome! Great job @axelson and everyone involved!

7 Likes

Thanks José! :tada:

2 Likes

This looks fantastic!

Did you see the talk by Rafał Studnicki about similar topic? https://www.youtube.com/watch?v=LkGx33Suzsk He does a very similar thing but uses different visualization method.
The idea is that all files are on a big circle sorted by module name. This makes closely connected files appear together (because they share the same prefix MyApp.MyContext…).

This also means that places or files do not change that much when you add new ones.

I wonder if it would be possible to use your tool which has more functionalities but with visualisation method proposed by him?

4 Likes

Thanks! That was a very interesting talk, and it is neat that it is also using d3.js

Hmm, it would be possible to add the per-file dependency visualization on top of a hierarchical edge bundling graph, and that would be a neat way to visualize the dependencies. It would be interesting to do that visualization.

2 Likes

My Code BEAM BR talk about DepViz was posted semi-recently. In it I give an overview of DepViz and talk about what causes applications to have lots of compile-time dependencies:

https://www.codebeambr.com/video/12

FYI, the talk is in English :blush:

6 Likes