Earlier this week I came across a cool little tool called [Colony][] which allows you to visualise the dependency graph of Node (or Browserify) projects.

In the above visualisation you can see that each file is represented by a node in the graph, and if one file depends on another then they are linked. You can click on any file in the graph to explore its dependencies in detail.

Being able to visualise the dependency graph of your project is incredibly powerful. It is a great way to determine the best refactoring targets for your project – at my day job I’ve found files that were linked to areas of the codebase which they shouldn’t have known about and I never would have found them without a visual representation of the dependency graph.

To get started, install Colony and Serve:

$ npm install --save-dev colony $ npm install --save-dev serve

Then build the Colony HTML/CSS/JS output and serve it up:

node_modules/colony/bin/colony src/index.js --outdir bin/colony --readme README.md node_modules/serve/bin/serve bin/colony