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)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!