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

Question

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

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

我知道这个List of Unified Modeling Language tools，但他们似乎有可能绘制UML图，而我需要的是

1. 一个独立的工具
2. 从我的类定义的javascript代码生成UML图表

在Ruby中，此工具称为RailRoady。如果这样的工具也在JavaScript中退出，那将是非常有用的帮助。

Answer 1

看一下

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

Answer 2

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

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

Answer 3

一些静态分析工具可能有助于您实现的目标。我一直在使用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插件，用于显示代码的调用图或层次结构。

希望这个对你有帮助。

Answer 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的块和图表，它们可以交互调整大小，移动块和修改文本和关系，以及对块进行分组，放大和缩小。这是构建图形编辑器工具的不错选择。
• 由Christophe VG编写的UmlCanvas作为js库，它从文本信息中提供UML图。图表以您可以移动块的方式响应;和关系线是聪明的，以保持设计漂亮。但不仅仅是那个。
• PlantUML是一个UML工具，可以通过jQuery库提供文本信息的UML图（其他语言的库也可用），但图表没有响应。
• Raphaël是一个小型JavaScript库，可以简化您在Web上使用矢量图形的工作。这不是创建图形编辑器的最佳工具，但它为简单的用户交互（例如移动和弯曲）提供了闪亮而美观的图表。

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