| 
1 | 1 | # Import Graph Visualizer  | 
2 | 2 | 
 
  | 
3 |  | -_TODO: description_  | 
 | 3 | +**Import Graph Visualizer is a development tool for filtering and visualizing import paths within a JavaScript/TypeScript application.**  | 
 | 4 | + | 
 | 5 | +## Motivation  | 
 | 6 | + | 
 | 7 | +Although there are already excellent tools out there for visualizing imports between Node.js modules (e.g. [Dependency Cruiser](https://github.com/sverweij/dependency-cruiser), which is actually used by this tool under the hood), for large apps these graphs may be too large to comprehend.  | 
 | 8 | +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.  | 
 | 9 | + | 
 | 10 | +## Examples  | 
 | 11 | + | 
 | 12 | +Screenshot of Import Graph Visualizer for this repository:  | 
 | 13 | + | 
 | 14 | +  | 
 | 15 | + | 
 | 16 | +For an Ionic/Angular starter project:  | 
 | 17 | + | 
 | 18 | +  | 
 | 19 | + | 
 | 20 | +For `vis-network` repo:  | 
 | 21 | + | 
 | 22 | +  | 
4 | 23 | 
 
  | 
5 | 24 | ## Setup  | 
6 | 25 | 
 
  | 
7 |  | -_TODO_  | 
 | 26 | +To install as a development dependency in your Node project:  | 
 | 27 | + | 
 | 28 | +```sh  | 
 | 29 | +npm install --save-dev import-graph-visualizer  | 
 | 30 | +```  | 
 | 31 | + | 
 | 32 | +Alternatively, to install as a global dependency (prefix with `sudo` on Unix systems):  | 
 | 33 | + | 
 | 34 | +```sh  | 
 | 35 | +npm install --global import-graph-visualizer  | 
 | 36 | +```  | 
8 | 37 | 
 
  | 
9 | 38 | ## Usage  | 
10 | 39 | 
 
  | 
11 |  | -_TODO_  | 
 | 40 | +To run this tool, you must supply at least one entry point for your application (e.g. `src/index.js`):  | 
 | 41 | + | 
 | 42 | +```sh  | 
 | 43 | +npx import-graph-visualizer --entry-points path/to/entry/module  | 
 | 44 | +```  | 
 | 45 | + | 
 | 46 | +For Typescript projects that use path aliases, make sure to also specify your `tsconfig.json` path:  | 
 | 47 | + | 
 | 48 | +```sh  | 
 | 49 | +npx import-graph-visualizer --entry-points path/to/entry/module --ts-config path/to/tsconfig  | 
 | 50 | +```  | 
 | 51 | + | 
 | 52 | +For greater convenience, you may wish to add a script to your `package.json`:  | 
 | 53 | + | 
 | 54 | +```json  | 
 | 55 | +{  | 
 | 56 | +  // ...  | 
 | 57 | +  "scripts": {  | 
 | 58 | +    // ...  | 
 | 59 | +    "import-graph-visualizer": "import-graph-visualizer --entry-points path/to/entry/module ..."  | 
 | 60 | +  }  | 
 | 61 | +}  | 
 | 62 | +```  | 
 | 63 | + | 
 | 64 | +Then you may run it as:  | 
 | 65 | + | 
 | 66 | +```sh  | 
 | 67 | +npm run import-graph-visualizer  | 
 | 68 | +```  | 
12 | 69 | 
 
  | 
13 | 70 | ## Development  | 
14 | 71 | 
 
  | 
 | 
0 commit comments