Build a production-grade AI workflow builder — with a proven diagram library

BOiLERPLATE

AI Workflow Builder

The JointJS AI workflow builder demo is a fully working starting point: custom node types for LLMs and tools, configurable property editor, drag-and-drop stencil, edge routing, and undo/redo included. Wire up your execution backend and ship.

Get started on your framework

Javascript

more demos

Start your AI UI from a working demo

Production-ready examples you can clone and adapt to your stack.

explore demos

Use cases

Who builds AI workflow UIs with JointJS

Visual AI workflow tools are diagramming apps at their core. JointJS is built for canvases that are embedded, branded, and production-ready.

AI pipeline and agent builders

Tools where users connect LLMs, retrievers, and memory into a running pipeline. JointJS handles arbitrary graph topology and gives you full control over node rendering and port-level connection rules.

Embedded AI automation platforms

Customer-facing workflow builders embedded in SaaS products. The canvas matches your design language, exposes only the primitives your users need, and scales with real complexity.

AI execution tracing and observability

Read-only canvases that visualize how a pipeline ran, generated from trace data and updated live. JointJS handles high node density and real-time state without a separate display layer.

Internal AI pipeline tooling

Visual interfaces for designing and debugging multi-step AI pipelines internally. Not customer-facing, but embedded in a larger platform and built for your team's workflow.

customer story

Trusted by global innovators

👁 Image
👁 Image

“Implementing JointJS in our AI onboarding platform has been a game-changer for us! We were able to save significant time and resources by leveraging JointJS's robust diagramming capabilities instead of building this functionality from scratch. This has enhanced our product's overall functionality and user experience.”

Rasmus Stjernström

CEO, Silo team

read customer story

Features

What JointJS+ gives you out of the box

Fully custom node UIs

Every node can render complex, interactive UI inside the diagram, like model selectors, prompt editors, sliders, and output previews. Rendering, state, and interaction behavior are all under your control.

Execution state visualization

Attach live run state to nodes and edges, and animate data flow between steps. Reflect real-time pipeline execution in the canvas without building a separate display layer.

Arbitrary graph topology

AI pipelines need cycles, conditional branches, and dynamic subgraphs that strict DAG libraries can't represent. JointJS handles non-DAG structures, bidirectional edges, and complex port-level constraints without fighting the library.

Port-level connection control

Define exactly which ports can connect to which, then enforce those rules at interaction time so users only build valid pipelines.

Virtual rendering for large graphs

JointJS renders only the elements in the viewport, so performance stays consistent as pipelines grow to hundreds of nodes. Most lightweight node-graph libraries can't do this.

Compound undo/redo

Every action, including cascading deletions across connected nodes and edges, is reversed as a single atomic operation.

Framework-agnostic

JointJS works with React, Angular, Vue, Svelte and TypeScript, integrating cleanly without imposing constraints on your application architecture.

Commercial support subscription

Dedicated support with guaranteed response times and verified answers to your customization questions, not GitHub issues and source code reading.

comparison

Lightweight libraries get you to a demo. JointJS gets you to production.

Lightweight node-graph libraries are fast to prototype with. The tradeoffs show up in production: complex node UIs, large graphs, custom interaction logic, branding requirements.

Feature

SVG rendering with full shape control

Virtual rendering for large graphs

Custom node UIs beyond HTML divs

Arbitrary graph topology (cycles, dynamic subgraphs)

Port-level connection constraints

Built-in execution state visualization

Compound undo/redo

Full UI component set

Framework-agnostic (React, Angular, Vue, Svelte)

Perpetual commercial license

Dedicated support with guaranteed SLAs

Lightweight libraries

When JointJS makes sense

Customer-facing product with the canvas at the core
Pipelines that grow to hundreds of nodes
Rich node UIs: forms, selectors, previews
Custom port-level connection logic
Live execution state in the canvas
Expert technical support required

When lightweight libraries makes sense

Internal prototype or proof of concept
Low graph complexity, simple node UIs

ROI analysis: See how much JointJS+ saves you

What will your savings be in 3 years? We compared two scenarios, building a custom canvas from scratch vs. shipping on JointJS+, to find out.

read the roi analysis

testimonials

What engineering teams say

“ I worked with JointJS+ on different projects to build graphical editors and it helps me get off the ground quickly. Most of the features that you know from other modern editors, even the more advanced ones, are prebuilt in the framework and can be enabled with just a few lines of code. All other features can be added easily due to the framework‘s open nature. And if you get stuck, they provide excellent technical support where you can get in touch directly with the creators of the framework. ”

Andreas Mülder

Team Leader, Itemis

“ JointJS+ has allowed us to deliver top-notch features and complex mechanisms with ease. Its efficient documentation, fast implementation and great customer support was exactly what we were looking for. ”

👁 JointJS blog (preview image)

Alon doron

Software Engineer, NICE Systems Ltd.

Content hub

All about AI diagramming

Visit blog

Introducing JointJS MCP Server: Better code from your AI agent

Zoran Jambor

May 25, 2026

A guide explaining what the JointJS MCP Server is, along with detailed instructions on how to install it to a local folder, in user scope, or in JSON to share with your team, and what the benefits of using it are.

AI Diagramming

👁 JointJS blog post preview

A hands-on overview of JointJS diagramming library performance, stress-testing up to 100,000 diagram elements/nodes.

Zoran Jambor

May 8, 2026

JointJS performance overview: Testing diagrams with 100,000 nodes

Guides

👁 JointJS blog post preview

Claude Code Playground generates useful diagrams, but they're static and limited. This guide shows how to install the JointJS Claude Playground plugin and use it to build interactive codemaps, visual SQL builders, decision trees, site explorers, and more.

Zoran Jambor

Apr 10, 2026

Build better Claude Code Playgrounds with JointJS

AI Diagramming

👁 JointJS blog post preview

A hands-on guide that shows you how to use AI Coding Agents to easily customize an existing JointJS demo to match your exact needs.

Zoran Jambor

Mar 17, 2026

Tutorial: Customize JointJS demo app with Claude Code

AI Diagramming