TsUML2

Generate UML diagram for your TypeScript applications powered by nomnoml.

TsUML2 works offline, so no third party servers are involved. It supports

classes
interfaces
enums
type literals

Installation

npm install -g tsuml2

Usage

tsuml2 --glob "./src/**/*.ts"

By default tsuml2 assumes that the required tsconfig.json file resides in the current directoy if this is not the case use the tsconfig parameter:

--tsconfig "./somewhere/tsconfig.alt.json"

To avoid getting unwanted interfaces / classes you might want to exclude d.ts and spec.ts files:

tsuml2 --glob "./src/**/!(*.d|*.spec).ts"

Options

      --help                Show help                                  [boolean]
      --version             Show version number                        [boolean]
  -g, --glob                pattern to match the source files (i.e.:
                            ./src/**/*.ts)                   [string] [required]
      --tsconfig            the path to tsconfig.json file
                                                    [default: "./tsconfig.json"]
  -o, --outFile             the path to the output file     [default: "out.svg"]
      --propertyTypes       show property types and method return types
                                                       [boolean] [default: true]
      --modifiers           show modifiers like public,protected,private,static
                                                       [boolean] [default: true]
      --typeLinks           add links for classes, interface, enums that point
                            to the source files        [boolean] [default: true]
      --nomnoml             nomnoml layouting and styling options (an array of
                            strings, each representing a nomnoml line), i.e.:
                            --nomnoml "#arrowSize: 1" "#.interface: fill=#8f8
                            dashed"                                      [array]
      --outDsl              the path to the output DSL file (nomnoml)   [string]
  -m, --memberAssociations  show associations between classes, interfaces, types
                            and their member types    [boolean] [default: false]
      --config              path to a json config file (command line options can
                            be provided as keys in it)                  [string]

an example config.json could look like:

{
  "glob": "./src/**/!(*.d|*.spec).ts",
  "modifiers": false,
  "nomnoml": ["#arrowSize: 1.5","#.interface: fill=#8f8 dashed"]
}

NOTE: command line arguments override those provided in config.json

Examples

Demo Diagram

tsuml2 --glob "./src/demo/**/*.ts" -o "./assets/uml_diagram.svg"

The diagram generated for the code under the demo folder looks as follows:

A complex command line parameter example:

./tsuml2 --glob=./src/demo/**/*.ts --nomnoml "#arrowSize: 1.5" "#.interface: fill=#8f8 dashed" --modifiers false --propertyTypes false

With type links enabled: live example

Generate nomnoml DSL output

tsuml2 --glob "./src/demo/**/*.ts" --outDsl  "./assets/uml_diagram.dsl"

results in the following nomnoml code stored in uml_diagram.dsl:

#.interface: fill=lightblue
#.enumeration: fill=lightgreen
#.type: fill=lightgray
[<interface>Weapon||+tryHit(): boolean]
[<interface>Named|+name: string|]
[<interface>Magic|+kind: string|]
[<interface>BlackMagic||+paintItBlack(): boolean]
[<interface>MagicWeapon<MT>|+magic: MT|+tryMagicHit(): boolean]
[<interface>BlackMagicWeapon||]
[<enumeration>Gender|Male;Female;Else]
[<type>MagicDurability|+fire: number;+water: number|]
[<type>Durable|+durability: number;+magicDurability: MagicDurability|+refresh(): void]
[Magic]<:--[BlackMagic]
[Weapon]<:--[MagicWeapon<MT>]
[MagicWeapon<MT>]<:--[BlackMagicWeapon]
[BaseWeapon|#damage: number;+durability: number;+magicDurability: MagicDurability;+attributes: string\[\]|+refresh(): void]
[Katana|+name: string|+tryHit(): boolean;+doIt(): void]
[MagicKatana<MT>|+magic: MT|+tryMagicHit(): boolean]
[BlackMagicKatana||+tryBlackMagicHit(): boolean]
[Durable]<:--[BaseWeapon]
[BaseWeapon]<:-[Katana]
[Weapon]<:--[Katana]
[Named]<:--[Katana]
[Katana]<:-[MagicKatana<MT>]
[MagicWeapon<MT>]<:--[MagicKatana<MT>]
[MagicKatana<MT>]<:-[BlackMagicKatana]
[MagicWeapon<MT>]<:--[BlackMagicKatana]
[Ninja|+gender: Gender;+static IdCnt: number;-_weapon: Weapon;+id: number|+fight(): boolean]
[Viking<WT>|+gender: Gender;+weapon: WT|+fight(): boolean]
[UberViking<WT>||]
[VikingWithKatana||]
[Viking<WT>]<:-[UberViking<WT>]
[Viking<WT>]<:-[VikingWithKatana]

Use in Node Applications:

 const {createNomnomlSVG} = require('tsuml2')


 createNomnomlSVG({glob: `./src/app/**/!(*.d|*.spec).ts`,outFile: 'd:/apps/src/demo.svg'});

With member associations enabled:

Associations between class / interfaces / types and their members are represented by lines without arrows. The associations also include multiplicity ("0..*").

Use the -m parameter to enable output of member associations.

tsuml2 --glob "./src/demo/**/*.ts" -m -o "./assets/uml_diagram.svg"

rustkas / TsUML2