How to generate TypeScript UML class diagrams?

Question

I'm using Visual Studio 2015 to create Web Apps and I just start using TypeScript.

As my project gets bigger, I'm wondering if there's a way to get UML diagram of TypeScript code using Visual Studio, extensions or any other free tool.

Keep in mind that some solutions such as TsUML will upload your code without telling you. — JSON, Jun 23 '22 at 01:29

score 33 · Answer 1 · answered Jun 03 '20 at 17:24

33

I am using a VSC extension named classdiagram-ts from AlexShen that does a very nice job, it can be used for creating a diagram for a file or a folder and also lets you reposition and navigate to fields, hide members and other cool options.

https://marketplace.visualstudio.com/items?itemName=AlexShen.classdiagram-ts&ssr=false#overview

answered Jun 03 '20 at 17:24

Ravid Goldenberg

2,119
4
39
59

Layout with this tool does not seem sophisticated, compared to GraphViz (PlantUML). It just puts classes horizontally. You'll have to spend time moving them around to see everything. – Fuhrmanator Feb 10 '21 at 17:58
1

Be aware this is not open source: "It's a personal close source project, no public repo." – lys Dec 23 '22 at 01:06

score 10 · Answer 2 · edited Feb 10 '21 at 18:08

10

You can try tplant. Here's an example for the typescript classes at https://github.com/pascalerni/abap2famix/tree/master/src

Another alternative, which I currently use but requires VSCode, is: vscode-ts-uml

edited Feb 10 '21 at 18:08

Fuhrmanator

11,459
6
62
111

answered Mar 01 '20 at 11:03

zmf

542
6
9

tplant gave me great results (hard to do better than PlantUML for layouts). – Fuhrmanator Feb 10 '21 at 18:03
3

be careful, this tool uses a remote server – Filip Seman Aug 17 '22 at 14:18

score 6 · Answer 3 · answered Jun 11 '21 at 02:21

6

I would advise against doing anything with TsUML. You install it as a regular NPM package, but then it uses some sketchy online service. It seems dangerous to use Tsuml for proprietary projects.

answered Jun 11 '21 at 02:21

Mattマット

81
1
4

There is an offline version of it: https://github.com/demike/TsUML2 – Emran Jun 15 '22 at 18:57
Has anyone verified that it does not contact a server? (other than the authors) – JimbobTheSailor Feb 27 '23 at 23:53

score 4 · Answer 4 · answered Sep 15 '17 at 19:23

for Visual Studio : https://marketplace.visualstudio.com/items?itemName=AzadRatzki.TypeScriptDiagram#overview

for vscode : https://github.com/remojansen/TsUML

or

I would suggest commenting your TypeScript code using the JSDoc convention, compile your TS code without stripping off comments (removeComments to false in tsconfig.json), and use a documentation generator on the JS files.

Based on that, you could maybe find a tool to generate UML diagram from JSDoc : JSDoc UML Diagram

TsUML upload your code on their server without telling you. – Luke Skywalker Jun 15 '19 at 17:28 — Luke Skywalker, Jun 15 '19 at 17:28

score 1 · Answer 5 · edited Aug 01 '19 at 12:15

1

Using TsUML:

npm install -g tsuml
# Note: this posts data to https://yuml.me!!
tsuml --glob ./src/**/*.ts

edited Aug 01 '19 at 12:15

Fabian Kleiser

2,988
3
27
44

answered Jun 13 '19 at 03:21

Breck

670
2
7
22

23

TsUML upload your code on their server without telling you. – leonheess Jan 13 '20 at 09:46
Did not work. I posted my problem at a similar issue. https://github.com/remojansen/TsUML/issues/11#issuecomment-612934131 – Rui Pimentel Apr 13 '20 at 14:58

score 1 · Answer 6 · answered Dec 08 '22 at 23:27

I found a very useful site to convert TS to UML diagram

https://tsuml-demo.firebaseapp.com/

copy following code and paste it under Typescript Tab

export class BaseDTO {
  created: number;
  createdBy: string;
  updated: number;
  updatedBy: string;
}

export class PaymentDTO extends BaseDTO {
  paymentId: number;
  paymentReference: string;
  amount: string;
  paymentPayee: { name: string }
}

Example:

score 1 · Answer 7 · answered Dec 23 '22 at 01:11

1

There is now an open-source package called TsUML2 that, in their words:

works offline, so no third party servers are involved.

https://github.com/demike/TsUML2

answered Dec 23 '22 at 01:11

lys

949
2
9
33

How to generate TypeScript UML class diagrams?

7 Answers7