<div class="update-box"> <p><strong>Update:</strong> grunt-dependencygraph has been replaced by dependo - a more modular version, wrapped up as a NPM-package with both an API, CLI and Grunt task.</p> </div>
It all started a few months back when I started our "AMDification project" at Podio, where we decided to introduce AMD in our codebase, in order to take advantage of tools like RequireJS, and r.js.
More importantly I also wanted to gain a better overview of the dependencies in our code, by being able to extract the module definitions and their dependencies in a systematic way. Using AMD has enabled this in a simple way, because much of the tooling already existed.
But for a long time I've been looking for a visualization tool to help me visualize the JavaScript dependencies - without any luck.
<!--more-->
Okay, I found a few, but they use GraphViz, or similar, to generate huge images that is impossible to handle when you generate a graph of a larger code-base.
I want something better. Something similar to Google Maps, where you have a big graph that's zoomable by mouse or gestures, combined with dragging, to enable panning when the graph is zoomed. I haven't been able to find something like this, so I've taken the write it myself.
Introducing dependo
Let me introduce dependo. It's a small visualization tool that draws an force directed graph of JavaScript dependencies that has been annotated with either CommonJS, or AMD. Behind the scene I'm using a wonderful library named node-madge, to extract the dependencies and combined with the power of D3.js I draw a beautiful zoomable directed graph.
It's all wrapped up as a simple node-module, available on NPM, with both an API and CLI. I also written a grunt-task that can be found here grunt-dependo, so it's convenient to hook into your grunt-build system. The output is a simple HTML-file, with everything embedded, so you can publish it directly to your build server, etc.
Example: RequireJS multi-page visualization
Enough talk. The best way to show something is by example, so here I generated a graph of the official RequireJS multipage example:
<figure> <iframe src="http://auchenberg.github.com/dependo/example/"></iframe> </figure>
It's still early days, but I think this tool will help developers getting a better overview of modules and their dependencies. I really hope you like this tool too.
Have an good idea, or wanna contribute? All feedback is highly appricated.