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:

``bash
npm install -g ngrx-uml
`
or install locally to use in source code
`bash
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 --help shows available options for the (such as diagram).

`bash
ng --help
ng diagram --help
`

| Command | Description |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| diagram | Generate plantUML diagram |
| diagnostic | Diagnostic tools |




$3

#### Usage:

`bash
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

$3

!Action diagram

$3

!Reducer diagram

$3

`pascal
@startuml [Auth/API] Login Success

set namespaceSeparator ::
skinparam class {
BackgroundColor<> HoneyDew
BackgroundColor<> Wheat
BackgroundColor<> 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

$3

Actions JSON

Actions with references JSON

Reducers JSON

Reducers with references JSON

`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




$3

`bash
npm install ngrx-uml
`

$3


#### Use GeneratorService

`typescript
/ eslint-disable no-console /
import {
ActionConvertContextFactory, ActionReferenceConvertContextFactory,
ActionsPlantDiagramRenderFactory, GeneratorOptions, GeneratorService, PlantUmlOutputService
} from 'ngrx-uml';

export function useGeneratorService(): Promise {

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

`typescript
import { CreateActionsDiagramService, GeneratorOptions } from 'ngrx-uml';

export function useCreateActionsDiagramService(): Promise {
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);
});
}
``