Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/demike/TsUML2
Generates UML diagrams from TypeScript source code
https://github.com/demike/TsUML2
class diagram generator typescript uml
Last synced: 3 months ago
JSON representation
Generates UML diagrams from TypeScript source code
- Host: GitHub
- URL: https://github.com/demike/TsUML2
- Owner: demike
- License: mit
- Created: 2020-04-30T06:32:47.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-16T11:33:34.000Z (5 months ago)
- Last Synced: 2024-07-31T14:10:47.956Z (3 months ago)
- Topics: class, diagram, generator, typescript, uml
- Language: TypeScript
- Homepage:
- Size: 4.22 MB
- Stars: 251
- Watchers: 3
- Forks: 34
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TsUML2 [](https://badge.fury.io/js/tsuml2) [](https://snyk.io/test/npm/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
```sh
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:
```sh
--tsconfig "./somewhere/tsconfig.alt.json"
```
To avoid getting unwanted interfaces / classes you might want to exclude d.ts and spec.ts files:
```sh
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:
```json
{
"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
```sh
tsuml2 --glob "./src/demo/**/*.ts" --outDsl "./assets/nomnoml_diagram.dsl"
```
results in the following nomnoml code stored in `nomnoml_diagram.dsl`:
```nomnoml
#.interface: fill=lightblue
#.enumeration: fill=lightgreen
#.type: fill=lightgray
[Weapon||+tryHit(): boolean]
[Named|+name: string|]
[Magic|+kind: string|]
[BlackMagic||+paintItBlack(): boolean]
[MagicWeapon|+magic: MT|+tryMagicHit(): boolean]
[BlackMagicWeapon||]
[Gender|Male;Female;Else]
[MagicDurability|+fire: number;+water: number|]
[Durable|+durability: number;+magicDurability: MagicDurability|+refresh(): void]
[Magic]<:--[BlackMagic]
[Weapon]<:--[MagicWeapon]
[MagicWeapon]<:--[BlackMagicWeapon]
[BaseWeapon|#damage: number;+durability: number;+magicDurability: MagicDurability;+attributes: string\[\]|+refresh(): void]
[Katana|+name: string|+tryHit(): boolean;+doIt(): void]
[MagicKatana|+magic: MT|+tryMagicHit(): boolean]
[BlackMagicKatana||+tryBlackMagicHit(): boolean]
[Durable]<:--[BaseWeapon]
[BaseWeapon]<:-[Katana]
[Weapon]<:--[Katana]
[Named]<:--[Katana]
[Katana]<:-[MagicKatana]
[MagicWeapon]<:--[MagicKatana]
[MagicKatana]<:-[BlackMagicKatana]
[MagicWeapon]<:--[BlackMagicKatana]
[Ninja|+gender: Gender;+static IdCnt: number;-_weapon: Weapon;+id: number|+fight(): boolean]
[Viking|+gender: Gender;+weapon: WT|+fight(): boolean]
[UberViking||]
[VikingWithKatana||]
[Viking]<:-[UberViking]
[Viking]<:-[VikingWithKatana]
```
### Generate mermaid DSL output
```sh
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!
```mermaid
classDiagram
class EquipmentPart~T~{
+id: string
+name?: string
+content?: T
+mount() void
+unmount() void
}
Mountable~T~<|..EquipmentPart~T~
class Weapon {
<>
+tryHit() boolean
}
class Named {
<>
+name: string
}
class Magic {
<>
+kind: string
}
class BlackMagic {
<>
+paintItBlack() boolean
}
class MagicWeapon~MT~ {
<>
+magic: MT
+tryMagicHit() boolean
}
class BlackMagicWeapon {
<>
}
class Attribute~T~ {
<>
+id: string
+value: T
+description?: string
}
class Mountable~T~ {
<>
+mount() void
+unmount() void
}
class Gender {
<>
Male
Female
Else
}
class MagicDurability {
<>
+fire: number
+water: number
}
class Durable {
<>
+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~ {
<>
+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 {
<>
+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:
```js
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
```sh
tsuml2 --glob "./src/demo/**/*.ts" -o "./assets/uml_diagram.svg"
```
The diagram generated for the code under the [demo folder](https://github.com/demike/TsUML2/tree/master/src/demo) 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](https://raw.githubusercontent.com/demike/TsUML2/master/assets/uml_diagram.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.
```sh
tsuml2 --glob "./src/demo/**/*.ts" -m -o "./assets/uml_diagram.svg"
```
