DEV Community

Cover image for Sinkchart - open source visualisation tool for your JS dependencies
Sebastian Vaduva
Sebastian Vaduva

Posted on

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.

Image description

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.

Image description

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

Top comments (0)