ngrx-flow

0.1.0-beta.2 • Public • Published

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:

NgRx-Angular graph

License

MIT

Dependencies (5)

Dev Dependencies (14)

Package Sidebar

Install

npm i ngrx-flow

Weekly Downloads

0

Version

0.1.0-beta.2

License

MIT License

Unpacked Size

38.8 kB

Total Files

16

Last publish

Collaborators

  • pnaroznik