VS Code - Generate UML from a node.js project

Question

Is there way to generate UML from a node.js project in VsCode?

I found it is possible in visual studio like in this example.

How should I do that vsCode?

Thank you!

Answer 1

---

UPDATED @ December 22nd, 2021

---

So anyone that looks at my profile can tell I am a VS Code enthusiast. I love VS Code, but that doesn't mean I use VS Code for everything. After taking a couple semesters of Java GUI design, and doing some side work with JavaFX for a small business, I have found that, for professional, and production use, you can't beat IntelliJ. The question is specific to VSC ode, and the rest of this answer is specific to that, but I do want to mention, that though I use "JetBrains IntelliJ IDE Ultimate ed." the diagram plugin is available for free with the JetBrains community edition.

This talks about diagrams in IntelliJ: https://philosophy-question.com/library/lecture/read/85355-how-do-i-create-a-class-diagram-in-intellij-community-edition

I have noticed though, despite my personal favorite UML tool being the Diagrams plugin for IntelliJ, many people who use IntelliJ still default to Plant UML, which has a version available for VS Code (maybe that's somthing to consider?)

---

Updated @ 2021 - JUNE - 24th 16

---

EDIT:

"@Christophe asked if I had any experience using Round-Trip Engineering in the comments section below — and I wont explain the details — but that question led me to realize that in order for my answer to be correct, I would need to edit out a couple inaccuracies."

---

UML Support in V.S. Code

---

I want to answer this question by showing readers, what UML support & UML tools are offered by VSCode, and what that really translates to in regards to UML tooling abilities.

You asked, "Does VSCode support UML for Node.js? The answer to the question isn't black and white. @Christophe points out in a comment below that VSCode is not the same as an IDE (which can be confusing, because Visual Studio is an IDE). VSCode is an editor, so unlike Visual Studio 2021, VSCode does not support many features like UML "out of the box", and as editors go, support things like UML are, for the most part, gained through third party open source software. So yes, VSCode supports UML through the use of third party extensions, although, what exactly is UML support?

What does UML Support Look Like?

I have always thought of UML as a pseudo language that can be converted into OOP code, and visa versa: If a language like Java or C++ formats their code correctly, the code can be converted into a UML diagram, but as it turns out I was only half correct in my understanding. UML in its most basic form does not add any functionality to a language, nor dose it change or alter a language. UML, or Unified Modeling Language, is a language, that implements a graphical notation, and interchange format which are used to create Blueprints (or diagrams) for engineering software, and to specify semantics. So, in other words, pen & paper, comes with "out of the box" support for UML. When looking at it like that yes VSCode has support, however, VSCode does not support the extra functionality (or tooling) that is often coupled with UML in IDE's like Visual Studio, IntelliJ, & ECLIPSE.

---

And the Final Answer is???

Well its black and White...

---

WHITE:

On one side I would say YES, so long as, support is defined as simply generating UML diagrams. If this is the case, then support can be gained by VSCode through the installation of 3rd party extensions. At the bottom of this answer is a list of extensions. It is important to note that for generating diagrams, the language does not have to be Node.js, it can be anything.

---

BLACK:

The Black side of the answer is, If by Generate, you mean generate abstract classes from the diagram you created using a VSCode extension,then NO VSCode does not offer that level of support, and you will most likely need to use one of the more Popular IDE's to get it.

---

VSCode Extensions for UML Support

---

#01 | NGRX-UML @ "immament.vscode-ngrx-uml"

• So I haven't used this one, maybe it has some functionality to it for generating UML from code, or generating OOP classes from UML. I think its relatively new though because I don't remember it)

#02 | UMLet @ "theumletteam.umlet"

• This one is like the majority of UML extensions: The UMLLet uses Markdown (MD) for creating diagrams. I don't find tools like this to be very useful but it is an option.

#03 | Draw.io Integration (Unofficial) @ "hediet.vscode-drawio"

• Rather than compiling to markdown, this actual generates SVG files, which IMO is very cool. The README.md doc for this extension claims that it is a speedy process to use the tool, I disagree.

#04 | Markdown Preview Mermaid Support @ "bierner.markdown-mermaid"

• I really like Mermaid for flow charts, but I would never use it for UML personally, however; I felt it should be Mentioned, es the extension developer is some who has done a lot of the work on VSCode, so he knows what he is doing. IMO this developers extensions are better than the average wild 3rd party extension.

---

_"Its important to note here that the above extensions use a couple of different methods for generating diagrams, as well as data types for rendering them. Most use markdown for creating diagrams, but I know at least one uses SVG, so their quality, look and feel varies from one extension to the next.

---