JointJS: Visualize and interact with diagrams and graphs

Create static diagrams or fully interactive diagramming tools such as workflow editors, process management tools, IVR systems, API integrators, presentational applications and much more.

Compare

live DEMO

download

Check out our new experimental mind-map documentation.

Uses for JointJS

Looking to build a cool, open source application? JointJS can do that. Here are a just few examples.

Featured Application: Mind Mapping

Visually structure your documentation as a beautiful mind map, with neatly organized and searchable content, using our free mind mapping tool - build with JointJS and Rappid.

Check it out

Mind Mapping

Visually structure your documentation as a beautiful mind map, with neatly organized and searchable content.

Workflow Systems

Integrate a visual interface to workflow systems such as IVR, ETL, marketing automation applications and more.

BPMN Tools

Quickly create Business Process Management tools, and connect any backend technology via JSON Ajax.

Project Management

Build project management applications with highly interactive, visual, and customized components.

Diagramming Editors

Build diagramming applications such as Org Chart Editors, Mind Mapping Tools, Flowchart Editors and more.

Floor Planners

Add a floor planner editor to your applications dealing with floor layout, event planning and others.

Dependency Management

Design a dependency management interface to make it easy for app users to follow dependencies in a visual way.

and much more..

Features of JointJS

JointJS has many native features to support visualization and interaction with diagrams, graphs and much more.

Render hundreds (or thousands) of elements and links with instant interaction

Many shapes to work with (rect, circle, ellipse, text, image, path, erd, org chart, etc.)

Highly event driven, you can react on any event that happens inside the paper

Easily connect diagram elements with links

Customizable links and associated graphics

Links smoothing (bezier interpolation) & smart routing

Custom shapes via SVG or programmatically rendered

Magnets/ports (link connection points) can be placed anywhere

Serialization and deserialization to and from JSON format

Hierarchical Diagrams

Many Mathematical Functions Operating In 2D Space

SVG Library Included

Zooming, Animations, Touch Support

Flexible Plugin System

MVC Architecture

Filters And Gradients

NodeJS Support

Interactive Elements And Links

JointJS+ is the commercial extension to the JointJS Core library. It builds on the JointJS foundation and greatly extends it's functionality with widgets, interaction components, additional shapes, and other functionality to build advanced HTML 5 applications.

Full Features Comparison

Free, fully functioning, no commitment.

FREE TRIAL

Many examples to explore, complete with source code.

online demo

Flexible licensing to meet your needs

buy JointJS+

JointJS core library

To use JointJS you first need the library core files joint.js and joint.css (or their minified versions). Then you need to include the JointJS dependencies: jQuery, Backbone and Lodash libraries. Plugins can be intermixed arbitrarily or not used at all.

How to install JointJS into your page:

We highly recommend using the above versions of dependencies.

Using npm:

$ npm install --save jointjs

TIP: If you're looking for a complete HTML 5 diagramming framework
solution please visit the JointJS+ section here.

JointJS plugins

Expand JointJS functionality with these plugins. You can also see them in action via the live demos.

FSA - Finite state machines

joint.shapes.fsa.js

joint.shapes.fsa.min.js

Demo

ERD - Entity-relationship diagrams

joint.shapes.erd.js

joint.shapes.erd.min.js

Demo

ORG - Org charts

joint.shapes.org.js

joint.shapes.org.min.js

Demo

DEVS - Discrete Event System Specification

joint.shapes.devs.js

Demo

Chess - Chess pieces

joint.shapes.chess.js

joint.shapes.chess.min.js

Demo

PN - Petri nets

joint.shapes.pn.js

joint.shapes.pn.min.js

Demo

UML - Unified modeling language

joint.shapes.uml.js

joint.shapes.uml.min.js

Demo

LC - Logic Circuits

joint.shapes.logic.js

joint.shapes.logic.min.js

Demo

Geometry API

geometry.js

geometry.min.js

Info

Vectorizer API

vectorizer.js

vectorizer.min.js

Info

Directed graph layout

joint.layout.DirectedGraph.js

joint.layout.DirectedGraph.min.js

Demo + Post

Licensing

Whether you're a single developer or an enterprise organization, we have a licensing model to suit your needs.

Open Source License

( JointJS Core Only )

FREE

JointJS Core library is licensed under the Open Source Mozilla Public License Version 2.0. Everything included in the library is available for download above.
The JointJS Core library does not include JointJS+.
You can obtain a copy of the MPL here and read through the MPL v2 FAQ here.

Commercial License

( Full JointJS+ Framework )

PAID

JointJS+ is a commercial extension to the JointJS Core library and builds on the foundation provided by the JointJS Core library by widely extending its functionality to build truly advanced HTML 5 applications.
Dedicated paid support plans are available, as well as custom built solutions for your organization.
Full license terms for JointJS+ are available here.

LATEST NEWS

JointJS: Visualize and interact with diagrams and graphs

Uses for JointJS

Featured Application: Mind Mapping

Mind Mapping

Workflow Systems

BPMN Tools

Project Management

Diagramming Editors

Floor Planners

Dependency Management

Features of JointJS

JointJS+ is the commercial extension to the JointJS Core library. It builds on the JointJS foundation and greatly extends it's functionality with widgets, interaction components, additional shapes, and other functionality to build advanced HTML 5 applications.

JointJS core library

How to install JointJS into your page:

Development version (3.5.3)

Production version (3.5.3)

JointJS Dependencies

JointJS plugins

FSA - Finite state machines

ERD - Entity-relationship diagrams

ORG - Org charts

DEVS - Discrete Event System Specification

Chess - Chess pieces

PN - Petri nets

UML - Unified modeling language

LC - Logic Circuits

Geometry API

Vectorizer API

Directed graph layout

Licensing