JointJS — The JavaScript diagramming library you don't replace at scale

JointJS is a proven JavaScript/TypeScript diagramming library for building complex, production-scale diagramming applications.

Teams use it to build AI workflow builders, flowchart and process editors, BPMN modelers, SCADA/HMI and monitoring dashboards, data modeling tools, energy network diagrams, electronic design tools, and org chart builders.

JointJS is framework-agnostic, with first-class support for React.

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

🚀 Getting started guide
💡 Ask a question or share feedback in our GitHub discussions
🖊️ 180+ demo apps to kickstart your development
🤖 MCP server integration for AI coding agents
⚛️ New: JointJS for React — build diagramming UIs in your React app

Use cases

JointJS is used to build production diagramming applications across many domains:

| Domain | Examples | |---|---| | Workflow & process | Flowchart editors, process automation, activity and sequence diagrams | | AI workflow builders | Node-based AI pipeline and agent builders, marketing automation studios | | BPMN | Business process modelers, swimlanes, Visio BPMN import/export | | Data modeling | ER diagrams, database schema designers, data mapping tools | | UML & software modeling | Class, sequence, statechart and use-case diagrams | | Industrial / SCADA & HMI | P&ID diagrams, monitoring and control dashboards | | Energy networks | Power and telecom network diagrams, DWDM circuits | | Electronic design | Logic circuits, wiring and cable diagrams | | Org charts | Organizational charts, hierarchy and tree builders | | Timelines | Project and milestone timelines, Gantt and PERT charts |

Explore all 180+ demo apps that serve as boilerplates for your project.

Framework integrations

JointJS is framework-agnostic and works with any frontend stack. React has first-class, native support; the others have integration guides and examples:

React — native components and hooks (JointJS for React)
Angular
Vue
Svelte
Salesforce Lightning

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

Using JointJS with AI coding agents

JointJS is built to work well with AI-assisted development.

MCP server — connect your AI coding agent (Claude Code, Cursor, and other MCP-compatible tools) to the JointJS Model Context Protocol server so it can search the official docs and demos while you build.

https://mcp.jointjs.com/mcp

Exposes searchdocs and searchdemos so your agent writes correct JointJS code against the real API instead of guessing.

Supported browsers

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

Commercial version

The open-source library covers core diagramming. JointJS+ adds production-ready plugins (stencils, inspectors, toolbars, advanced layouts, import/export, and more), professional demo apps (including source code), JointJS for React, and direct support from the team that builds the library. Start a free 30-day trial.

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:

The installation requires Node version >= 20.19.3, to avoid syntax errors during installation.

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.