【问题标题】:VS Code - Generate UML from a node.js projectVS Code - 从 node.js 项目生成 UML
【发布时间】:2021-09-04 03:29:05
【问题描述】:

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

我发现在 this 示例中的 Visual Studio 中是可能的。

vsCode 应该怎么做?

谢谢!

【问题讨论】:

  • 老实说,如果您想要一个为您生成代码的图表,那么至少现在还没有什么好东西。有一些很酷的工具,例如 Diagram.io 和 Mermaid 可以帮助您创建 oop-diagrams 和程序流程图。
  • @JayDev 这应该成为一个答案。如果你写了一个,请告诉我,这样我就可以投票了:-)
  • @Christophe 当然 Christophe,很高兴你让我知道该评论值得提问。我试图通过在答案中添加一些细节来改进原始评论,因此总体而言,这是一篇信息量更大的帖子。如果您认为我写的答案是对原始评论的改进,或者您认为该评论会做出更好的答案,请告诉我,因为它简短、甜美且直截了当。我对堆栈溢出还是有点陌生​​,我发现回答 SO 问题是一项不容易掌握的技能。
  • @JayDev 是的,我看到了。我很惊讶地看到你还要说多少并且已经投票了。我认为这对于想要快速将一些 UML 添加到他们的项目中的任何人都会有所帮助;-)

标签: node.js visual-studio-code uml


【解决方案1】:

于 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 的 Diagrams 插件,但许多使用 IntelliJ 的人仍然默认使用 Plant UML,它有一个可用于 VS Code 的版本(也许是有什么要考虑的?)



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


编辑:

"@Christophe 在下面的 cmets 部分中询问我是否有任何使用 Round-Trip Engineering 的经验 - 我不会解释细节 - 但这个问题让我意识到为了让我的回答正确,我需要修改一些不准确的地方。”





VS 中的 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 是一种可以转换为 OOP 代码的伪语言,反之亦然:如果 Java 或 C++ 之类的语言正确地格式化了它们的代码,则可以将代码转换为 UML 图,但因为它原来我的理解只对了一半。 UML 最基本的形式不会向语言添加任何功能,也不会改变或改变语言。 UML 或统一建模语言是一种语言,它实现了图形符号和交换格式,用于为工程软件创建蓝图(或图表)并指定语义。因此,换句话说,笔和纸带有“开箱即用”对 UML 的支持。如果这样看,是的 VSCode 支持,但是,VSCode 不支持在 Visual Studio、IntelliJ 和 ECLIPSE 等 IDE 中通常与 UML 结合的额外功能(或工具)。




最后的答案是???

好吧,它的黑白...



白色:

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


黑色:

答案的黑边是,如果通过 Generate,您的意思是从您使用 VSCode 扩展创建的图表中生成抽象类,那么 NO VSCode 不提供这种级别的支持,并且您很可能需要使用更流行的 IDE 之一来获取它。




支持 UML 的 VSCode 扩展


#01 | NGRX-UML @ “immament.vscode-ngrx-uml”
  • 所以我没有使用过这个,也许它有一些功能可以从代码生成 UML,或者从 UML 生成 OOP 类。我认为它相对较新,因为我不记得了)
#02 | UMLet @ “theumletteam.umlet”
  • 这个类似于大多数 UML 扩展:UMLLet 使用 Markdown (MD) 来创建图表。我不认为这样的工具很有用,但它是一种选择。
#03 | Draw.io 集成(非官方)@ “hediet.vscode-drawio”
  • 不是编译成markdown,而是实际生成SVG文件,IMO很酷。这个扩展的 README.md 文档声称使用该工具是一个快速的过程,我不同意。
#04 | Markdown 预览美人鱼支持@ “bierner.markdown-mermaid”
  • 我真的很喜欢 Mermaid 的流程图,但是我个人永远不会将它用于 UML;我觉得应该提一下,因为扩展开发人员是一些在 VSCode 上做了很多工作的人,所以他知道自己在做什么。 IMO 这个开发者扩展优于普通的wild 3rd 方扩展。


_"这里需要注意的是,上面的扩展使用了几种不同的方法来生成图表,以及用于渲染它们的数据类型。大多数使用markdown来创建图表,但我知道至少有一个使用SVG,所以它们的质量、外观和感觉因一个扩展而异。


【讨论】:

  • 感谢分享!我想补充一点,VSCode 主要是一个文本编辑器,而不是像 Visual Studio 这样的 IDE。此外,还有一种“文档即代码”的趋势,旨在将图形模型建立在文本上,如美人鱼、植物等,具有易于集成到 git 的优势。最后是一个好奇的问题:您在实际项目中使用 routrip 工程(图形到代码,反之亦然)的经验是什么?我很久以前在实验中使用过它,但模型最终的实现细节非常混乱,很难掌握全局
  • @Christophe 所以我之前听说过 RoundTrip Engineering,但是在你问我之前我并不真正知道它是什么。我查看了 wiki 以确保我的脑海中有一个准确的图像。原来我以为我知道它是什么但我不知道,然后我开始认为可能是 Christophe 向我询问了这个问题,因为它可能在 VSCode 中可以实现。你的问题最终导致我对 RoundTrip 工程和 UML 进行了大量研究,我最终重新学习了很多,这让我能够编辑我的答案,使其更准确。
  • @Christophe 但是我很好奇你对往返工程有什么要说的?是你在 VSCode 中实现的吗?
猜你喜欢
  • 2023-03-20
  • 1970-01-01
  • 1970-01-01
  • 2013-01-03
  • 2011-09-04
  • 2022-06-16
  • 2015-07-31
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多