29

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

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

我知道这个统一建模语言工具列表，但它们似乎提供了绘制 UML 图的可能性，而我需要的是

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

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

4

4 回答 4

8

看一下

James Shore 在线查看器。这是我遇到的最接近Javascript 的 UML 类图。此链接也可能对您有所帮助。事实上，它确实带来了另一种表示 UML 类图的方法。

于 2014-11-18T20:48:45.667 回答
4

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

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

于 2014-02-14T10:03:35.617 回答
4

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

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

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

希望这个对你有帮助。

于 2014-02-14T10:18:34.753 回答
3

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

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

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

有效的 XHTML

  • gojs是一个商业图书馆，它由可用于学术目的的免费许可证提供。如果您想创建图表编辑器，这也是合适的选择。有大量现成的图表可用，可以交互移动块、修改文本和关系；以及其他不同图表的许多其他功能。

  • JointJs 核心库在 Mozilla Public License 下是开源的，这意味着您必须包含版权，但您可以将其用于商业目的。它依赖于 jQuery 3.1.1、Lodash 3.10.1、Backbone 1.3.3。（Rapppid正在使用这个库）它提供了许多现成的图表元素，这些元素具有响应性和交互性。用户可以移动块，添加和删除关系和关节，放大和缩小。

  • Draw2D是用于创建 Visio 之类的绘图、图表或工作流的库。社区版差不多 5 欧元就可以买到。它确实提供了类似 Visio 的块和图表，它们可以交互地调整大小、移动块和修改文本和关系，以及对块进行分组、放大和缩小。这可能是构建图形编辑器工具的不错选择。 有效的 XHTML

  • Christophe VG 的UmlCanvas作为 js 库，它提供来自文本信息的 UML 图。这些图表以您可以移动块的方式进行响应；关系线很聪明，可以保持设计的美观。但不止于此。 有效的 XHTML

  • PlantUML是一个 UML 工具，它可以通过 jQuery 库（也可以使用其他语言的库）从文本信息中提供 UML 图表，但是图表没有响应性。

  • Raphaël是一个小型 JavaScript 库，可以简化您在 Web 上使用矢量图形的工作。这不是创建图形编辑器的最佳工具，但它为简单的用户交互（例如移动和弯曲）提供了闪亮而漂亮的图表

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

于 2018-03-24T14:19:31.340 回答