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?

Answer 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

Show class properties and methods:

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

Tips

• 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

  

Answer 2

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.

Answer 3

Please use IntelliJ editor by Jetbrains. It has the function of UML diagramming from existing code.