Visualize your CommonJS or AMD module dependencies in a force directed graph using D3.js.
You can read the full introduction to the project in my blog post.
- Draw a graph of nodes, where each module is represented as a node.
- Google Maps's like zooming, dragging and panning.
- Connect nodes with it's dependencies via lines.
- Hovering a node will highlight it's direct dependencies.
- It's possible to drag a node to a specific position, to re-layout the graph.
The best way to show something is by example, so here I generated a dependencygraph of the offical RequireJS multipage-example
From the same directory as your Gruntfile, run
npm install grunt-dependencygraph
Then add some configuration for the plugin like so:
Then add the following line to your Gruntfile after the initConfig-section:
Then just run
grunt dependencygraph, go to your
outputPath-folder, and open
grunt-dependencygraph supports a few options.
targetPath Path for the target source to extract dependencies (supports absolute/relative paths)outputPath Path for where to output the graph (supports absolute/relative paths)format Dependency-format to parse, either 'cjs' (common-js), or 'amd' (AMD)exclude A regular expression for excluding modules
grunt-dependencygraph is still very much in progress, so here is the todo-list:
- Proper label positioning: Avoid label collisions and make the graph more readable.
- Testing! Unit tests of D3 render logic, and the grunt-task itself