Skip to content

Instantly share code, notes, and snippets.

@VehpuS
Created February 7, 2023 19:01
Show Gist options
  • Save VehpuS/f75685f392965669e4528af08041a0b9 to your computer and use it in GitHub Desktop.
Save VehpuS/f75685f392965669e4528af08041a0b9 to your computer and use it in GitHub Desktop.
Awesome dependencies visualization for a react project

Visualizing React Project Dependencies

Based on this article.

Setup

npm install --save-dev dependency-cruiser
choco install graphviz

package.json

{
...
"scripts": {
    ...
    "generate-architecture-svg": "depcruise -p --exclude \".png$|.jpg$|\/types?\\.tsx?$\" --include-only \"^src\" --output-type dot src | dot -T svg > architecture.svg",
    "generate-**submodule**-architecture-svg": "depcruise -p --exclude \".png$|.jpg$|\/types?\\.tsx?$\" --include-only \"^src\/**submodule**\" --output-type dot src | dot -T svg > **submodule**_architecture.svg",
    ...
}
...
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment