基于Javascript的UML图编辑器

Question

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

我的具体要求：

• 支持UML类图（必需）和组件和包（可选）的基本元素：类，属性，方法，构造型，关联（所有类型），泛化等。
• 拖动＆amp;从工具箱中删除功能（可选）
• XMI supprt（可选）
• 纯JS / HTML5，最终有一些着名的库使用
• 可以很好地控制模型的逻辑结构和一个很好的迭代模型的界面

我已经看过他们中的几个（GoJS，Jointjs等），但希望看到所有可能的选项，也许还有一些建议。

谢谢！

Answer 1

查看“用于UML2建模的jsUML2：HTML5 / javascript库”。可以阅读简短的介绍here

Answer 2

有些库可以生成符合这些要求的UML图。

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

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

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

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

Christophe VG的

• UmlCanvas作为js库，它从文本信息中提供UML图。图表以您可以移动块的方式响应;和关系线是聪明的，以保持设计漂亮。但不仅仅是那个。

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

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

还有其他库，例如：

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

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