VS Code - 从 node.js 项目生成 UML

Question

有没有办法在 VsCode 中从 node.js 项目生成 UML？

我发现在 Visual Studio 中这是可能的，就像这个例子一样。

我应该怎么做？

谢谢你！

Answer 1

\n

更新于 2021 年 12 月 22 日

\n\n

因此，任何查看我的个人资料的人都知道我是 VS Code 爱好者。我喜欢 VS Code，但这并不意味着我在所有事情上都使用 VS Code。在学习了几个学期的 Java GUI 设计以及使用 JavaFX 为小型企业做一些副业之后，我发现，对于专业和生产用途，您无法击败 IntelliJ。这个问题是特定于 VSC ode 的，这个答案的其余部分也特定于此，但我确实想提一下，尽管我使用“JetBrains IntelliJ IDE Ultimate ed”。该图表插件可在 JetBrains 社区版中免费使用。

\n

这讨论了 IntelliJ 中的图表：https://philosophy-question.com/library/lecture/read/85355-how-do-i-create-a-class-diagram-in-intellij-community-edition

\n

但我注意到，尽管我个人最喜欢的 UML 工具是 IntelliJ 的图表插件，但许多使用 IntelliJ 的人仍然默认使用Plant UML，它有一个可用于 VS Code 的版本（也许这是需要考虑的事情？）

\n
\n\n

于 2021 年更新 - 2016 年 6 月 - 24 日

\n\n
\n

编辑：

\n

\n

“@Christophe在 \xe2\x80\x94 下面的评论部分询问我是否有使用往返工程的经验，我不会解释详细信息 \xe2\x80\x94 但这个问题让我意识到为了我的答案为了正确起见，我需要删除一些不准确的地方。”

\n

\n\n
\n
\n
\n

VS Code 中的 UML 支持

\n\n

我想通过向读者展示 VSCode 提供哪些 UML 支持和 UML 工具，以及这对于 UML 工具能力而言真正意味着什么来回答这个问题。

\n

您问，“VSCode 支持 Node.js 的 UML 吗？这个问题的答案不是黑白分明的。@Christophe 在下面的评论中指出 VSCode 与 IDE 不同（这可能会令人困惑，因为Visual Studio 是一个 IDE）。VSCode 是一个编辑器，因此与 Visual Studio 2021 不同，VSCode 不支持“开箱即用”的UML 等许多功能，并且随着编辑器的发展，大多数情况下都获得了对 UML 等功能的支持通过第三方开源软件。所以，是的，VSCode 通过使用第三方扩展来支持 UML，但是，UML 支持到底是什么？

\n
\n

UML 支持是什么样的？

\n

我一直认为 UML 是一种可以转换为 OOP 代码的伪语言，反之亦然：如果像 Java 或 C++ 这样的语言正确地格式化其代码，则代码可以转换为 UML 图，但事实证明我我的理解只正确了一半。UML 最基本的形式不会向语言添加任何功能，也不会更改或改变语言。\nUML（即统一建模语言）是一种语言，它实现图形符号和交换格式，用于创建工程软件的蓝图（或图表），并指定语义。因此，换句话说，笔和纸附带了对 UML 的“开箱即用”支持。然而，VSCode 确实支持，但是，VSCode 不支持通常与 Visual Studio、IntelliJ 和 ECLIPSE 等 IDE 中的 UML 结合使用的额外功能（或工具）。

\n\n
\n
\n

最终的答案是？？？

\n

嗯，是黑白的……

\n
\n\n

白色的：

\n

一方面，我会说“是”，只要支持被定义为简单地生成 UML 图。如果是这种情况，那么 VSCode 可以通过安装第 3 方扩展来获得支持。在这个答案的底部是一个扩展列表。需要注意的是，生成图表的语言不一定是Node.js，它可以是任何语言。

\n\n

黑色的：

\n

答案的黑色一面是，如果生成是指从使用 VSCode 扩展创建的图表生成抽象类，那么VSCode不提供该级别的支持，并且您很可能需要使用以下之一流行的 IDE 即可获取它。

\n\n
\n
\n

用于 UML 支持的 VSCode 扩展

\n\n

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

\n

\n
• 所以我还没有使用过这个，也许它有一些从代码生成 UML 或从 UML 生成 OOP 类的功能。我认为它相对较新，因为我不记得了）
\n

\n

#02 | UMLe@ “theumletteam.umlet”

\n

\n
• 这与大多数 UML 扩展类似：UMLLet使用Markdown (MD)来创建图表。我不认为这样的工具非常有用，但它是一种选择。
\n

\n

#03 | Draw.io 集成（非官方）@ “hediet.vscode-drawio”

\n

\n
• 这实际上生成了 SVG 文件，而不是编译为 markdown，在我看来这非常酷。此扩展的 README.md 文档声称使用该工具是一个快速的过程，我不同意。
\n

\n

#04 | Markdown 预览美人鱼支持@ “bierner.markdown-mermaid”

\n

\n
• 我真的很喜欢 Mermaid 流程图，但我个人永远不会将它用于 UML；我觉得应该提到这一点，因为扩展开发人员在 VSCode 上做了很多工作，所以他知道自己在做什么。在我看来，这个开发人员的扩展比普通的第三方扩展要好。
\n

\n\n
\n

\n

_“这里需要注意的是，上述扩展使用了几种不同的方法来生成图表，以及渲染它们的数据类型。大多数使用 Markdown 来创建图表，但我知道至少有一个使用 SVG，所以它们的质量，每个扩展的外观和感觉各不相同。

\n

\n
\n\n