ngrx-uml

Generate Plant UML diagram from ngrx/store project (version >= 7.0).

Generate separete diagram for each Action or/and Reducer/State.

Searches for:

• actions created function createAction and their use
• reducers created function createReducer

Installation

Node Package npm

To download and install the ngrx-um run the following command:

npm install -g ngrx-uml

or install locally to use in source code

npm install ngrx-uml

Commands

Invoke the tool on the command line through the ngrx-uml executable.

The command ngrx-uml --help lists the available commands. ngrx-uml <command> --help shows available options for the (such as diagram).

ng --help
ng diagram --help

Command	Description
diagram	Generate plantUML diagram
diagnostic	Diagnostic tools

Diagram Command

Usage:

ngrx-uml diagram -f '**/*.ts' -d ../ngrx/projects/example-app/ -i '../**/*.spec.ts' -c tsconfig.app.json

Important: Glob-like file patterns must be in quotation marks

Option	Alias	Description	Type	Default
--version		Show version number	boolean
--log	-l	Log level. [choices: "TRACE", "DEBUG", "INFO", "WARN", "ERROR", "SILENT"]		"INFO"
--help	-h	Show help	boolean
--files	-f	Glob-like file pattern specifying the filepath for the source files. Relative to baseDir. IMPORTANT!! Use with quote " or '	string	"**/*.ts"
--ignore	-i	Glob-like file pattern specifying files to ignore. IMPORTANT!! Use with quote " or '	array	["**/*.spec.ts", "**/node_modules/**"]
--imageFormat	--im	Image format. To turn off image generation set to off [choices: "eps", "latex", "png", "svg", "txt", "off"]		"png"
--outDir	-o	Redirect output structure to the directory	string	"out"
--baseDir	-d	Path to project base directory	string	""
--tsConfig	-c	tsconfig.json file name with relative path from baseDir	string	"tsconfig.json"
--toJson	--js	Generate intermediate files to json	boolean	false
--wsd		Generate plant uml file (.wsd)	boolean	false
--clickableLinks	--cl	Convert terminal links to clickable in vs code terminal	boolean	false

Examples

Generated from source code ngrx/store example app

Action diagram (png)

Auth Reducer diagram (png)

Action diagram (wsd)

@startuml [Auth/API] Login Success
 
set namespaceSeparator ::
skinparam class {
    BackgroundColor<<listen>> HoneyDew
    BackgroundColor<<action>> Wheat
    BackgroundColor<<dispatch>> Technology
}
 
interface "[Auth/API] Login Success" << (A,#FF7700) action >> {
    variable: loginSuccess
    src: auth-api.actions
    --
    props<{user: User}>
}
 
 
interface "auth.reducer:: reducer L" << (L,orchid) listen >> {
    name: loginSuccess
    action: [Auth/API] Login Success
    ..
    Variable: reducer
    __
}
 
"[Auth/API] Login Success" <.down. "auth.reducer:: reducer L"
 
interface "login-page.reducer:: reducer L" << (L,orchid) listen >> {
    name: loginSuccess
    action: [Auth/API] Login Success
    ..
    Variable: reducer
    __
}
 
"[Auth/API] Login Success" <.down. "login-page.reducer:: reducer L"
 
interface "auth.effects:: AuthEffects D" << (D,orchid) dispatch >> {
    name: loginSuccess
    action: [Auth/API] Login Success
    ..
    Class: AuthEffects
    Property: login$
    __
}
 
"[Auth/API] Login Success" -down-> "auth.effects:: AuthEffects D"
 
interface "auth.effects:: AuthEffects L" << (L,orchid) listen >> {
    name: loginSuccess
    action: [Auth/API] Login Success
    ..
    Class: AuthEffects
    Property: loginSuccess$
    __
}
 
"[Auth/API] Login Success" <.down. "auth.effects:: AuthEffects L"
 
@enduml

Plantuml file

JSON

Actions JSON

Actions with references JSON

Reducers JSON

Reducers with references JSON

{
    "name": "[Auth] Logout Confirmation Dismiss",
    "kind": 1002,
    "kindText": "Action",
    "variable": "logoutConfirmationDismiss",
    "filePath": "./actions/auth.actions.ts",
    "references": [
      {
        "name": "logoutConfirmationDismiss",
        "kind": 1003,
        "kindText": "ActionReference",
        "documentation": "",
        "isCall": true,
        "filePath": "./effects/auth.effects.ts",
        "fileName": "auth.effects",
        "declarationContext": [
          {
            "kindText": "ClassDeclaration",
            "name": "AuthEffects"
          },
          {
            "kindText": "PropertyDeclaration",
            "name": "logoutConfirmation$"
          }
        ]
      }
    ]
  }

Using from source code

Installation

npm install ngrx-uml

Example

Use GeneratorService

/* eslint-disable no-console */
import {
    ActionConvertContextFactory, ActionReferenceConvertContextFactory,
    ActionsPlantDiagramRenderFactory, GeneratorOptions, GeneratorService, PlantUmlOutputService
} from 'ngrx-uml';
 
export function useGeneratorService(): Promise<void> {
 
    console.log('## Use GenerateService ####################################################################');
    const options: GeneratorOptions = {
        outDir: 'out/generator',
        imageFormat: 'png',
        ignorePattern: ['**/*.spec.ts'],
        saveConvertResultToJson: false,
        // tsConfigFileName: 'tsconfig.app.json',
        clickableLinks: true,
        saveWsd: false,
        logLevel: 'INFO'
    };
 
    const plantUmlService = new PlantUmlOutputService({
        outDir: options.outDir || 'out',
        ext: options.imageFormat || 'png',
        clickableLinks: options.clickableLinks != null ? options.clickableLinks : false,
        saveWsd: options.saveWsd != null ? options.saveWsd : false,
        generateDiagramsImages: options.generateImages != null ? options.generateImages : true
    });
 
 
    const generateService = new GeneratorService(
        [
            new ActionConvertContextFactory,
            new ActionReferenceConvertContextFactory,
        ],
        new ActionsPlantDiagramRenderFactory().create(),
        [plantUmlService],
        options
    );
 
    const files = '../../test/test_data/**/*.ts';
    return generateService.generate(files)
        .then(() => console.log('Success use GenerateService'))
        .catch((err) => {
            console.error('Error in GenerateService', err);
        });
 
}
 

Use CreateActionsDiagramService

import { CreateActionsDiagramService, GeneratorOptions } from 'ngrx-uml';
 
export function useCreateActionsDiagramService(): Promise<void>  {
    console.log('## Use CreateActionsDiagramService ####################################################################');
    const options: GeneratorOptions = {
        outDir: 'out/diagram-service',
        imageFormat: 'svg',
        ignorePattern: ['**/*.spec.ts'],
        saveConvertResultToJson: false,
        saveWsd: true,
        logLevel: 'INFO'
    };
 
    const files = '../../test/test_data/**/*.ts';
    const createActionsDiagramService = new CreateActionsDiagramService(options);
    return createActionsDiagramService.generateDiagram(files)
        .then(() => console.log('Success use CreateActionsDiagramService'))
        .catch((err) => {
            console.error('Error in CreateActionsDiagramService', err);
        });
}