A lot of applications on the Web need some sort of interactive diagramming functionality, but implementing it is a very difficult undertaking in a highly specialized area. Luckily, there is no longer any need to take care of the tricky parts on your own – there are libraries which can take care of the basic infrastructure of your solution (e.g. embedding into the webpage, user interactivity, connecting objects, graph data model, styling, and more), jump-starting the development of your web application.
Do you need to create an orgchart visualization, a flowchart, a workflow procedure, a map overlay, a floor plan, or anything in between? Using a diagramming library may free your hands to allow you to concentrate your efforts where they matter the most – delighting your users with a sleek user interface and quick iteration – while saving money, time, and development effort.
However, the landscape of JavaScript libraries for interactive diagramming is changing every year, and it is a challenge to keep track. Some libraries have recently risen to the spotlight, some have faded away, and some have continued to appeal to customers over time. That is why we have compiled a list of eight libraries which could prove to be the best fit for your project in 2023.
The JointJS library is the most mature solution of all JavaScript diagramming libraries on this list. Its first version was released in 2010, and it has continued to evolve ever since that time to keep the top spot on the market. JointJS can be embedded into projects written in both JavaScript and TypeScript, and can integrate with any development framework, including React, Vue, Angular, Svelte, and Salesforce Lightning.
The library comes with a free and open source tier (called JointJS), as well as a commercial extension (JointJS+) – using the two in tandem combines the best of both worlds. You can start prototyping your solution using the free tier first and assess how easy it is for you to integrate JointJS with your application. Then, when you decide to take the plunge and sign up for the trial of JointJS+, the foundation you have built with the free tier can be seamlessly extended with advanced diagram functionality and UI components. Combined, the two parts of JointJS allow you to build complete, shippable products to delight your customers.
A license for JointJS+ gives you access to unminified source code, so that you can understand, modify, and audit JointJS+ code efficiently. Additionally, the license entitles you to a year of free updates, which include new features, provide bug fixes, performance enhancements, and ensure compatibility with the latest browser releases. Additional updates and/or support subscriptions can also be purchased.
JointJS uses SVG rendering, which means that all diagram elements are present in the webpage DOM and can be easily inspected, debugged, and tested by your front-end developers’ usual tools. This feature of SVG also provides a basic level of accessibility, as well as enabling you to style your interactive diagrams via standard CSS. If performance is a concern to you, you can enable JointJS’s smart asynchronous virtual rendering algorithm which avoids rendering objects outside of the area visible to the user.
In the free tier, the JointJS library provides all basic diagramming functionality – a suite of tools for working with nodes and edges (including ports, labels, highlighters, automatic edge routers, and custom UI tools), a package for calculations on SVG shapes and their interactions, as well as a package for dealing with SVG transformations and text.
On top of the free tier’s functionality, the commercial JointJS+ extension provides ready-to-use UI components (including the basics like minimap, element palette, context menu, tooltip, measurement tools, and model/view inspector, as well as advanced components like snaplines, toolbar, SVG path editor, and inline rich text editor). In addition, it provides support for advanced control interactions – such as customizable keyboard shortcuts, touch events, drag-and-drop, copy/paste, and undo/redo – as well as automatic graph layout algorithms including layered (flowchart), tree (orgchart), grid (table), and force-directed.
JointJS+ also offers export/import functionality to a wide variety of formats including SVG, HTML Canvas, PDF, and PNG/JPEG. Additionally, the library comes with functionality to print from the browser and – uniquely among the other libraries on this list – to create slideshow presentations from your diagrams. Shapes for BPMN and VSM are included in the library out-of-the-box.
JointJS is accessible to newcomers thanks to its large collection of demos and a comprehensive tutorial path with over 30 lessons. At the same time, its detailed documentation – combined with its ease of development, debugging, and testing – delights veteran developers.
"JointJS+ was the perfect tool for our needs. By far the best drag and drop diagramming tool out there. JointJS+ has the feature set, flexibility, and documentation that allowed us to accelerate the development of our Visual Call Flow Designer 10x." Brandon Smith, Senior Software Engineer, VOXO
In short – a wealth of functionality, a broad range of demos, a structured tutorial path, and a pleasant development experience combine to give JointJS the best value for money out of all libraries on this list. Why don’t you sign up for a no-commitment free trial of JointJS+ to start prototyping your idea right now?
The yFiles for HTML library was released in 2012 by yWorks, which places it among the most mature solutions on this list. It does not have any free tier, and compared to all other libraries mentioned on this list, this library comes at a much higher price point – which is unfortunate because the functionality offered by the library is comparable to what is offered by its mature commercial competitors.
The library is a JavaScript solution which can be embedded into TypeScript and GWT projects, and can integrate with development frameworks including React, Angular, Vue, and Svelte. The standard license of yFiles does not give access to unminified source code of the library. Unlike JointJS+, yFiles licenses are additionally limited by the number of physical development sites, deployed domains, and deployed apps. The license entitles you to a year of free updates, and further updates and/or support subscriptions can be purchased afterwards.
Uniquely, yFiles offers a great deal of flexibility with render modes – it supports rendering in SVG, HTML Canvas, as well as WebGL. Meanwhile, when compared to other libraries on this list, yFiles only offers a limited set of ready-to-use UI elements (e.g. minimap, element palette, context menu, tooltip, snaplines, toolbar), focusing instead on diagram functionality – i.e. working with nodes and edges. This includes a suite of standard control interactions (like custom highlighters and automatic edge routing, but not custom UI tools) and a wealth of automatic graph layouts. A suite of BPMN shapes is provided, and the library also offers export functionality to SVG, HTML Canvas, PDF and PNG. Functionality to export to VSDX (uncommon among the libraries on this list) can be purchased with an additional license.
ℹ️ Read our in-depth comparison with JointJS, an affordable alternative to yFiles: www.jointjs.com/yfiles-alternative
The jsPlumb library currently employs a similar commercial strategy as JointJS – it has a mature open-source free tier called jsPlumb Community, which was released in 2010, and a commercial tier known as jsPlumb Toolkit, released in 2015.
jsPlumb is a JavaScript library which can also be embedded into TypeScript projects, and it can be integrated with React, Angular, Vue, and Svelte development frameworks. The free jsPlumb Community library is open-source and offers basic diagramming functionality (i.e. working with nodes and edges). The commercial closed-source jsPlumb Toolkit library can be applied as an extension of the free tier, similar to JointJS. The commercial licenses come on a per-developer basis, and client-hosted or customer-facing applications need to use a more expensive version of the license. The standard license entitles you to a year of free updates, and further updates can be purchased, but no support subscriptions with guaranteed SLAs are offered (the only way to reach out to the jsPlumb Toolkit team is via a contact form on the website).
Technologically, the library employs a unique approach to diagram rendering (only comparable to the strategy used by the two React-exclusive libraries). Each diagram node and edge is rendered within its own separate SVG diagram, and these separate diagrams are positioned on the web page via HTML. Even though all objects are placed in the DOM (which has positive implications as discussed for SVG), unfortunately the specific way this rendering approach is implemented makes jsPlumb very slow, and the problem is exacerbated in diagrams with large numbers of objects since the library does not offer any virtualization functionality (unlike other commercial libraries on this list). Furthermore, the absence of a single SVG rendering context has the consequence that jsPlumb does not support several features which are considered standard by other JavaScript diagramming libraries, like client-side export of rendered diagrams to a visual format.
When compared to the other diagramming libraries on this list, jsPlumb comes with relatively little functionality – a few basic UI components (minimap, element palette), a few basic diagram control interactions (undo/redo, zoom/pan), and a few automatic layouts (orgchart, force directed, circular). In addition, BPMN shapes are not provided with the library, and although jsPlumb comes with adequate API documentation, it is severely lacking in the amount of free demos, and it does not offer any tutorial path. All these omissions make it very difficult to use the library for development, since almost all custom functionality needs to be coded from scratch without any boilerplate or demo code to use for guidance.
ℹ️ Read our in-depth comparison with JointJS, a feature-rich alternative to jsPlumb: www.jointjs.com/jsplumb-alternative
Since 2014, this free library forms the core of the online diagramming tool BPMN.io. The Diagram.js library itself comes with very basic functionality, so we are going to consider it together with the BPMN.js library (focused on BPMN only) where appropriate. BPMN.js extends and builds upon the functionality of Diagram.js; the two libraries are maintained by the same team and are available under the same open-source license.
Diagram.js and BPMN.js can be embedded into both JavaScript and TypeScript projects. Although Diagram.js itself does not offer any guidance for integrating with any JavaScript development frameworks, BPMN.js can be integrated with React, Angular, Vue, and Svelte. The libraries are free and open-source, but this also means that no support subscriptions are available.
Diagram.js uses SVG rendering, like JointJS, which has positive implications for built-in accessibility, ease of development, and styling via standard CSS. However, the library does not offer any sort of virtualization capability to address the potential performance impact of rendering large numbers of objects via SVG (unlike the commercial SVG-based libraries like JointJS, yFiles, and Syncfusion).
Uniquely among the free diagramming libraries, Diagram.js offers a full suite of diagram control interactions (including touch support and custom keyboard shortcuts), while BPMN.js provides BPMN shape definitions and export to SVG on top of that. On the other hand, Diagram.js has no native support for element ports and automatic edge routing, which are widely supported by other diagramming libraries, including the free libraries on this list. Furthermore, Diagram.js provides only a few reusable UI components, including minimap, element palette, snaplines and toolbar.
This means that developers of web applications using Diagram.js will probably find themselves writing a lot of custom UI functionality, which they would get out-of-the-box if they chose one of the commercial diagramming libraries instead. Combined with the fact that – being a free library – Diagram.js offers almost no help in the form of documentation, demos or tutorials, it needs to be considered whether the time and effort invested into developing a solution with Diagram.js is worth the upfront savings. In addition, the decision to use a free library always comes with the risk that the library becomes obsolete or ceases to be actively maintained – as has happened with mxGraph – which can have serious consequences for any commercial application using it.
Syncfusion is a complicated family of products that offers a bewildering variety of functionality across many different platforms. Relevant for this article is the fact that since 2021, one of the products – Essential Studio 2 for JavaScript (EJ2) – has included a Diagram control, a component which allows interactive diagramming on the Web. However, it is quite apparent that diagramming is not the primary focus of the Syncfusion team; the EJ2 Diagram component only provides a baseline of diagramming functionality.
The Syncfusion library is a JavaScript solution that can also be embedded into applications written in TypeScript. It can be used with major development frameworks such as React, Angular, Vue, Svelte, and Blazor. Confusingly, Syncfusion markets some of these integrations as separate products within the library, but separate EJ2 integration demos are available, as well. Syncfusion does not have a free tier (with some strictly limited exceptions), but its unminified source code can be accessed and evaluated via Syncfusion’s GitHub account. Unlike most commercial competitors (except React Flow), Syncfusion licenses are based on a monthly subscription model, and always come bundled with a subscription for support.
The Syncfusion EJ2 Diagram library component uses SVG rendering, like JointJS, which has positive implications for built-in accessibility, ease of development, and styling via standard CSS. It offers basic virtualization capability to address the potential performance issues of using SVG to render extremely large numbers of objects.
When it comes to ready-to-use UI elements, the library provides most of the basics (minimap, element palette, context menu, tooltip, and ruler), as well as some advanced tools like snaplines and toolbar. As mentioned in the beginning, the library’s main limitation is that it provides only a basic set of control interactions and only a very limited number of layout algorithms, including orgchart and radial layouts. BPMN shape definitions are included as part of the library, while supported export formats include SVG and PNG/JPEG/BMP, plus the functionality to print from the browser.
The documentation for EJ2 Diagram is comprehensive, but serves more as a tutorial than an API reference. Whether this is good depends on what you expect of a product’s documentation – but it might slow down development once everyone on your team has oriented themselves. Meanwhile, the suite of demos offers a reasonable overview of the library’s functionality.
ℹ️ Read our in-depth comparison with JointJS, a feature-rich alternative to Syncfusion: www.jointjs.com/syncfusion-alternative
This library is one of the most mature solutions on this list, since its first version was released in 2012. Like yFiles and Syncfusion, it does not have any free tier. Unlike them – and unlike all other libraries on this list – it also primarily relies on HTML Canvas rendering, which has serious consequences for accessibility and for ease of development, debugging, and testing. Interested in a more detailed analysis? We have written a separate article comparing JointJS and GoJS, which dives deeper into the similarities and differences between these two major diagramming libraries.
The GoJS library is a JavaScript library which can also be used in TypeScript projects. It can be integrated with React, Vue, and Angular frameworks. GoJS’s standard licensing terms are among the most restrictive of the libraries on this list – the library does not have a free tier, the standard license does not give access to unminified source code of the library, and GoJS charges extra for the right to distribute the application for more than 3 years, to host it on more than 1 domain, and to use the library for more than 1 application. The license entitles you to a year of free updates and support, and additional years of this bundle can be purchased.
The GoJS library is unusual in that it primarily relies on HTML Canvas for rendering, unlike the vast majority of libraries on this list. (We are not taking GoJS’s recently released SVG rendering mode into account – the GoJS documentation itself strongly recommends against its use since the functionality is not yet fully supported. More problematic is the fact that the SVG rendering performance is nowhere near the performance achieved by the library’s top SVG-based competitors.) Crucially, HTML Canvas rendering has some serious inherent limitations as well as theoretical advantages when compared to SVG rendering; the fundamental limitations come from the fact that HTML Canvas represents the visual content of the diagram as a bitmap. First of all, this means that graphical data and text may lose quality due to rasterization in some situations. Second, it transforms the diagram component into a black box, making it inaccessible to screen reader technology and to developers who find it more difficult to understand, debug, test, and extend GoJS applications.
Meanwhile, the main promise of this rendering approach is that HTML Canvas only renders objects within the area visible to the user. This is not the same thing as true virtual rendering (although that can also be implemented in GoJS for a minor additional performance improvement), but it does give the GoJS library a performance advantage over those SVG libraries which lack any virtualization functionality (i.e. the free libraries on this list, and jsPlumb). However, this advantage of GoJS does not extend to the majority of commercial SVG diagramming libraries which do implement various forms of virtualization. For example, the smart asynchronous algorithm used by JointJS is capable of rendering diagrams with extremely large numbers of objects almost as well as GoJS (with or without virtualization) with no noticeable performance hit.
GoJS provides a lot of basic UI components including minimap, element palette, context menu, tooltip, measurement tools, and model/view inspector, but its biggest limitation is that it doesn’t provide any advanced UI components, while other libraries on this list provide at least some of those. When it comes to diagram functionality, on the other hand, GoJS’s coverage is one of the most complete ones (only missing the custom highlighter functionality of JointJS). In supported control interactions and automatic graph layout algorithms, too, it is on par with the other mature commercial JavaScript libraries. In line with that competition, the library includes BPMN shape definitions, and export functionality to SVG, HTML Canvas, PDF, and PNG.
Like the other mature commercial JavaScript libraries on this list, GoJS comes with a comprehensive API documentation and a large collection of demos, but its tutorial path is not very well developed, with only two textual pages (or alternatively, several videos on the GoJS channel) which act more like an index of individual features of the library than a genuine learning resource.
ℹ️ Read our in-depth comparison with JointJS, an SVG-based alternative to GoJS: www.jointjs.com/gojs-alternative
This is a relatively new library (first version was released in 2019) that has recently garnered a lot of attention in React circles. The reason is that – unlike all diagramming libraries listed so far – it is exclusive to React, with the promise of tight coupling with built-in React functionality. However, note that all other libraries on this list can also be integrated within a React application and interoperate with native React objects.
React Flow is a free and open-source TypeScript library which also can be integrated into JavaScript projects. Since 2022, React Flow also offers a commercial tier based on a monthly subscription model, which provides access to additional annotated demos and support behind a relatively expensive paywall.
It is clear that the library maintainers are primarily focused on implementing diagram functionality and control interactions – in these areas, on top of the basics, React Flow supports automatic edge routing and custom UI tools, as well as touch interactions. On the other hand, the library provides only a basic set of automatic layout algorithms and only a very limited selection of UI components (minimap, snaplines, and toolbar), which is a shortcoming it shares with the other free libraries on this list. Similarly, the library only offers extremely limited export functionality (export to PNG via an external library), and it does not come with BPMN shapes.
React Flow has a philosophy similar to jsPlumb in which the nodes are the main parts of a diagram. In order to support this, the library represents diagram nodes as HTML elements, while the edges connecting them are represented by SVG; all of these separate elements are then positioned on the web page via HTML. Putting all diagram objects into the DOM has positive implications for ease of development and accessibility, but the library does not offer any virtualization capability, which may have an impact on performance in diagrams with extremely large numbers of objects. Furthermore, relying on HTML for node rendering has consequences for the types of shapes that can be represented. Whereas rectangles are supported out-of-the-box, anything more complicated (e.g. polygons, ellipses or custom paths) is much more difficult to support than in SVG-based libraries.
The React Flow library sits in an awkward middle ground when it comes to the number of demos available. Unlike other free libraries on this list, it is clear that the library maintainers see demos as an important tool for making the library more accessible to developers. That being said, React Flow only has about a quarter of the number of demos as its more mature commercial rivals. The demos seem to mostly complement the library’s tutorial path, which is comprehensive and may help a developer get started with the library, as long as they know current React best practices. On the other hand, the library’s API documentation is not very useful – it is very sparse and provides almost no technical detail. Overall, you may find yourself getting started quickly with the library, but running into issues down the road as your application grows and you start implementing more complex functionality not covered by React Flow tutorials or demos.
ℹ️ Read our in-depth comparison with JointJS, a customizable and feature-rich alternative to React Flow: www.jointjs.com/react-flow-alternative
As the name suggests, React Diagrams is another library exclusive to the React development framework, similarly to React Flow. React Diagrams is the elder of the two React-only libraries since its first version was released in 2016. The promise of this library, too, is that it offers tight coupling with React features, but note that all other libraries on this list can also interoperate with advanced React functionality.
The library is fully free and open-source. In fact, the React Diagrams library does not have any commercial tier at all. Unfortunately, this comes at the cost of much more limited functionality, and it also means that no support subscriptions are available.
The library is written in TypeScript, but it can be used within JavaScript projects as well. The scope of the library seems to be firmly focused on workflows and process visualization, which has its pros and cons. On one hand, the React Diagrams library supports all basic diagram functionality (plus automatic edge routing), and the only missing control functionality seems to be a lack of undo/redo and copy/paste interactions. On the other hand, the library does not come with any reusable UI components or automatic layout algorithms. The library also does not provide any export functionality, and it does not come with BPMN shapes. These major omissions might make it difficult to use the React Diagrams library for development of customer applications.
By default, the React Diagrams library employs the same unusual rendering approach as React Flow. That is, diagram nodes are represented as HTML elements, diagram edges are represented by SVG, and all of these elements are positioned on the page via HTML. Even though putting all diagram elements into the DOM has its advantages, React Diagrams (like other free libraries on this list) does not have a virtualization functionality, which may impact its performance in diagrams with extremely large numbers of objects. Additionally, the rendering model makes it difficult to represent nodes as non-rectangles, a problem that the library shares with React Flow. Nevertheless, one of React Diagrams demos shows that there is a way to represent nodes via custom SVG – in effect, emulating jsPlumb rendering approach. As in jsPlumb, though, that approach suffers from problems which are avoided by libraries with a single SVG rendering context (for example, ensuring that only the SVG shape itself is clickable and not its whole helper SVG canvas).
Although the React Diagrams library comes with a small collection of demos, development may prove to be a little bit of a detective work because the library does not have any API documentation and only an insufficiently-short tutorial path. In addition, note that the decision to use a free library always comes with the risk that the library becomes obsolete or ceases to be actively maintained – as has happened with mxGraph – which can have serious consequences for any commercial application using it.
You might have expected to find mxGraph on this list because it is the technology behind the web tool draw.io / diagrams.net – and because the library tends to be mentioned in articles similar to this one (such as here and here). We chose not to include it in our list because mxGraph has undergone a turbulent history in recent years – the library was officially declared end-of-life in 2020 by its original developer.
A fork called maxGraph has sprung up in its absence, developed by a different team. Even though the new library is actively maintained, it has been kept at pre-release versions (0.x.x) ever since the fork, so its API may prove less stable than the original library. As such, we cannot recommend using it in your project in 2023.
ℹ️ Read our in-depth comparison with JointJS, a mature and ever-evolving alternative to mxGraph: www.jointjs.com/mxgraph-alternative
We have discussed the top 8 JavaScript libraries for interactive diagramming in 2023. Thank you for investing your time to make it through the whole list – we covered a lot of ground!
As you could see, each library provides developers with a different set of features. To make it easier to compare them all, here is a table highlighting their similarities and differences:
Disclaimer: The primary source of information for each library was its own documentation and demos. All reasonable care was taken to ensure that the information in the above table was valid at the time of writing (June 2023) – however, any features which were not well documented or demonstrated at that time may not have been taken into account.
We believe that JointJS offers the best value for money out of all the alternatives, so we would like to extend to you an invitation to our no-commitment 30-day trial. It will allow you to experience the advanced JointJS+ diagramming library for yourself, get started quickly using 150+ demo applications and feature examples, and explore how its features can be seamlessly integrated with your project.
Happy coding!
.jpg)
