- Libraries with core support for drawing graphs (and that could then be adapted to cover graphical modeling languages).
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
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.
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.
with support of style edition for diagram elements (size, position, color, etc.), stereotypes definition, import/export of UML diagrams to XML and image generation.
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.
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 BPMN.io (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.
As its name suggests, state.js focuses on modeling hierarchical state machines. The state.js API offers:
- Classes that represent a state machine model (State, PseudoState, Transition, etc.)
- An interface and implementation of active state configuration (current state); this allows multiple concurrent instances of a single state machine model
- A set of functions that provide the state machine runtime
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.
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.
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.
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.
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.
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 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 Blender, Labview 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.
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