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

Comments
  • chore(main): release sinkchart 1.6.0

    chore(main): release sinkchart 1.6.0

    :robot: I have created a release beep boop

    1.6.0 (2023-01-07)

    Features

    • include vulnerabilities in exported data (2528072)

    This PR was generated with Release Please. See documentation.

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

    chore(main): release sinkchart 1.5.0

    :robot: I have created a release beep boop

    1.5.0 (2022-12-22)

    Features

    • remove svg width and height attributes (b9e3d45)

    This PR was generated with Release Please. See documentation.

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

    chore(main): release sinkchart 1.4.0

    :robot: I have created a release beep boop

    1.4.0 (2022-12-05)

    Features

    • universal support for license info (6b8817f)

    This PR was generated with Release Please. See documentation.

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

    chore(main): release sinkchart 1.3.0

    :robot: I have created a release beep boop

    1.3.0 (2022-12-03)

    Features

    • add license info to tooltip, when available (291991c)

    This PR was generated with Release Please. See documentation.

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

    chore(main): release sinkchart 1.2.1

    :robot: I have created a release beep boop

    1.2.1 (2022-12-02)

    Bug Fixes

    • represent non-prod dependencies (5e04c15)

    This PR was generated with Release Please. See documentation.

    autorelease: tagged 
    opened by gabidobo 1
  • 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
  • Add license info to tooltip, when available

    Add license info to tooltip, when available

    This PR adds license info to the package tooltip. ⚠️ With the current version of sandworm-utils, only NPM provides license info to the graph input.

    An issue with displaying tooltips on browsers other than Chrome has also been fixed: replaced event.path with the universally available event.composedPath().

    Closes #10

    opened by gabidobo 0
  • Fix representing non-prod dependencies

    Fix representing non-prod dependencies

    This PR:

    • fixes representing dev, peer, optional, and bundled dependencies
    • adds a common graph data processing method, to massage sandworm-utils graphs into d3 trees
    • fixes processing cyclic dependencies
    • changes the --dev cli option to --include-dev

    Closes: #6

    opened by gabidobo 0
  • Fix dev/optional/peer/bundled dependencies

    Fix dev/optional/peer/bundled dependencies

    Implementing the new Sandworm chart API in v1.2.0 also added a regression with representing dev dependencies. To replicate, try using the --dev option.

    Other dependency types (optional, peer, and bundled) are also available in the graph output but aren't currently displayed in charts.

    opened by gabidobo 0
  • 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
  • chore(deps): bump json5 from 1.0.1 to 1.0.2

    chore(deps): bump json5 from 1.0.1 to 1.0.2

    Bumps json5 from 1.0.1 to 1.0.2.

    Release notes

    Sourced from json5's releases.

    v1.0.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295). This has been backported to v1. (#298)
    Changelog

    Sourced from json5's changelog.

    Unreleased [code, diff]

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2 [code, diff]

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Color-code vulnerability severity

    Color-code vulnerability severity

    Red is currently used to highlight packages with vulnerabilities of any severity. Let's switch to using a palette with shades for various severities (low, moderate, high, critical). This will make charts easier to grok.

    enhancement 
    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.
    bug 
    opened by gabidobo 0
Releases(sinkchart-v1.6.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 14 Jan 3, 2023
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 55 Dec 9, 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 5 Dec 20, 2022
πŸ‘Œ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 148.1k Jan 7, 2023
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 11 Dec 14, 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 10 Nov 30, 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 Jan 7, 2023
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

Stephan Meijer 1.6k Jan 4, 2023
Analyze dependencies in your Deno project

Analyze dependencies in your Deno project

DjDeveloper 3 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

Maksim Balabash 132 Dec 4, 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 npm@7 NPM suppo

Zackery Griesinger 20 Oct 27, 2022
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

Sandworm 155 Dec 15, 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 ╔══════════════════

Sosuke Suzuki 6 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

Lars Kappert 673 Jan 1, 2023
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? Β· ───┬──── Β·

Robin Malfait 78 Dec 16, 2022
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

Quavo 6 Sep 7, 2022