NgRx Flow

ngrx-flow

ngrx-flow is a tool that uses static code analysis to map and visualize NgRx and Angular components relations. It helps you understand and debug your NgRx state management and Angular components interactions.

Features

• Generate a graph of NgRx actions, effects, reducers and selectors and Angular components, services and pipes
• Show the dependencies and data flows between NgRx and Angular elements
• Export the graph as a mmd file
• Customize the graph layout and appearance

Installation

You can install ngrx-flow globally using npm:

npm install -g ngrx-flow

Or you can use npx to run it without installing:

npx ngrx-flow

Usage

To use ngrx-flow, you need to have a TypeScript project that uses NgRx and Angular. You can run ngrx-flow from the root directory of your project:

ngrx-flow

This will scan your project files and generate a graph of NgRx and Angular elements. The graph will be saved in the ./ngrx-flow folder as ngrx.mmd.

You can also specify the path to your tsconfig file using the -p or --project option:

ngrx-flow -p src/tsconfig.app.json

This will use the specified tsconfig file to resolve your TypeScript modules and paths.

Options

You can customize the behavior and appearance of ngrx-flow using the following options:

• -h, --help Display help for command
• -v, --version Output the version number
• -p, --project <path> Specify path to tsconfig (default: "./tsconfig.json")
• -o, --output <path> Specify output directory (default: "./ngrx-flow")
• -l, --renderer <renderer> (default: "elk")
• -t, --theme <theme> Specify graph theme: light or dark (default: "light")
• -s, --silent Suppress console output

Examples

Here is an example of a graph generated by ngrx-flow:

License

MIT