Diagram-JS

Diagram-JS

Diagram-JS is an open-source JavaScript diagramming library that allows you to create flowcharts, network diagrams, BPMN diagrams, ER diagrams, UML diagrams, and more. It provides a customizable canvas and diagramming components for building interactive diagrams.
Development Diagramming
Diagram-JS image
flowchart network-diagram bpmn er-diagram uml interactive customizable canvas diagramming components javascript opensource
Diagram-JS alternatives ➤

Diagram-JS: Open-Source JavaScript Diagramming Library

Create flowcharts, network diagrams, BPMN diagrams, ER diagrams, UML diagrams, and more with a customizable canvas and diagramming components.

What is Diagram-JS?

Diagram-JS is an open-source JavaScript library for creating flowcharts, BPMN diagrams, network diagrams, uml diagrams, entity relationship diagrams, and more. It provides a full-featured diagramming solution that runs in the browser.

Some key features of Diagram-JS:

  • Customizable canvas with panning, zooming, and scrolling
  • Extensible through custom shapes, connectors, and features
  • Supports touch devices and gestures
  • Collaborative editing capabilities
  • Import/export to XML, PNG, JPEG formats
  • Programmatic access to diagrams from code
  • Open architecture that allows extension through plugins

Diagram-JS aims to be a flexible building block for web-based diagramming apps. It was built with modularity, extensibility, and customizability as key priorities. The library handles low-level SVG rendering and events, while exposing hooks for implementing custom diagram types, editing modes, features like copy and paste, keyboard shortcuts, minimap, collab editing, and more.

Diagram-JS is used by several popular tools including DrawIO/Diagrams.net, Uber's re:Architect, and the Signavio Process Editor. It's a proven, full-featured diagramming solution suitable for inclusion in other web apps.

Diagram-JS Features

Features

  1. Canvas component for rendering diagrams
  2. Extensible through custom shapes and plugins
  3. Supports BPMN, flowcharts, ER diagrams, UML diagrams
  4. Drag and drop diagramming
  5. Connectors, ports, docking
  6. Undo/redo, copy/paste, delete
  7. Keyboard shortcuts
  8. Zooming and panning
  9. Cross-browser support

Pricing

  • Open Source

Pros

Open source and free

Active community support

Customizable and extensible

Good documentation

Supports multiple diagram types

Interactive and easy to use

Cons

Steep learning curve

Limited built-in shape libraries

Not a complete diagramming solution out of the box

Requires coding skills to customize extensively

Official Links

Official Website
https://github.com/bpmn-io/diagram-js

The Best Diagram-JS Alternatives

Top Development and Diagramming and other similar apps like Diagram-JS

Here are some alternatives to Diagram-JS:

GoJS icon
GoJS
JointJS icon
JointJS
MxGraph icon
mxGraph
JsDiagram icon
JsDiagram
JsPlumb - JS Visualisation Library icon
jsPlumb - JS Visualisation Library
Draw2D icon
Draw2D
Suggest an alternative ❐

GoJS icon

GoJS

GoJS is a feature-rich JavaScript library for implementing interactive diagrams and graphs in web applications. It allows developers to build a wide range of visualization types such as flowcharts, org charts, decision trees, entity relationship diagrams, UML diagrams, BPMN diagrams, and more using customizable shapes and layouts.Some key capabilities and...
GoJS image
JointJS icon

JointJS

JointJS is an open-source JavaScript diagramming library that allows developers to create interactive diagrams, graphs, organizational charts, UML diagrams, flowcharts and more using ready-made shapes and connectors. It is designed to build canvas-based applications that require interactivity like drag-and-drop, defining connections, interactive elements and custom shapes.Some key features of JointJS...
JointJS image
MxGraph icon

MxGraph

mxGraph is an open-source JavaScript diagramming library that allows developers to add advanced diagram and charting capabilities to web applications. It is highly customizable and supports various diagram types like flowcharts, org charts, ER diagrams, UML diagrams, network diagrams, BPMN and more.Some key features of mxGraph include:Works with modern web...
MxGraph image
JsDiagram icon

JsDiagram

JsDiagram is an open-source JavaScript library for creating interactive diagrams and charts in web applications. Developed by JSDraw.io, it provides a complete set of drawing tools and shape libraries to help developers visualize and present data in an intuitive way.Some key features of JsDiagram include:Support for flowcharts, UML diagrams, BPMN,...
JsDiagram image
JsPlumb - JS Visualisation Library icon

JsPlumb - JS Visualisation Library

jsPlumb is an open-source JavaScript library for connecting and visualizing elements in a web interface. It provides a range of tools for creating diagrams, flowcharts, directed graphs, visual mapping and more.Some key features of jsPlumb include:Automatic drawing and adjusting of Bezier curves or straight line connectionsSupport for drag-and-drop connectivity between...
JsPlumb - JS Visualisation Library image
Draw2D icon

Draw2D

Draw2D is an open source JavaScript library for creating vector graphics, diagrams, charts, and graphical editors in web applications. It is built on HTML5 canvas and provides a rich API for generating and manipulating 2D shapes and diagrams.Some key features of Draw2D include:Vector graphic primitives like lines, circles, rectangles, etc.Advanced...
Draw2D image