Mono Repo Graph Dependencies

When projects scale with too many dependencies it is important to have a visual way to understand how our dependecies are interconnected. It is something very important in terms of architecture to understand how our system is tighly coupled and analysing it to make the different components of our system loosely coupled.

Graph depedencies #

I am going to use the npm library, lerna-dependency-graph:

Try to install it in our workspace, however when using it like:

yarn lerna-dependency-graph

I have the following error:

env: node\r: No such file or directory

But if I use the following, it works well:

npx lerna-dependency-graph

I will use this, for now. This library will give us a cli tool to create a plain text file, describing our dependecies, for graphviz

In the end, we want to generate an image with our graph dependencies. For that we are going to use graphviz-cli.

Installing needed dependencies:

yarn add -WD graphviz-cli canvas open-cli

After that, we just need to add some commands on our package.json:

  "scripts": {
    ...
    "graph:specs": "npx lerna-dependency-graph -o dependency-graph.dot",
    "graph:png": "yarn graphviz -Tpng -odependency-graph.dot.png dependency-graph.dot",
    "graph:preview": "open dependency-graph.dot.png",
    "graph": "yarn graph:specs && yarn graph:png && yarn graph:preview"
  }

Now when we execute:

yarn graph

A graph of our dependecies is generated in a .png file and previewd.

Published