Free diagrams javascript libraries

By Maurizio Farina | Posted on Decemeber 2017 | DRAFT

The idea behind this post is to use a JavaScript library to build a Web Modeler for diagrams such as BPMN, UML, Graphs and so on but with features to implement complex visualizations across modern web browsers.

A list of features to consider:

  • Permissive open source license: MIT for example
  • Browser compatibility
  • Shapes:
    • Supporting base shapes sch as Rect, Circle, Ellipse and etc.;
    • Supporting specialized shapes such as UML, BPMN, Organization Charts and so on;
    • Custom Shapes Via SVG Or Programmatically Rendered.
  • Links:
    • Connecting Diagram Elements With Links;
    • Customizable Links;
    • Arrowheads And Labels,
    • Links Smoothing (Bezier Interpolation) & Smart Routing.
    • Magnets/Ports (Link Connection Points) Can Be Placed Basically Anywhere.
  • Serialization/Deserialization To/From JSON Format.
  • Event Handlers: You Can React On Any Event That Happens Inside The Paper.
  • SVG Library Included
  • Data binding and models
  • User interactivity:
    • drag-and-drop, copy-and-paste, in-place text editing, tooltips, context menus,
    • Zoom In/Out: Mouse wheel to zoom
    • Gestures: Pinch to zoom, : desktop, Two finger trackpad up or down to zoom, tap to select
    • Multiple selection via modifier key (shift, command, control, alt) + tap
    • Animations
    • Palettes
  • Fast: Ability To Render Hundreds (Or Even Thousands) Of Elements And Links With Instant Interaction.
  • Demos: a richful collections of demos
  • MVC Architecture.

Cytoscape.js

GitHub | Demo

Cytoscape.js is an open-source graph theory (a.k.a. network) library written in JS. You can use Cytoscape.js for graph analysis and visualisation.

Cytoscape.js allows you to easily display and manipulate rich, interactive graphs. Because Cytoscape.js allows the user to interact with the graph and the library allows the client to hook into user events, Cytoscape.js is easily integrated into your app, especially since Cytoscape.js supports both desktop browsers, like Chrome, and mobile browsers, like on the iPad. Cytoscape.js includes all the gestures you would expect out-of-the-box, including pinch-to-zoom, box selection, panning, et cetera.

Cytoscape.js also has graph analysis in mind: The library contains many useful functions in graph theory. You can use Cytoscape.js headlessly on Node.js to do graph analysis in the terminal or on a web server.

vis.js

GitHub | Demo | Apache 2.0 License and MIT License

Interesting project on vis.js: https://sbd.danilop.net/

Raphaël

GitHub | Demo | MIT License

Raphaël is a small JavaScript library that uses the SVG W3C Recommendation and VML as a base for creating graphics.

This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later.

Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Documentation is here

jsPlumb

GitHub | Demo | MIT/GPLv2 licensed | Commercial Release: Toolkit Edition

jsPlumb is a toolkit to visually connect elements on their web pages. It uses SVG and runs on all browsers from IE9 and later.

The final version of jsPlumb to support IE8 was 1.7.10. You can still get 1.7.10 from a tag, if you need it.

This project is the 'Community Edition' of jsPlumb. The 'Toolkit Edition' is a commercially-licensed wrapper around this.

JointJS

Mxgraph

GitHub | Demo | Apache 2.0 license

Draw2D

D3

p5

GitHub | Demo

Fabricjs

Paperjs

Comparative Tables

Library License Language / infrastructure high/low level built-in editor Github