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. JavaScript libraries with predefined flowcharts or UML shapes )
  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. Note that we focus on libraries to draw diagrams, if you just want to render a read-only diagram, you may want to check this list of textual modeling tools.


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

Interested in a library to help you embed UML editors in your application? Check these options!


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 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 HTML 5 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 is an interactive JavaScript HTML 5 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 Development started in 2005 and while the original project is archived, this fork is still continuing the work.

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

MxGraph drawing library example


GoJS is a feature-rich JavaScript/Typescript 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.

GoJS example

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

JsUML2 online UML editor

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.

It comes with a rich set of predefined shapes (for workflow diagrams, process schemas, class diagrams, trees,… check their collection of samples) and the possibility to define your own shapes and customization options (e.g. arrowhead shapes). To facilitate the use of the API, they heavily documented it. You have also automatic graph layout algorithms available.


Nomnoml is a well-known textual modeling tool able to render UML diagrams from textual descriptions, but it also offers a standalone JavaScript library you can use to render diagrams on your own web page. The only dependencies are lodash and dagre.


nomnoml UML example


Similar to nomnoml, Mermaid’s main focus is the generation of diagrams from text files, in this case via a simple markdown-like script language. It depends on d3 and dagre-d3 for providing the graphical layout and drawing libraries. It offers an online editor but you can also directly reuse the packaged Mermaid API to integrate Mermaid in your own developments. It mainly covers sequence diagrams and flowcharts.


Core library for creating and displaying diagrams. It’s used by (the creators of this library) as a building block for a number of other libraries by the same company for specifying business process models, decision models, and case plan models.

For instance, bpmn-js is the diagram.js extension to render BPMN 2.0 diagrams. Beyond using it to build a workflow modeling editor (as they provide already), bpmn-js has been designed with extensibility in mind so you could ”easily” build,  as an example, some kind of execution/simulation engine on top of it.

bpmn-js example


As its name suggests, state.js focuses on modeling hierarchical state machines.  The state.js API offers:

  1. Classes that represent a state machine model (State, PseudoState, Transition, etc.)
  2. An interface and implementation of active state configuration (current state); this allows multiple concurrent instances of a single state machine model
  3. A set of functions that provide the state machine runtime

It is developed in TypeScript and transpiled to JavaScript; you can use it in either language.

drawing state machines in js

Eclipse Sprotty and Eclipse Graphical Language Server Platform (GLSP)

Eclipse Sprotty and the Eclipse GLSP tools help you to create a modeling environment for your own language. So they are not restricted to UML, ER or other specific diagram types. Instead, these tools provide a backend infrastructure (based on a graphical adpatation of the Language Server Protocol) to create your own language and a JS based front-end to build visual editors for it.


JavaScript libraries for drawing graphs

Low-level libraries offering graph-oriented modeling primitives (so, we’re not listing here libraries that just focus on drawing charts for data visualization). In fact, some of them have been used to build the JavaScript modeling libraries listed above.


D3.js is a JavaScript library for manipulating documents based on data. Right now, I would say is the most popular library of its kind.

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. D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. D3’s functional style allows code reuse through a diverse collection of official and community-developed modules.

D3 relationship graphic example


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. It hasn’t been recently updated.


Create Visio-like drawings, diagrams or a workflow editor with the Draw2D Javascript library. The User interface allows interactive drawing by using your standard browser. It claims to be much more concise than Raphael. There is even a demo page even though the development is stalled.


Fabric is a JavaScript HTML canvas library, providing an interactive object model on top of the canvas element. 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.

Fabric.js example


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. It’s based on (and largely compatible) with Scriptographer, a scripting environment for Adobe Illustrator.

Paper.js example


jsPlumb provides a fast way of building applications with visual connectivity at their core. s. It uses SVG and runs on all browsers from IE9 and later. JsPlumbToolkit is its commercial extension. This commercial version wraps the Community edition with a focus on the underlying data model, as well as several useful UI features such as layouts, and a widget that offers pan/zoom functionality.

JSPlumb example


A JS client-side library for creating graphics and interactive experiences, based on the core principles of Processing to make coding accessible to artists, designers and educators. Beyond drawing, this project provides offers web audio functionality, collision detection and even generation of graphical user interfaces from p5.js sketches.


A highly optimized open-source graph theory network library that can be used for graph analysis and visualization. Compatible with all modern browsers and fully (de)serializable via JSON. It also includes algorithms for automatic layout, set theory and graph theory, from BFS to PageRank.

cytoscape.js example


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. The project is now abandoned.


Vis.js is a dynamic, browser-based visualization library. The library is designed to be easy to use, handle large amounts of dynamic data, and enable manipulation of the data. This project is also abandoned.

React Diagrams

React Diagrams is a “a super simple, no-nonsense diagramming library written in react that just works”. It’s a library focusing on visualizing flows and process-orientated diagrams. Inspired by BlenderLabview and Unreal engine.

It’s written entirely in in Typescript and React. It’s fully extensible, the entire library including its core can be extended, rewired and re-assembled into fundamentally different software to suit your own software needs. It also aims to provide a good user experience but making sure designers can edit the diagrams as fast as possible.

React Diagrams example model


Tldraw is one of the most recent entries to this list. Tldraw is a “tiny little drawing app” offering a number of shapes to draw simple, but clear and elegant, diagrams with a hand-drawn style and convenient features such as smart arrows, snapping, and sticky notes. There’s even a VSCode extension for it.

Author’s note: This post was initially published in 2015 and has been significantly rewritten several times ever since to include/remove relevant tools

Featured image by Capture Queen

Want to build better software faster?

Want to build better software faster?

Read about the latest trends on software modeling and low-code development

You have Successfully Subscribed!

Pin It on Pinterest

Share This