3

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!

Improve this question
3
  • -1 for stackoverflow.com/help/dont-ask If you want to see all possible options then use Google (lucidchart, GenMyModel, draw.io, yFiles for html, ...). Your requirements are not clear enough for some relevant recommendations. What is the "custom UML editor development"? Commented Jun 16, 2014 at 5:41
  • You're right xmojmr, I could've definitelly add more specific reqs, I will do it now. I've already googled it, of course, and did some initial investigation, I just wanted to receive some other ideas. Commented Jun 16, 2014 at 6:42
  • probably duplicate of another off-topic question stackoverflow.com/questions/6877121/…. If you contact the authors they may give you their source code so that you can build yet-another-online-uml-editor Commented Jun 16, 2014 at 11:21

2 Answers 2

Reset to default
8

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. Valid XHTML

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

Valid XHTML

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

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

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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

Improve this answer

2 Comments

Thank you, I've already seen this tool. On the first look, it seem pretty complete, but lacks a bit better usability (for example the way it draws the associations is not very nice) and more drag and drop. I will still have to analyse it a bit more though and see how complicated is to extend it.
You can always try to get in touch with the main developer and see what are their plans for the tool.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.