Skip to content

A tool for filtering and visualizing import paths within a JavaScript/TypeScript application.

License

Notifications You must be signed in to change notification settings

rx-angular/import-graph-visualizer

Repository files navigation

Import Graph Visualizer

npm version License: MIT

Import Graph Visualizer is a development tool for filtering and visualizing import paths within a JavaScript/TypeScript application.

Motivation

Although there are already excellent tools out there for visualizing imports between Node.js modules (e.g. Dependency Cruiser, which is actually used by this tool under the hood), for large apps these graphs may be too large to comprehend. This is why Import Graph Visualizer allows filtering import paths by source and target modules, allowing you to zoom in to a limited subsection of your app, which will likely be easier to analyze than the entire app as a whole.

Examples

Screenshot of Import Graph Visualizer for this repository:

self example

For an Ionic/Angular starter project:

Ionic/Angular example

For vis-network repo:

vis-network example

Setup

To install as a development dependency in your Node project:

npm install --save-dev @rx-angular/import-graph-visualizer

Alternatively, to install as a global dependency (prefix with sudo on Unix systems):

npm install --global @rx-angular/import-graph-visualizer

Usage

To run this tool, you must supply at least one entry point for your application (e.g. src/index.js):

npx @rx-angular/import-graph-visualizer --entry-points path/to/entry/module

For Typescript projects that use path aliases, make sure to also specify your tsconfig.json path:

npx @rx-angular/import-graph-visualizer --entry-points path/to/entry/module --ts-config path/to/tsconfig

For greater convenience, you may wish to add a script to your package.json:

{
  // ...
  "scripts": {
    // ...
    "import-graph-visualizer": "import-graph-visualizer --entry-points path/to/entry/module ..."
  }
}

Then you may run it as:

npm run import-graph-visualizer

Development

For local development, clone this repo and first install dependencies with:

npm install

Then pick a project for testing and generate its dependencies using the CLI:

npm run reporter -- --entry-points path/to/entry/module --ts-config path/to/tsconfig/file

Then run a development server with:

npm start

If you need to update icons and mappings from VSCode Material Icon Theme, run:

npm install --save-dev vscode-material-icons@latest

made with ❤ by push-based.io

About

A tool for filtering and visualizing import paths within a JavaScript/TypeScript application.

Topics

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors 4

  •  
  •  
  •  
  •