JointJS

Additional features

JavaScript Diagramming Library

Core library for visualization and interaction with diagrams and graphs.

Open Source

Completely free to use.

SVG-based Rendering

Uses SVG for rendering diagrams, ensuring scalability and clarity.

Custom Shape Creation

Ability to create any custom shape from scratch.

Extending Existing Shapes

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

Model-View-Controller (MVC) Architecture

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

Event-Driven Nature

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

Basic Elements

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

Element Connectivity (Links)

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

Interactive Elements and Links

Allows for user interaction with diagram components.

Hierarchical Diagrams Support

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

Serialization and Deserialization

Supports saving and loading diagram states.

Chart Creation

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

Chart Manipulation

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

Multiple Papers/Views

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

Styling

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

Port Model

Feature to create elements with ports for connecting different elements.

Keyboard Shortcuts

Ability to define custom keyboard shortcuts for application interactions.

Undo & Redo

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

Copy & Paste

Functionality to copy and paste diagram cells.

Drag & Drop

Supports drag-and-drop functionality for elements.

Export to PNG/JPEG/SVG/PDF/SWF

Export diagrams into various image and document formats.

Integration with JavaScript Frameworks

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

JSON Support

Handles diagram data in JSON format.

External Images

Supports the use of external images within diagrams.

Grid and Guidelines

Aids in precise element alignment.

Highlighters

Provide visual emphasis to shapes during interactions or on events.

Selection Tools

Tools for selecting individual elements or regions.

Minimap (Basic)

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

Tooltips

Display information messages on hover.

Popups & Menus

Supports creating interactive popups and menus.

Form Controls

Integration with form elements.

Themes & Styling

Offers options for customizing the visual appearance.

Local Storage

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

JointJS+ (Commercial Extension Features)

40+ Components

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

UI Widgets

Includes advanced widgets for building sophisticated user interfaces.

Interaction Components

Enhances user interaction with diagrams.

Automatic Layouts

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

Control Panels

Pre-built panels for managing diagram elements and properties.

White-Label System

Can be used as a white-label solution.

Inspector (Property Editor and Viewer)

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

Toolbar

Plugin to implement an interactive toolbar component with various tools.

Zoom & Scroll (PaperScroller)

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

Minimap (Navigator Plugin)

Advanced minimap for easy navigation in large diagrams.

Halo Plugin

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

Selection Region Tools

Advanced tools for selecting regions of various geometries.

Resize & Rotate

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

Inline Text Editing (Rich-text)

Powerful rich-text inline editor for SVG text elements.

BPMN Diagram Support (Advanced)

Enhanced support for creating standards-compliant BPMN editors.

UML Class Diagram Support (Advanced)

Tools for designing UML Class Diagrams.

Pre-built Demo Applications

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

Customizable Features

High degree of customization for every feature.

Smart Routing for Links

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

Anchors

Defines specific points on elements where links can connect.

Featured Shapes

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

Default Layouts (Wrapper for 3rd party)

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

Port Label Layout

Easily lay out ports and their labels automatically.

Foreign Objects Support

Improved support for foreign objects within SVG context.

Validation

Tools for validating diagram structures.

Algorithms

Includes various algorithms for graph analysis.

Snap to Objects

Facilitates precise alignment of elements.

Vectorizer Libraries

Tools for working with vector graphics.

Dagre and Graphlib Integration

Integration with popular graph layout and data structure libraries.

Performance Optimizations

Improved performance for large-scale diagrams.

Enhanced Touch Support

Optimized for touch-enabled devices.

Modern UI Components

Updated user interface elements.

XML Import/Export (BPMN)

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

Container and Grouping

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