Javascript based UML diagrams editor

Question

I'm looking for a HTML5/JS based UML editor library, able to support custom UML editor development, for basically Class Diagrams, eventually Package and Component diagrams.

My concrete requeriments:

• support of basic elements of UML class diagram (mandatory) and components and packages (optional): classes, attributes, methods, stereotypes, associations (in all flavours), generalization, etc.
• Drag & Drop capability from the toolbox (optional)
• XMI supprt (optional)
• pure JS/HTML5 with eventually some well-known libraries usage
• a good control over the model's logical structure and a nice interface to iterate the model

I've already seen a couple of them (GoJS, Jointjs, etc) but would like to see all possible options and maybe some recommendations.

Thanks!

Answer 1

There are libraries to generate UML diagram with those requirements.

• JointJs core library is open source under Mozilla Public License, which mean you must include copyright, but you can use it for commercial purposes. It has dependency to jQuery 3.1.1, Lodash 3.10.1, Backbone 1.3.3. (Rapppid is using this library) It provides many ready-to-use diagram elements, which are responsive and interactive. User can move blocks, add and remove relationships and joints, zoom in and out.

• Draw2D is library to create Visio like drawings, diagrams or workflows. The community version is almost 5 euro to buy. It indeed provides Visio like blocks and diagrams, which are interactive to resize, move blocks and modify the text and relationships, and grouping blocks, zooming in and out. This can be a good choice to build a graph editor tool.

• mxgraph is a library to build a UML editor like draw.io. Created blocks are interactive, so the user can move or resize the block, modify the text, add or remove relationships.

• gojs is another library, which is commercial but it provides free licenses available for academic purposes. It is also suitable choice to create UML editor, with many ready-made diagrams available. After creating blocks, user can move them, modify the text and relationships; and many other features for different other diagrams.

• UmlCanvas by Christophe VG as js library which provides UML diagram from textual information. The diagrams are responsive in a way that you can move the blocks; and relationship lines are smart to keep the design pretty. But not more than that.

• PlantUML is a UML tool that can provide UML diagram from textual information by jQuery libraries (libraries in other languages are also available), however the diagrams are not responsive.

• Raphaël is a small JavaScript library that can simplify your work with vector graphics on the web. This is not the best tool to create graph editor, but it provides shiny and beautiful diagrams for simple user interaction (such as movement and bending)

There are other libraries such as:

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

They provide basic components for diagrams, but most of them don't have functionality for built-in editor such as drag and drop, and block editing. On the other hand, developer can create different chart and drawing components, which are available by those libraries. They may not be the best option to create fully interactive and editable diagrams for the users.

Answer 2

Take a look at "jsUML2: HTML5/javascript library for UML2 modeling". A short intro can be read here