How to generate TypeScript UML class diagrams in VS Code?

Question

Are there any tools that can generate a UML class diagram from a project in TypeScript or a similar language?

You should really ask 2 questions, one for each language... I doubt the syntax is so similar that one tool would work for both. — MasterScrat, Sep 20 '16 at 16:19

MasterScrat · Answer 1 · 2016-09-20T16:20:00.520

For TypeScript:

The ALM TypeScript editor includes this feature: https://github.com/alm-tools/alm/issues/84

However it looks like it only creates diagram for a single class, not a full hierarchical view of the project with inheritance relationships.
Tsviz is another promising project: https://github.com/joaompneves/tsviz

It generates full project diagram. However it looks outdated and doesn't work with recent TypeScript versions. I'm working on an updated fork.

Mouneer · Accepted Answer · 2017-06-04T23:01:24.993

1

Using UML Diagram feature introduced by IntelliJ Editor by Jetbrains and it works very well with typescript.

Open the Diagram Popup

Go to Settings >>> Search for uml and find the keyboard shortcut for it.

OR

Right Click on a class name >>> Diagrams >>> Show Diagram Popup

Righ Click on the diagram popup >>> Show Categories >>> Methods or Properties

You will find many options to show through the right click on the diagram popup.
You can zoom on the diagram objects (If there are too much details) by holding the Alt key when hovering on them

edited Jun 04 '17 at 23:01

answered Jun 04 '17 at 14:44

Mouneer

Question asks for VS code. – Paul John Leonard Mar 13 '23 at 15:49
1

@PaulJohnLeonard Please don't be quick to judge. I have just checked the history https://stackoverflow.com/posts/17931892/revisions and you can see that the question title has been updated 2 years after the answer. – Mouneer Mar 14 '23 at 14:49