Beautiful Visualizations For Your App's Dependencies 🧭

Overview
Sandworm

 

Beautiful Visualizations For Your App's Dependencies πŸͺ±

  • Outputs SVGs
  • Powered by D3
  • Overlays security vulnerabilities
  • Works with npm & yarn
  • Made by the team behind Sandworm - Easy auditing & sandboxing for your JavaScript dependencies

Sinkchart Tooltips

Warning Sinkchart does NOT currently work with pnpm or with workspaces.

Get Involved

Install

yarn global add sinkchart # or npm install -g sinkchart

Options

Options:
      --version          Show version number                           [boolean]
      --help             Show help                                     [boolean]
  -o, --output           The name of the output directory, relative to the
                         application path       [string] [default: ".sinkchart"]
  -d, --dev              Include dev dependencies     [boolean] [default: false]
  -v, --show-versions    Show package versions        [boolean] [default: false]
  -t, --type             Visualization type[string] [choices: "tree", "treemap"]
  -p, --path             The application path    [string] [default: current dir]
      --md, --max-depth  Max depth to represent                         [number]

Chart Types

Treemap

  • Node colors represent the dependency depth;
  • Node surface represents the size of the corresponding directory under node_modules;
  • 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;
  • 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;
  • A red package background means the package has direct vulnerabilities;
  • A purple package background means the package depends on other vulnerable packages;
  • 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.

Sinkchart Treemap Chart

Tree

  • Nodes are grouped by color based on the root dependency that they belong to;
  • Red text in a package name means the package has direct vulnerabilities;
  • Purple text in a package name means the package depends on other vulnerable packages;
  • 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.

Sinkchart Tree Chart

Samples

You might also like...

Find and fix dangling files and unused dependencies in your JavaScript projects.

Find and fix dangling files and unused dependencies in your JavaScript projects.

unimported Find unused source files in javascript / typescript projects. While adding new code to our projects, we might forget to remove the old code

Nov 28, 2022

Analyze dependencies in your Deno project

Analyze dependencies in your Deno project

Feb 20, 2022

Easy-to-use tool to inform you about potential risks in your project dependencies list

sdc-check Easy-to-use tool to inform you about potential risks in your project dependencies list Usage Add to your project Add new npm command to scri

Nov 22, 2022

Repo for tricking NPM into not hoisting your package. No dependencies and a warning if imported.

noist (Short for No Hoist) Repo for tricking NPM into not hoisting your package. No dependencies and a warning if imported. Why? As of [email protected] NPM suppo

Oct 27, 2022

Easy auditing & sandboxing for your JavaScript dependencies πŸͺ±

Easy auditing & sandboxing for your JavaScript dependencies πŸͺ±

Easy auditing & sandboxing for your JavaScript dependencies πŸͺ± TL;DR Sandworm intercepts all sensitive Node & browser APIs, like child_process.exec or

Nov 23, 2022

Show npm package authors and maintainers of your dependencies and devDependencies.

your-deps-authors Show npm package authors and maintainers of your dependencies and devDependencies. Usage $ npx your-deps-authors ╔══════════════════

Sep 29, 2022

βœ‚οΈ Find unused files, dependencies and exports in your TypeScript project

βœ‚οΈ Knip Knip scans your JavaScript and TypeScript projects for unused files, dependencies and exports: things that can be removed! Less code means bet

Nov 22, 2022

Placebo, a beautiful new language agnostic diagnostics printer! It won't solve your problems, but you will feel better about them.

Placebo, a beautiful new language agnostic diagnostics printer! It won't solve your problems, but you will feel better about them.

Placebo A beautiful new language agnostic diagnostics printer! β”Œβ”€[./README.md] β”‚ 1 β”‚ What is Placebo? Β· ───┬──── Β·

Oct 25, 2022

Create beautiful images and gifs of your source code πŸš€πŸ€–βž•

Create beautiful images and gifs of your source code πŸš€πŸ€–βž•

Darwin Awesome gifs and images of your code View Demo Β· Report Bug Β· Request Feature About The Project darwin.mp4 My motivation for building this was

Sep 7, 2022
Comments
  • chore(main): release sinkchart 1.2.0

    chore(main): release sinkchart 1.2.0

    :robot: I have created a release beep boop

    1.2.0 (2022-11-28)

    Features

    • build all charts by default (a1db19a)
    • support all js package managers (bc2c2e2)

    This PR was generated with Release Please. See documentation.

    autorelease: tagged 
    opened by gabidobo 1
  • chore(main): release sinkchart 1.1.0

    chore(main): release sinkchart 1.1.0

    opened by gabidobo 1
  • Support all JS package managers

    Support all JS package managers

    This PR updates the utils module to v1.9.0 and implements the new graph generation API.

    • All major JS package managers are now supported (NPM/Yarn Classic/Yarn Berry/PNPM).
    • Support has also been added for retrieving vulnerabilities via Yarn Berry as well as via PNPM.
    • Unused dependencies have been removed.
    • New self-charts have been generated

    Warning There is a known issue with yarn audit data and aliased packages. See #5.

    opened by gabidobo 0
  • Yarn classic's `audit` does not appear to support aliases

    Yarn classic's `audit` does not appear to support aliases

    Notice the fracture in the vulnerability path below: image

    • @pnpm/lockfile-file has a dependency on @zkochan/js-yaml, so the latest version (0.0.6) is installed. This dependency is aliased as js-yaml.
    • When running yarn audit the alias is ignored by Yarn, and we get back vulnerabilites for [email protected] instead. That specific package version is not actually installed.
    • We do, however, have [email protected] installed as a dependency for @yarnpkg/parsers. That node gets wrongly labeled as a vulnerability, and looks disconnected from his path.
    • Reproduce by running yarn audit in this repo's root.
    opened by gabidobo 0
Releases(sinkchart-v1.2.0)
Hemsida fΓΆr personer i Sverige som kan och vill erbjuda boende till mΓ€nniskor pΓ₯ flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo fΓΆr kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 13 Jul 1, 2022
GPU supercharged attraction-graph visualizations built on top of Three.js

Force Directed Graph GPU supercharged attraction-graph visualizations for the web built on top of Three.js. Importable as an ES6 module. Simulation co

Jono Brandel 53 Nov 7, 2022
A beautiful, responsive, highly customizable and accessible replacement for JavaScript's popup boxes. Zero dependencies.Alerts ,dialogs

AsgarAlert (v1) for JS Install <script defer src="/asgar-alert.js"></script> Examples The most basic message: asgar("Hello world!"); A message signali

Asgar Aliyev 6 Oct 10, 2021
πŸ‘ŒA useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.

Throw out pop-ups confirming the submission of form! A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for dro

Vic ShΓ³stak 35 Aug 24, 2022
Flutter makes it easy and fast to build beautiful apps for mobile and beyond

Flutter is Google's SDK for crafting beautiful, fast user experiences for mobile, web, and desktop from a single codebase. Flutter works with existing

Flutter 146.6k Nov 23, 2022
Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome.

Flatline Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome. Load the extension in Firefox Clone the repository Open

Cleo Menezes Jr. 43 Nov 7, 2022
Sample apps showing how to build music and video apps for Xbox using a WebView.

description languages name page_type products urlFragment Sample showing how to build music and video apps using primarily web technologies for Xbox.

Microsoft 10 Aug 11, 2022
why make apps to increase focus -- when you can make apps to reduce focus

impossifocus ?? What is this? ImpossiFocus will measure focus by reading your brainwaves -- and if you're in the zone, it'll ensure that changes with

Aleem Rehmtulla 11 Oct 23, 2022
LunaSec - Open Source Security Software built by Security Engineers. Scan your dependencies for Log4Shell, or add Data Tokenization to prevent data leaks. Try our live Tokenizer demo: https://app.lunasec.dev

Our Software We're a team of Security Engineers on a mission to make awesome Open Source Application Security tooling. It all lives in this repo. Here

LunaSec 1.2k Nov 27, 2022