Nondeterministic Palindrome Machine
    Wondering what’s next for npm?Check out our public roadmap! »

    ngrx-uml
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    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:

    Build Status

    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)

    Action diagram

    Auth Reducer diagram (png)

    Reducer diagram

    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);
            });
    }

    Install

    npm i ngrx-uml

    DownloadsWeekly Downloads

    18

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    151 kB

    Total Files

    151

    Last publish

    Collaborators

    • avatar