@acbart/tsuml2
v0.17.0
Published
UML diagrams for TypeScript
Downloads
7
Maintainers
Readme
This is based off of work by demike
. I added dependency tracking. Maybe it even works!
TsUML2
![Known Vulnerabilities](https://snyk.io/test/npm/tsuml2/badge.svg)
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
-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]
--mermaid mermaid layouting and styling options (an array of
strings, each representing a mermaid line), i.e.:
--mermaid "direction LR" [array]
--outMermaidDsl the path to the output mermaid DSL file [string]
-m, --memberAssociations show associations between classes, interfaces, types
and their member types [boolean] [default: false]
--exportedTypesOnly show only exported types, classes, interfaces, enums
[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
Direct output of nomnoml and mermaid code
You can output the diagram not only as svg but also as nomnoml and mermaid code.
Generate nomnoml DSL output
tsuml2 --glob "./src/demo/**/*.ts" --outDsl "./assets/nomnoml_diagram.dsl"
results in the following nomnoml code stored in nomnoml_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]
Generate mermaid DSL output
tsuml2 --glob "./src/demo/**/*.ts" --outMermaidDsl "./assets/mermaid_diagram.dsl"
stores the mermaid code to mermaid_diagram.dsl
.
Note: You can use it directly in github markdown!
classDiagram
class EquipmentPart~T~{
+id: string
+name?: string
+content?: T
+mount() void
+unmount() void
}
Mountable~T~<|..EquipmentPart~T~
class Weapon {
<<interface>>
+tryHit() boolean
}
class Named {
<<interface>>
+name: string
}
class Magic {
<<interface>>
+kind: string
}
class BlackMagic {
<<interface>>
+paintItBlack() boolean
}
class MagicWeapon~MT~ {
<<interface>>
+magic: MT
+tryMagicHit() boolean
}
class BlackMagicWeapon {
<<interface>>
}
class Attribute~T~ {
<<interface>>
+id: string
+value: T
+description?: string
}
class Mountable~T~ {
<<interface>>
+mount() void
+unmount() void
}
class Gender {
<<enumeration>>
Male
Female
Else
}
class MagicDurability {
<<type>>
+fire: number
+water: number
}
class Durable {
<<type>>
+durability: number
+magicDurability: MagicDurability
+refresh() void
}
Magic<|..BlackMagic
Weapon<|..MagicWeapon~MT~
MagicWeapon~MT~<|..BlackMagicWeapon
Durable -- MagicDurability
class BaseWeapon{
#damage: number
+durability: number
+magicDurability: MagicDurability
+attributes: Attribute~any~[]
+refresh() void
}
class Katana{
+name: string
+tryHit() boolean
+doIt() void
}
class MagicKatana~MT~{
+magic: MT
+tryMagicHit() boolean
}
class BlackMagicKatana{
+tryBlackMagicHit() boolean
}
class AttributeWithDefault~T~ {
<<interface>>
+default: T
}
EquipmentPart~T~<|--BaseWeapon
Durable<|..BaseWeapon
BaseWeapon<|--Katana
Weapon<|..Katana
Named<|..Katana
Katana<|--MagicKatana~MT~
MagicWeapon~MT~<|..MagicKatana~MT~
MagicKatana~MT~<|--BlackMagicKatana
MagicWeapon~MT~<|..BlackMagicKatana
Attribute~T~<|..AttributeWithDefault~T~
class Ninja{
+gender: Gender
+IdCnt: number$
-_weapon: Weapon
#secondaryWeapon?: Weapon
-blockade?: Blockade
+id: number
+fight() boolean
}
class Blockade {
<<interface>>
+magic: number
+physical: number
}
Ninja -- Gender
Ninja -- Weapon
Ninja -- Weapon
class Viking~WT~{
+age: (10 | 20)[]
+gender: Gender
+weapon: WT
+secondaryWeapon?: WT
+bag: EquipmentPart~any~[]
+fight() boolean
}
class UberViking~WT~{
+belt?: EquipmentPart~any~
}
class VikingWithKatana{
}
class MagicViking{
+secondaryWeapon?: MagicKatana~BlackMagic~
}
Viking~WT~<|--UberViking~WT~
Viking~WT~<|--VikingWithKatana
Viking~WT~<|--MagicViking
Viking~WT~ -- Gender
Usage in Node Applications:
const {createDiagram, TsUML2Settings} = require('tsuml2')
const settings = new TsUML2Settings();
settings.glob = `./src/app/**/!(*.d|*.spec).ts`;
settings.outFile = 'd:/apps/src/demo.svg'
createDiagram(settings);
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
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"