Sinkchart - open source visualisation tool for your JS dependencies

Understanding and visualising is critical to better understand your app's structure and more importantly - package vulnerabilities.

This is why we've created Sinkchart - beautiful Visualizations For Your App's Dependencies

Sinkchart offers two types of visualisations: Treemap and Tree

*Treemap: *

1. Node colors represent the dependency depth;
2. Node surface represents the size of the corresponding directory under node_modules;
3. A dotted pattern in a node background means the package is a shared dependency, required by multiple packages, and present multiple times in the chart;
4. Shared dependency sizes are added to every dependent package, to represent the independent size structure properly; hence, the displayed size might be larger than the actual size on disk;
5. A red package background means the package has direct vulnerabilities;
6. A purple package background means the package depends on other vulnerable packages;
7. Click on a node to make the tooltip persist; click outside to close it;

When representing deep dependencies, the surface area of certain packages might reach zero, making them invisible.

Tree:

1. Nodes are grouped by color based on the root dependency that they belong to;

2. Red text in a package name means the package has direct vulnerabilities;

3. Purple text in a package name means the package depends on other vulnerable packages;

4. Click on a node to make the tooltip persist; click outside to close it;

By default, the tree chart has a maximum depth of 7, meaning only seven levels of dependencies will be represented, to keep the output readable; you can override this using the --md option.

Here are some samples of very popular packages:

• Apollo Client 3.7.1

Tree
Treemap

• Nest.js 9.1.2

Tree
Treemap

*Webpack 5.74.0
Tree
Treemap

You can check out your own's app Tree structure and Treemap visualisation - install Sinkchart now: yarn global add sinkchart # or npm install -g sinkchart