/vscode-ngrx-uml

NGRX to Plant UML diagram vscode extension

Primary LanguageTypeScriptMIT LicenseMIT

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:

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.

Actions tree view

Commands

NgrxUml.Diagram command

Generate 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)

Action diagram

Auth Reducer diagram (png)

Reducer diagram

Action diagram (wsd)

Plantuml file

Known Issues

Please post and view issues on GitHub