JavaScript libraries for drawing UML class diagramms [closed]

Question

I am looking for a javaScript library which automatically draws UML class diagramms from the code I provide (not yet sure but most probably from xml-files). The classes should have individual features like color or type size. Therefore I am going to adapt the code to my requirements.

I've already come across Raphael and Umlcanvas. Are there any other libraries? Which one should I pick?

Thx in advance for help!

Answer 1

There are many tools that will transform a textual description of a uml model into a graphical representation (see here for a complete list). If it needs to be JavaScript, apart from the ones you mention check Joint, which includes ready to use UML symbols

Answer 2

There are several libraries to generate UML class diagrams (not online services, editors and web applications). The main issues are the graphical component design and level of responsiveness of the diagrams.

If you want to create static diagram components there are plenty of libraries, but if you want to make a tool similar to run-time graph editor then your alternative are limited:

• mxgraph is something if you want to build your own graph editor like draw.io. Graphs are responsive and interactive, and user can move or resize the block, modify the text, add or remove relationships.

• gojs is a commercial library and it is provided by free licenses available for academic purposes. This is also suitable choice if you want to create a diagram editor. There are plenty of ready-made diagrams available, which are interactive to move the blocks, modify the text and the relationships; and many other features for different other diagrams.

• 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.

• 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)

Other libraries such as D3, FabricJS, paperJS, JsPlumb, p5.js, Cytoscape.js and mermaid are also providing basic components for diagrams, but they don't have built-in editor. But there are more different chart and drawing components available in those libraries. They may not be the best option to create fully interactive and editable diagrams for the users (including graph editor).