phuongnqk / vscode-ngrx-uml

NGRX to Plant UML diagram vscode extension

Ngrx Uml

Attention

I currently have time to develop this tool. If:

• you need some functionality
• something is not working
• you have a question

please create a GitHub Issue

Features

Generate diagrams

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

Action tree view

Show actions and references in tree view. Workspace folder have to contains generated data in json format (default directory: 'out'). Folder can be change in extension settings.

Commands

NgrxUml.Diagram command

Other commands

• ngrx-uml.refreshTreeView - refresh state tree view

Requirements

Used ngrx-uml package.

Extension Settings

This extension contributes the following settings:

• ngrxUml.input.workspaceFolder - Default workspace folder
• ngrxUml.input.includeFiles - Glob-like file pattern specifying the filepath for the source files. Relative to baseDir - default: "**/*.ts"
• ngrxUml.input.ignoreFiles - Glob-like file pattern specifying files to ignore - default: [ "/*.spec.ts", "/node_modules/**"]
• ngrxUml.input.baseDir - Base directory for workspace folder
• ngrxUml.input.tsConfigFile - tsconfig.json file name with relative path from baseDir - default: "tsconfig.json"
• ngrxUml.output.generateDiagramImages - Generate Diagram images - default: false
• ngrxUml.output.imageFormat - Generate diagrams in specified format [ "eps","latex","png","svg","txt"] - default: "png"
• ngrxUml.output.outDir - Redirect output structure to the directory - default: "out"
• ngrxUml.output.generateJsonFiles - Generate intermediate files to json. It must be enabled for state tree view to work - default: true
• ngrxUml.output.generateWsdFiles - Generate plant uml file (.wsd) - default: true
• ngrxUml.general.clickableLinks - Convert terminal links to clickable in vs code terminal - default: true
• ngrxUml.general.logLevel - Log level - default: "INFO"
• ngrxUml.general.showStatusBar - Show status bar item - default: true

Examples

Generated from source code ngrx/store example app

Action diagram (png)

Auth Reducer diagram (png)

Action diagram (wsd)

Plantuml file

Known Issues

Please post and view issues on GitHub