Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UML Diagram for TypeScript in WebSorm

I've got the following problem:

I need to deliver a UML diagram from my TypeScript source code. I want to generate the diagram with WebStorm and the UML plugin, as suggested in many answers to other questions.

The problem is, that I get a dependency diagram on file-level, not on class-level. It looks like this:

Current state

It shows the files and dependencies between the files, but not the classes, which are defined in the files.

Is there any possibility to get a diagram on class level from TypeScript (and TSX) source files? Any suggestions would be helpful, plugins / options for IntelliJ/WebStorm or external tools...

Thanks

like image 604
Luca Schimweg Avatar asked Nov 20 '19 09:11

Luca Schimweg


People also ask

Can IntelliJ make UML diagram?

IntelliJ IDEA Ultimate allows you to generate UML diagrams. You can use ⌥⇧⌘U (macOS) or Ctrl+Alt+Shift+U (Windows/Linux) to generate a UML diagram for your code which can help you and your team to read and understand the codebase.

Does JavaScript use UML?

Provides support for UML class diagrams in IntelliJ-based IDEs for JavaScript and TypeScript languages. The following features are available: Support for JS and TS classes, interfaces and enums.

How can I see UML diagram in IntelliJ?

View diagram on a packageIn the Project tool window, right-click a package for which you want to create a diagram and select Diagrams | Show Diagram Ctrl+Alt+Shift+U ). In the list that opens, select Java Class Diagram. IntelliJ IDEA generates a UML diagram for classes and their dependencies.


1 Answers

No; the only available diagram for TypeScript is a module dependency diagram that shows how the modules depend on each other (based on require() and import statements). There is no way to create a UML Class diagram for TypeScript in WebStorm; if you miss this feature, please vote for this feature request.

There are some solutions on the web for this, you can give them a try: Typescript UML Visualizer, TsUML, TypeScript UML Playground

like image 103
lena Avatar answered Oct 28 '22 13:10

lena