Javascript Diagram Library [closed]

Question

I'm looking for a good JavaScript Diagram library for a project, can be commercial.

Mandatory Requirements:

• Highlight connected lines and components when clicking a component (or hovering)
• Ability to switch the image of a component (to represent a group of components)
• Zoom in/out capabilities
• Being able to define a custom behavior for supporting left-side right-side dragging
• Ability to generate a linkable minimized map of the diagram

So far I checked GoJs, JointJS and Draw2D, JointJS looked the most fit, but i'm not sure. Also documentation and community is important. So if anyone has experienced with one of those libraries or other library, please tell me about your experience.

Help me choose the right library for the project with the capabilities that I mentioned.

Followthrough

please check the number of upvotes before closing. this is useful information and its super snobby to do this. – Stets

+1 for JointJS. Easy to get started - it comes with a lot of capability right out of the box, so you can do a lot with very little code, and it lends itself to being extensible. Find the open source version in stead of the paid version/free trial, which they advertise on the site. – Erroneous

Answer 1

I highly recommend GoJS and really enjoy building apps with it. They give so many more examples than any other diagramming framework that I could find.

Also they allow you to use the full API on a trial basis for as long as you would like.

Fire

I do technical support at MindFusion, check our JavaScript diagram control at and some sample projects. – Mors

Answer 2

I will throw in the commercial yFiles for HTML, which, to the best of my knowledge is the most complete graph drawing solution for the HTML5 platform (no IE8 support, though):

Highlighting is a built-in feature and you can easily customize the highlighting with custom Canvas or SVG/CSS drawings. The Graph Viewer Demo shows this feature when you hover over elements, e.g.

You can use any visualization you want for your entities and they can switch depending on external data, zoom-level, time, etc. The viewer demo above also shows this feature. A level of detail style for nodes is used in the Organization Chart Demo

Zooming of course is supported.

User interactions can be customized to a very high degree. Please see the demos prefixed "demo.yfiles.input" in the demo page.

A customizable minimap ("overview") is also supported and shown in the above demos.

yFiles for HTML is said to have the best documentation - see for yourself in the online documentation.

Being a commercially supported product that is not free, there is not a big community, though. But the commercial support should make this a minor issue.

Disclosure: I work for the company that creates that library, however on SO I do not represent my employer.

Dimitris

Answer 3

Off topic as the question is, we've been building mxGraph since 2005. You can get an idea of the capabilities at draw.io

Selima