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 上使用矢量图形的工作。这不是创建图形编辑器的最佳工具,但它为简单的用户交互(例如移动和弯曲)提供了闪亮而漂亮的图表

其他库,如D3FabricJSpaperJSJsPlumbp5.jsCytoscape.jsmermaid也提供了图表的基本组件,但它们没有内置编辑器。但是这些库中有更多不同的图表和绘图组件可用。它们可能不是为用户创建完全交互式和可编辑的图表(包括图形编辑器)的最佳选择。

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