Skip to content

Commit 124f25e

Browse files
committed
docs(): documentation usage + example screenshots
1 parent 817feba commit 124f25e

File tree

4 files changed

+60
-3
lines changed

4 files changed

+60
-3
lines changed

README.md

Lines changed: 60 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,71 @@
11
# Import Graph Visualizer
22

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+
![self example](./docs/images/self-example.png)
15+
16+
For an Ionic/Angular starter project:
17+
18+
![Ionic/Angular example](./docs/images/ionic-angular-example.png)
19+
20+
For `vis-network` repo:
21+
22+
![vis-network example](./docs/images/vis-network-example.png)
423

524
## Setup
625

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+
```
837

938
## Usage
1039

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+
```
1269

1370
## Development
1471

33.2 KB
Loading

docs/images/self-example.png

25.9 KB
Loading
47 KB
Loading

0 commit comments

Comments
 (0)