JointJS - JavaScript diagramming library powering exceptional UIs

JointJS is a tested and proven JavaScript/Typescript diagramming library that helps developers and companies of any size build visual and No-Code/Low-Code applications faster and with confidence. It’s a flexible tool from which a wide range of UIs can be created (interactive diagramming applications, drawing tools, data visualizations, UIs for monitoring systems, and many more). It can become the foundational layer of your next application and help you bring your idea to market in days, not months or years.

Use Cases

Further information, examples and documentation can be found at jointjs.com.

:1234: Get started with tutorials.

:bulb: To ask a question, share feedback, or engage in a discussion with other community members, visit our GitHub discussions.

:pen: More examples are available on CodePen.

:book: Check out our mind-map documentation.

Features

essential diagram elements (rect, circle, ellipse, text, image, path)
ready-to-use diagram elements of well-known diagrams (ERD, Org chart, FSA, UML, PN, DEVS, ...)
custom diagram elements based on SVG or programmatically rendered
connecting diagram elements with links or links with links
customizable links, their arrowheads and labels
configurable link shapes (anchors, connection points, vertices, routers, connectors)
custom element properties and data
import/export from/to JSON format
customizable element ports (look and position, distributed around shapes or manually positioned)
rich graph API (traversal, dfs, bfs, find neighbors, predecessors, elements at point, ...)
granular interactivity
hierarchical diagrams (containers, embedded elements, child-parent relationships)
element & link tools (buttons, status icons, tools to change the shape of links, ...)
highlighters (provide visual emphasis to your elements)
automatic layouts (arrange the elements and links automatically)
highly event driven (react on any event that happens inside the diagram)
zoom in/out
touch support
MVC architecture
SVG based
... a lot more

Supported browsers

Latest Google Chrome (including mobile)
Latest Firefox
Latest Safari (including mobile)
Latest Microsoft's Edge
Latest Opera

Development Environment

If you want to work on JointJS locally, use the following guidelines to get started.

Dependencies

Make sure you have the following dependencies installed on your system:

Make sure that you are using Yarn version >= 2.0.0, so that you have access to Yarn workspace ranges functionality. If you are using Volta, it will automatically read this restriction from package.json.

Setup

Clone this git repository:

git clone https://github.com/clientIO/joint.git

Navigate to the joint directory:

cd joint

Install all dependencies:

yarn install

Generate distribution files from the source code:

yarn run dist

You are now ready to browse our example applications, which combine functionality from multiple JointJS packages:

cd examples

Refer to each application's README.md file for additional instructions.

You can also browse the demo applications of our JointJS Core package:

cd packages/joint-core/demo

Most demos can be run by simply opening the index.html file in your browser. Some demos have additional instructions, which you can find in their respective README.md files.

Tests

To run all tests:

yarn run test

To run only the server-side tests:

yarn run test-server

To run only the client-side tests:

yarn run test-client

To run only TypeScript tests:

yarn run test-ts

Lint

To check for linting errors in src and types directories:

yarn run lint

To auto fix errors, run eslint for src and types directories:

yarn run lint-fix

Code Coverage Reports

To output a code coverage report in HTML:

yarn run test-coverage

To output a code coverage report in lcov format:

yarn run test-coverage-lcov

The output for all unit tests will be saved in the packages/joint-core/coverage directory.

Documentation

The source files for the JointJS documentation (plus Geometry and Vectorizer libraries) are included in this repository; see the packages/joint-core/docs directory. The documentation can be built into stand-alone HTML documents like this: