在javascript中为现有类生成UML图的工具[关闭]答案

【问题标题】：tools to generate UML diagrams for exisiting classes in javascript [closed]在javascript中为现有类生成UML图的工具[关闭]
【发布时间】：2014-03-08 21:56:43
【问题描述】：

项目不断发展，似乎有必要将项目中存在的类之间的关系可视化。其中一些是独立的，其中一些是从其他人那里继承而来的。

我正在寻找可视化这些关系的工具。我知道JavaScript libraries for drawing UML class diagramms 已经在这里提出了类似的问题，但据我所知，没有给出适合我需要的答案。

我知道List of Unified Modeling Language tools，但它们似乎提供了绘制 UML 图的可能性，而我需要的是

独立工具
从我的类定义的 javascript 代码生成 UML 图

在 Ruby 中，此工具称为 RailRoady。如果 JavaScript 中也存在这样的工具，那将有很大的帮助。

【问题讨论】：

我不确定，但如果有一个工具可以做到这一点（特别是如果你使用一些流行的 OOP JavaScript 风格的类，例如 TypeScript），那就是 jetbrains.com/webstorm/features
stackoverflow.com/q/943212/1048572的可能重复
这个问题是不是因为它要求软件推荐而离题？

标签： javascript uml diagrams

【解决方案1】：

这种逆向工程工具不太可能存在，仅仅是因为 JavaScript 中没有明确定义的类概念。不同的框架和不同的人使用不同的代码模式来实现 JavaScript 对象，这些对象充当生成实例的类蓝图。

对于 ES6 类定义，可以直接自动生成 UML 类模型，并使用一些图形布局算法生成相应的图表。

【讨论】：

【解决方案2】：

一些静态分析工具可能会对您想要实现的目标有所帮助。我一直主要使用 jscomplexity 项目 (jscomplexity.org) 进行质量控制，但我记得更高级的 TAJS 项目，我刚刚查看了http://cs.au.dk/~amoeller/talks/TAJS2.pdf 的演示文稿 PDF，如果您查看幻灯片 9，JavaScript 的输出抽象状态看起来可能更适合您的要求。

TAJS 在 github (https://github.com/cs-au-dk/TAJS) 上有它的源代码，所以如果您有兴趣使用它的某些部分，应该是可能的（如果许可允许的话）。

作者还发布了一个用于显示代码调用图或层次结构的 Eclipse 插件。

希望这会有所帮助。

【讨论】：

听起来很不错，似乎就是我要找的东西。不幸的是，主页上的链接已损坏，插件不可用。我没有成功从源代码编译它。看来这个项目已经死了。顺便说一句，同样的故事还有另一个类似的 Eclipse 插件JS/UML。

【解决方案3】：

看看

James Shore online viewer。这是我遇到的关于 Javascript 的最接近的 UML 类图。这个link 也可能对您有所帮助。事实上，它确实带来了另一种方法表示 UML 类图。

【讨论】：

不错的链接，尤其是 James Shore 开源使用的JavaScript version of Graphviz，但两个链接至少有 1 年不活动
@xmojmr 在某些情况下，1 年的不活动期可能是个问题。但是，如果项目成熟了，它会保持画图正常——不管 1 年不活跃。最好的办法是检查这些工具，看看它们对你的效果如何，而不是将项目的最后活动日期作为“试金石”。

【解决方案4】：

有几个库可以生成UML类图（网上没有服务、编辑器和 Web 应用程序）。主要问题是图形组件设计和图表的响应水平。

如果你想创建静态图表组件，有很多库，但如果你想制作一个类似于运行时图形编辑器的工具，那么你的选择是有限的：

mxgraph 如果你想的话构建您自己的图形编辑器，例如 draw.io。图表具有响应性和交互性，用户可以移动或调整大小阻止、修改文本、添加或删除关系。

gojs 是一个商业图书馆，它由可用于学术目的的免费许可证提供。如果您想创建图表编辑器，这也是合适的选择。有大量现成的图表可用，可以交互移动块、修改文本和关系；以及其他不同图表的许多其他功能。
JointJs core library 在 Mozilla Public License 下是开源的，这意味着您必须包含版权，但您可以将其用于商业目的。它依赖于 jQuery 3.1.1、Lodash 3.10.1、Backbone 1.3.3。（Rapppid 正在使用这个库）它提供了许多即用型图表元素，这些元素具有响应性和交互的。用户可以移动块、添加和删除关系以及关节，放大和缩小。
Draw2D 是用于创建 Visio 之类的绘图、图表或工作流的库。社区版差不多 5 欧元就可以买到。它确实提供了类似于 Visio 的块和图表，它们可以交互地调整大小、移动块和修改文本和关系，以及对块进行分组、放大和缩小。这可能是构建图形编辑器工具的不错选择。
UmlCanvas by Christophe VG 作为 js 库，它提供来自文本信息的 UML 图。这些图表以您可以移动块的方式进行响应；关系线很聪明，可以保持设计的美观。但不止于此。
PlantUML 是一个 UML 工具，可以通过 jQuery 库（也可以使用其他语言的库）从文本信息中提供 UML 图表，但是图表没有响应性。
Raphaël 是一个小型 JavaScript 库，可以简化您在 Web 上处理矢量图形的工作。这不是创建图形编辑器的最佳工具，但它为简单的用户交互（例如移动和弯曲）提供了闪亮而漂亮的图表

D3、FabricJS、paperJS、JsPlumb、p5.js、Cytoscape.js 和 mermaid 等其他库也提供了图表的基本组件，但它们没有内置在编辑器中。但是这些库中有更多不同的图表和绘图组件可用。它们可能不是为用户（包括图形编辑器）创建完全交互式和可编辑图表的最佳选择。

【讨论】：

一份不错的清单——但请注意：其中一些项目已被放弃。