Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 313
Daniel Santos Avatar asked Jul 29 '13 18:07

Daniel Santos


People also ask

How draw UML diagram from VS Code?

Start Drawing Your First Diagrampuml file type and start writing your UML code. You can also see a real-time change of the update by right click on the VS Code script window and selecting “Preview Current Diagram” or hitting “Alt + D” (This option is available for you whenever editing the .


1 Answers

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

like image 54
Mouneer Avatar answered Oct 03 '22 04:10

Mouneer