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:
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
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With