html - 基于 Javascript 的 UML 图编辑器

Question

我正在寻找一个基于 HTML5/JS 的 UML 编辑器库，能够支持自定义 UML 编辑器开发，主要用于类图，最终用于包和组件图。

我的具体要求:

• 支持 UML 类图的基本元素(强制)和组件和包(可选):类、属性、方法、原型(prototype)、关联(各种风格)、泛化等。
• 工具箱中的拖放功能(可选)
• XMI 支持(可选)
• 纯 JS/HTML5 最终使用一些知名库
• 对模型逻辑结构的良好控制和迭代模型的良好接口(interface)

我已经看过其中的几个(GoJS、Jointjs 等)，但希望看到所有可能的选项以及一些建议。

谢谢!

Answer 1

有一些库可以根据这些要求生成 UML 图。

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

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

• mxgraph是一个图书馆 构建一个 UML 编辑器，如 draw.io . 创建的 block 是交互式的，因此用户可以移动或调整 block 的大小 阻止、修改文本、添加或删除关系。

• gojs是另一个商业图书馆，但它提供可用于学术目的的免费许可证。创建UML编辑器也是合适的选择，有许多现成的图表可用。创建 block 后，用户可以移动它们，修改文本和关系；以及其他不同图表的许多其他功能。

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

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

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

还有其他库如:

• D3
• FabricJS
• paperJS
• JsPlumb
• p5.js
• Cytoscape.js
• mermaid

它们为图表提供基本组件，但它们中的大多数没有内置编辑器的功能，例如拖放和 block 编辑。另一方面，开发人员可以创建不同的图表和绘图组件，这些库可以使用这些组件。它们可能不是为用户创建完全交互式和可编辑图表的最佳选择。