10 JavaScript libraries to draw your own diagrams

Tweet about this on TwitterShare on FacebookBuffer this pageShare on RedditShare on LinkedInShare on Google+Email this to someone

It’s limitless what you can render in a browser today using Javascript. In a previous post we have presented a list of online modeling tools which allow creating diagrams directly in the browser. Most of these tools use Javascript to render shapes and interact with them. In the actual post we present a list of 10 Javascript  libraries that could be used to create a diagramming tool.



Some of these libraries have high level support for advanced features (e.g., ready to use shapes, palette, drag/drop,…), while others present a low level drawing features.  Both open source and commercial libraries are covered. A comparative table is presented at the end of the post.


JointJS is a JavaScript diagramming library. It can be used to create either static diagrams or fully interactive diagramming tools and application builders.

Here are some of its features:

  • basic diagram elements (rectangle, circle, ellipse, text, image, path)
  • ready-to-use diagram elements of well-known diagrams (ERD, Org chart, FSA, UML, PN, DEVS, …)
  • custom diagram elements based on SVG or programmatically rendered
  • interactive elements and links
  • connecting diagram elements with links
  • customizable links, their arrowheads and labels
  • magnets (link connection points) can be placed basically anywhere
  • hierarchical diagrams
  • serialization/deserialization to/from JSON format
  • zoom in/out
  • touch support


Rappid is the commercial extension of JointJS. It’s a set of JointJS plugins and other components that gives more possibilities and ready to use features when creating a diagramming tool.

Here are some of its features:

  • Real-time collaboration
  • Copy, cat and past with HTML 5 loacalStorage support
  • Manipulate more elements in one go.
  • validate your documents
  • local storage
  • Undo and Redo
  • Modal and non-modal dialog boxes
  • Inline Text editor for any SVG text
  • Auto-layout of directed graphs
  • Svg export
  • A set of ready to use shapes for ERD, UML, ORG, BPMN


MxGraph is an interactive JavaScript HTML 5 diagramming library. You include it as a JavaScript link in your HTML file and you instantly have access to the most functional native browser diagramming component available. This library is used in Draw.io. The library is developed since 2005 and supports even IE 6.

The mxGraph package contains a client software, written in JavaScript, and a series of backends for various languages. The client software is a graph component with an optional application wrapper that is integrated into an existing web interface. The client requires a webserver to deliver the required files to the client or can be run from the local filesystem without a webserver. The backends may be used as is, or they may be embedded into an existing server application in one of the supported languages.


GoJS is a feature-rich JavaScript library for implementing interactive diagrams across modern browsers and platforms. GoJS makes constructing diagrams of complex Nodes, Links, and Groups easy with customizable templates and layouts.

GoJS offers many advanced features for user interactivity such as drag-and-drop, copy-and-paste, transactional state and undo management, palettes, overviews, data-bound models, event handlers, and an extensible tool system for custom operations.


Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library. Raphaël 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.


Create Visio like drawings, diagrams or an workflow editor with the Draw2D Javascript library. The User interface allows interactive drawing by using your standard browser. Draw2D uses Raphael.


D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.


Fabric is a javascript HTML canvas library. You can create and populate objects on canvas; objects like simple geometrical shapes or complex shapes consisting of several paths. Fabric also has SVG-to-canvas (and canvas-to-SVG) parser.


Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.


jsPlumb provides a means for a developer to visually connect elements on their web pages. It uses SVG in modern browsers, and VML on IE 8 and below.

Comparative table of JavaScript drawing libraries

To finish here is a basic comparative table between the presented libraries.

Library License Language / infrastructure high/low level built-in editor Github (04/02/2015)
high No 1388 stars
265 forks
Rappid Commercial
1 500,00 €
high Yes
Mxgraph Commercial
4300.00 €
high Yes
GoJS Commercial
High Yes
Raphael MIT HTML
low No 7105 stars
1078 forks
Draw2D GPL2
medium No
low No 36218 stars
9142 forks
low No 4127 stars
705 forks
low No 4887 stars
496 forks
medium No 2161 stars
563 forks

Bonus (04/07/2015)

This post has received a considerable  amount of attention in the last few days, specially as part of the discussion on Hacker News (thanks for that!). We were glad to receive several feedbacks and testimonies from  people using the cited libraries and to learn about some interesting new ones. Here is a bonus extension to the post based on the discussion so far.

  •  p5.js: A JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
  • Cytoscape.js: An open-source  graph theory library that can be used for graph analysis and visualization.
  • mermaid: Fan of Markdown?  mermed is a markdown-like script language for generating Flowcharts, Sequence Diagams, and Grantt Diagrams from text via javascript.
  • dagre-d3: A javascript library that acts as a front-end of dagre (javascript library to lay out directed graphs on the client side), providing the actual rendering using D3.

Do you think we are missing something? Have anything to say? Let us know by leaving a comment below!

Featured image by Capture Queen

Tweet about this on TwitterShare on FacebookBuffer this pageShare on RedditShare on LinkedInShare on Google+Email this to someone
  1. James Colliander
  2. Darcy Parker
  3. Darcy Parker
  4. Melani
  5. Daniel
  6. Daniel
  7. Antonio Carrasco Valero
    • Mark
    • Taufik
      • Jordi Cabot
  8. Hugo Bruneliere
  9. Ananthram
  10. Kevin
  11. Hoffit
  12. Meppy


Your email address will not be published. Required fields are marked *