JointJS

Core library for visualization and interaction with diagrams and graphs.

Completely free to use.

Uses SVG for rendering diagrams, ensuring scalability and clarity.

Ability to create any custom shape from scratch.

Users can extend existing shapes as a base for new custom ones.

Separates graph, element, and link models from their rendering, allowing for easy integration with backend applications.

Supports reacting to various events on the paper or elements (e.g., position, size, angle changes).

Provides fundamental shapes like rectangles, circles, ellipses, text, images, and paths.

Supports connecting diagram elements with customizable links, labels, and arrowheads.

Allows for user interaction with diagram components.

Enables the use of parent-child models for defining element scopes.

Supports saving and loading diagram states.

Can generate and manage various chart types like Line, Bar, Area, Combo, Pie, Donut, and Knob charts.

Functions for resizing, rotating, and connecting charts to other elements.

Create multiple views on a single model for scalability and non-interactive previews.

Full control over styling elements and links (custom and default).

Feature to create elements with ports for connecting different elements.

Ability to define custom keyboard shortcuts for application interactions.

Tracks graph changes, allowing users to revert or reapply actions.

Functionality to copy and paste diagram cells.

Supports drag-and-drop functionality for elements.

Export diagrams into various image and document formats.

Works seamlessly with React, Angular, Vue, and Svelte.

Handles diagram data in JSON format.

Supports the use of external images within diagrams.

Aids in precise element alignment.

Provide visual emphasis to shapes during interactions or on events.

Tools for selecting individual elements or regions.

Provides a smaller view into a larger diagram (basic functionality in core, advanced in JointJS+).

Display information messages on hover.

Supports creating interactive popups and menus.

Integration with form elements.

Offers options for customizing the visual appearance.

Ability to store documents (graphs and cells) to client-side HTML5 localStorage.

Extends functionality with over 40 pre-built UI widgets, interaction components, automatic layouts, and control panels.

Includes advanced widgets for building sophisticated user interfaces.

Enhances user interaction with diagrams.

Provides advanced automatic layout algorithms (e.g., hierarchical, orthogonal, organic, circular, tree layouts) for directed graphs.

Pre-built panels for managing diagram elements and properties.

Can be used as a white-label solution.

Plugin to implement a two-way data binding between cell models and HTML forms for property editing.

Plugin to implement an interactive toolbar component with various tools.

Plugin for scrolling, panning, zooming, centering, and auto-resizing paper content.

Advanced minimap for easy navigation in large diagrams.

Provides a control panel above an element with various tools (e.g., resize, rotate).

Advanced tools for selecting regions of various geometries.

Ability to resize elements in any direction and rotate them freely.

Powerful rich-text inline editor for SVG text elements.

Enhanced support for creating standards-compliant BPMN editors.

Tools for designing UML Class Diagrams.

Access to 160+ templated applications with source code (e.g., AI Agent Builder, Flowchart Maker, Mind Mapping, Org Chart, Sankey Diagram, Chatbot, Kanban).

High degree of customization for every feature.

Transforms link vertices into optimal route points (routers) and generates SVG path commands for smooth rendering (connectors).

Defines specific points on elements where links can connect.

Additional shapes like BPMN, VSM, and table-like shapes, and elements with scrollable content.

Provides a wrapper for a 3rd party layout library to assist with directed graphs.

Easily lay out ports and their labels automatically.

Improved support for foreign objects within SVG context.

Tools for validating diagram structures.

Includes various algorithms for graph analysis.

Facilitates precise alignment of elements.

Tools for working with vector graphics.

Integration with popular graph layout and data structure libraries.

Improved performance for large-scale diagrams.

Optimized for touch-enabled devices.

Updated user interface elements.

Ability to import and export Business Process Modelling Notation diagrams to XML.

Organize shapes into hierarchical structures that can be collapsed/expanded.