CODEWITHSUNDEEP
typescriptvisual-studio-codeumlclass-diagram
Daniel Santos
Daniel Santos

Reputation: 15798

How to generate TypeScript UML class diagrams in VS Code?

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

Upvotes: 19

Views: 17506

Answers (2)

Mouneer
Mouneer

Reputation: 13489

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

    enter image description here

Upvotes: 1

MasterScrat
MasterScrat

Reputation: 7366

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

    example generated diagram

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

Upvotes: 5

Related Questions