How to generate TypeScript UML class diagrams in VS Code?

typescript visual-studio-code uml class-diagram
Daniel Santos picture Daniel Santos · Jul 29, 2013 · Viewed 8.1k times · Source

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

Answer

Mouneer picture Mouneer · Jun 4, 2017

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

Related questions

Experimental decorators warning in TypeScript compilation

I receive the warning... Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option `to remove this warning. ... even though my compilerOptions in tsconfig.json have the following settings: "emitDecoratorMetadata": …

Read More
Visual Studio Code Automatic Imports

I'm in the process of making the move from Webstorm to Visual Studio Code. The Performance in Webstorm is abysmal. Visual studio code isn't being very helpful about finding the dependencies I need and importing them. I've been doing it …

Read More
js 'types' can only be used in a .ts file - Visual Studio Code using @ts-check

I am starting to use TypeScript in a Node project I am working on in Visual Studio Code. I wanted to follow the "opt-in" strategy, similar to Flow. Therefore I put // @ts-check at the top of my .js file in …

Read More