10+ JavaScript libraries
to draw your own diagrams
(2020 edition)
by Hamza Ed-douibi
Feb 18, 2020
tools,cloud & web engineering,Model-driven Engineering
46 comments

you can render anything you want in your browser with JavaScript.

Good examples are this list of online modeling tools
that help you to easily create UML(or ER,BPMN,...) diagrams
directly in the browser.

Most of these tools use JavaScript
to render graphical shapes
and interact with them.

But what if you want to create your own kind of diagrams
or build your own editor?

Don't worry,
we have you covered.

In this post,
we present a list of 10+
JavaScript drawing libraries
to code your own visual tool
and/or
add some graphical modeling functionalities
to your software.

We split the set of JavaScript drawing libraries
into two main categories:
1 - libraries with explicit support
for software models
(e.g. JavaScripts libraries with predefined flowcharts or UML shapes)
and
2 - libraries with core support for drawing graphs
(and that could then be adapted to cover graphical modeling languages).

In short,if you're looking for an almost ready-to-go way
to integrate a JavaScript modeling library into your tool
go for a library from the first group.

If you're looking for a more tuneable solution
and have the time and skills
to do some programming,
consider taking a library
from the second group
and personalize it as much as you want.

JavaScript libraries for drawing UML(or BPMN or ERD...) diagrams

JointJS

JointJS can be used to create either static diagrams
or fully interactive diagramming tools
and application builders.

It has also a commercial version(Rappid,see below)

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 shapes 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

(and see this JointJS post for a more detailed overview of the tool)

Rappid

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,cut and paste via HTML5 local storage 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 BPMN

MxGraph

MxGraph is an interactive JavaScript HTML5 diagramming library.

mxGraph is a fully client-side library
that uses SVG and HTML
for rendering your models.

This library is used,
for instance,
in Draw.io.

The library is developed since 2005.

mxGraph uses no third-party software,
it requires no plugins
and can be integrated into
virtually any framework.

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 a existing web interface.

The client requires a web server
to deliver the required files to the client
or can be run from the local filesystem
without a web server.

The backends may be used as is,
or they may be embedded into
an existing server application
in one of the supported languages.

GoJS

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.

They provide over 150 interactive samples
to help you get started with diagrams
such as
BPMN
flowchart,
state chart,
visual trees,
Sankey,
and data flow.

The API is very well documented
to make sure you can start using in no time.

We covered extensively GoJS in this post.

jsUML2 Library

A HTML5/javascript library for UML2 diagramming.

Its main objective is to provide web developers
an easy way to visualize
and edit UML models
in their our own websites,
without other external dependencies
and fully executable
on the client-side via the browser,
unlike other tools in this list.

The jsUML2 library provides an API
to allow web developers
to include editable diagrams
in their own websites
makeing use of the HTML5 technologies supported
by the newest web browsers,
as well as by current mobile devices.

It offers a broad range of interesting features
for UML-specific models.

In particular,
it supports all major UML types of diagrams:

• Use case diagrams
• Class diagrams
• Componentt diagrams
• Sequence diagrams
• Activity diagrams
• Statecharts

with support of style edition
for diagram elements(size,position,color,etc.),
stereotypes definition,
import/export of UML diagrams to XML
and image generation.

The tool was discontinued in 2017
but it remains a strong option
for all of you looking for a UML JavaScript library.

Mindfusion Diagram Library

The diagram tool is written 100% in JavaScript
and uses the HTML5 Canvas element for drawing.

The component can use either jQuery or Microsoft Ajax library
for browser independence layer and type system implementation.

James Colliander on April 5, 205 at 9:06 pm

I like woring with Mermaid (http://knsv.github.io/mermaid/index.html)
to create flowcharts.

The workflow is based on simple text files
parsed through Markdown.