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

Question

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

node.jsvisual-studio-codeuml

7

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

我在 Visual Studio 中发现可以像这个示例中那样实现。

在 VsCode 中应该怎么做呢？

谢谢！

- R H

2

说实话，如果你想要一个可以为你生成代码的图表，目前还没有什么很好的选择。不过，有一些很酷的工具，比如Diagram.io和Mermaid，可以帮助你创建面向对象的图表和流程图。 - JΛYDΞV

1

@JayDev 这个回答值得成为一个答案。如果你写了一个，让我知道，这样我就可以点赞了 :-) - Christophe

1

@Christophe 当然可以，非常感谢您让我知道这个评论是值得关注的。我尝试通过在答案中添加一些具体信息来改进原始评论，使其成为一个更全面的信息帖子。如果您认为我写的答案比原始评论更好，或者如果您认为评论会成为更好的答案，因为它简短、甜美且直截了当，请告诉我。我还是有点新手，我发现回答SO问题是一项不容易掌握的技能。 - JΛYDΞV

1

@JayDev 是的，我看到了。我很惊讶你有这么多要说并且已经点赞了。我认为这对于任何想快速将一些UML添加到他们的项目中的人都会很有帮助;-) - Christophe

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JΛYDΞV · Accepted Answer

更新日期：2021年12月22日

看我的个人资料，任何人都能发现我是一个VS Code的爱好者。我喜欢VS Code，但这并不意味着我在所有方面都使用VS Code。在学习了几个Java GUI设计学期并为一家小企业使用JavaFX进行了一些工作之后，我发现，在专业和生产使用方面，你无法击败IntelliJ。问题具体针对VSC ode，本答案的其余部分也是如此，但我想提一下，尽管我使用 JetBrains IntelliJ IDE Ultimate ed.，该插件可在JetBrains社区版中免费提供。

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

尽管我个人最喜欢的UML工具是IntelliJ的Diagram插件，但我注意到，许多使用IntelliJ的人仍然默认使用Plant UML，这种版本适用于VS Code（或许需要考虑一下这点？）

更新日期：2021年6月24日16

编辑：

"@Christophe在下面的评论区问我是否有使用Round-Trip Engineering的经验——我不会解释细节——但这个问题让我意识到，为了使我的答案准确，我需要编辑掉一些不准确之处。"

VS Code中的UML支持

我想通过展示读者VSCode提供的UML支持和UML工具来回答这个问题，并解释这实际上对于UML工具能力意味着什么。

你问："VSCode是否支持Node.js的UML？这个问题的答案并非是非黑即白的。@Christophe在下面的评论中指出，VSCode不同于IDE（这可能有些令人困惑，因为Visual Studio是一个IDE）。VSCode是一个编辑器，所以与Visual Studio 2021不同，VSCode不支持许多像UML这样的功能，而且就编辑器而言，像UML这样的支持大多是通过第三方开源软件获得的。所以，是的，VSCode通过使用第三方扩展支持UML，尽管，什么是UML支持？

UML支持是什么样子的？

我一直认为UML是一种伪语言，可以转换成面向对象的代码，反之亦然：如果像Java或C++这样的语言正确格式化其代码，则可以将代码转换为UML图表，但事实证明我对理解只有一半是正确的。最基本的UML形式不会为语言添加任何功能，也不会改变或修改语言。

统一建模语言（UML）是一种语言，它实现了用于创建软件工程蓝图（或图表）和指定语义的图形符号和交换格式。因此，换句话说，笔和纸自带对UML的支持。以这样的方式看它，VSCode确实具有支持，但是，与Visual Studio、IntelliJ和ECLIPSE等IDE中通常与UML耦合的其他功能（或工具）不同，VSCode不支持额外的功能。

黑白两面的答案是这样的：

白：如果“支持”被定义为简单生成UML图表，则可以通过安装第三方扩展程序在VSCode中获得支持。在本回答的底部是扩展列表。需要注意的是，对于生成图表，语言不必是Node.js，它可以是任何语言。

黑：如果您的意思是使用VSCode扩展程序创建的图表生成抽象类，则VSCode不提供该级别的支持，您最可能需要使用更流行的IDE来获得支持。

VSCode扩展程序支持UML：

#01 | NGRX-UML @"immament.vscode-ngrx-uml" 我没有使用过这个，也许它具有从代码生成UML或从UML生成面向对象类的功能。我认为它相对较新，因为我不记得它。

#02 | UMLet @"theumletteam.umlet" 这个与大多数UML扩展程序一样：UMLLet使用Markdown（MD）创建图表。我不认为这样的工具非常有用，但这是一个选项。

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

与其编译成Markdown格式，此实际生成SVG文件，我认为这非常酷。此扩展的README.md文档声称使用该工具是一个快速的过程，但我不同意。

#04 | Markdown预览Mermaid支持 @ "bierner.markdown-mermaid"

我非常喜欢Mermaid用于流程图，但个人不会将其用于UML，然而;我认为应该提及该开发者，因为他在VSCode上做了很多工作，所以他知道自己在做什么。在我看来，这位开发者的扩展比普通的第三方扩展更好。

“重要的是要注意，上述扩展使用了几种不同的方法来生成图表，以及用于呈现它们的数据类型。大多数使用Markdown创建图表，但我知道至少有一种使用SVG，因此从一个扩展到下一个，它们的质量、外观和感觉各不相同。”