Skip to main content

Features

The jsPlumb Toolkit has an extensive feature set to allow you to rapidly build diagrams and UIs with rich graphical content. Click on individual items here to read more

Library Integrations

Angular - jsPlumb Toolkit, industry standard diagramming and rich visual UI Javascript library

Angular

Use rich Angular components to represent the nodes/groups in your UI and our underlying service to wire everything up

X

Angular - jsPlumb Toolkit, industry standard diagramming and rich visual UI Javascript library

Angular

The Toolkit offers a number of Angular components that you can drop straight in to your app.

The ability to map a node/group type to an Angular component means you can rapidly build very complex interfaces with great isolation of concerns, and take advantage of all the underlying power Angular offers.

Our jsPlumb Angular service can be injected anywhere in your app and offers access not only to Toolkit instances and surfaces, but also SVG/PNG/JPG export and a get/set data storage mechanism.

In our demo applications repository you can find our Angular flowchart, chatbot, schema builder and mindmap.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderhttps://jsplumbtoolkit.com/demonstrations/mindmap-builderhttps://jsplumbtoolkit.com/demonstrations/schema-builderhttps://jsplumbtoolkit.com/demonstrations/chatbot
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/angular-integration

React - jsPlumb Toolkit - JavaScript diagramming library that fuels exceptional UIs

React

Seamlessly integrate the Toolkit into a React app, with both components based and hooks based approaches supported.

X

React - jsPlumb Toolkit, build diagrams and rich visual UIs fast

React

The Toolkit offers a number of React components that you can drop straight in to your app. Both component based and Hooks based UIs are supported seamlessly.

The ability to map a node/group type to a React component means you can rapidly build very complex interfaces with great isolation of concerns, and take advantage of all the underlying power React offers.

In our demo applications repository you can find our React flowchart, chatbot, schema builder and mindmap.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderhttps://jsplumbtoolkit.com/demonstrations/mindmap-builderhttps://jsplumbtoolkit.com/demonstrations/schema-builderhttps://jsplumbtoolkit.com/demonstrations/chatbot
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/react-integration

Vue - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Vue

Leverage the power of the Toolkit's tight integration with Vue 2 and Vue 3

X

Vue - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Vue

We offer tight integration with both Vue 2 and Vue 3, including Vue 3's composition API. The ability to map a node/group type to a Vue component means you can rapidly build very complex interfaces with great isolation of concerns, and take advantage of all the underlying power Vue offers.

In our demo applications repository you can find our React flowchart, chatbot, schema builder and mindmap.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderhttps://jsplumbtoolkit.com/demonstrations/mindmap-builderhttps://jsplumbtoolkit.com/demonstrations/schema-builderhttps://jsplumbtoolkit.com/demonstrations/chatbot
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/vue2-integrationhttps://docs.jsplumbtoolkit.com/toolkit/6.x/lib/vue3-integration

Svelte - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Svelte

Embed the Toolkit into a Svelte app with no fuss using our deep integration

X

Svelte - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Svelte

We're big fans of Svelte ourselves and are pleased to offer a solid integration between the Toolkit and Svelte. The ability to map a node/group type to Svelte components means you can rapidly build very complex interfaces with great isolation of concerns, and take advantage of all the underlying power Svelte offers.

In our demo applications repository you can find our Svelte flowchart, chatbot, schema builder and mindmap.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderhttps://jsplumbtoolkit.com/demonstrations/mindmap-builderhttps://jsplumbtoolkit.com/demonstrations/schema-builderhttps://jsplumbtoolkit.com/demonstrations/chatbot
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/svelte-integration

Layouts

Standard Layouts - jsPlumb Toolkit, industry standard diagramming and rich visual UI Javascript library

Standard Layouts

Force directed, Hierarchy, Balloon, Circular and Absolute positioning layouts are provided out of the box.

X

Standard Layouts - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Standard Layouts

The Toolkit ships with four popular automatic positioning layouts:

  • Force directed
  • Circular
  • Hierarchy
  • Balloon
As well as an Absolute layout, in which the elements of your UI are positioned according to left/top values in the data model.

Many rich graphical UI applications offer the user the ability to manage the position of the elements themselves, making the Absolute layout a common choice, but when a user has not placed an element you'll need to use an automatic placement layout to put that element somewhere.

All of the Toolkit's layouts have the feature of being backed by the Absolute layout - meaning, if a user has chosen where an element should go, it goes there, and if they haven't, it gets placed automatically. Best of both worlds!
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/layouts
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/layouts

Custom Layouts - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Custom Layouts

The Toolkit makes it a snap to create your own layout, should one of our standard layouts not suffice for your use case.

X

Custom Layouts - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Custom Layouts

Creating a custom layout is a straightforward process - extend AbstractLayout, implement a few lifecycle methods, and don't forget to tell the Toolkit when you're done!

A great example of the ease with which this can be achieved is demonstrated by our mindmap builder, for which there are versions in vanilla Javascript, Angular, React, Vue 2, Vue 3 and Svelte.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/mindmap-builder
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/layouts#custom-layouts

Magnetizer - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Magnetizer

The built-in magnetizer lets you make small adjustments to your UI to achieve the perfect layout.

X

Magnetizer - jsPlumb Toolkit - JavaScript diagramming library that fuels exceptional UIs

Magnetizer

At various points in the lifecycle of the UI you can trigger a magnetizer to make minor adjustments to the positions of your nodes and groups.

The default behaviour of the magnetizer is to treat every node/group as a charged magnetic particle and to push them all away from each other.

You can magnetize around some specific point in the canvas, or around some element, or at the position identified by some mouse event. You can also run the magnetizer in "gather" mode, in which elements are drawn in to gather around some specific location.
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/magnetizer

Components

Surface - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Surface

The Surface is the heart of the Toolkit's UI, offering an infinitely pannable canvas with the smoothest zoom for miles around.

X

Surface - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Surface

The Toolkit's surface widget provides a canvas with infinite pan onto which your nodes, edges and groups are rendered.

  • Infinite pan
  • Zoom with mouse wheel or pinch on touch devices
  • Clamp pan/zoom so content never disappears from view
  • Numerous plugins supported (drawing tools, miniview, pan buttons, backgrounds)
  • Comprehensive set of events published
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderhttps://jsplumbtoolkit.com/demonstrations/mindmap-builderhttps://jsplumbtoolkit.com/demonstrations/schema-builderhttps://jsplumbtoolkit.com/demonstrations/chatbot
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/rendering

Miniview - jsPlumb Toolkit - JavaScript diagramming library that fuels exceptional UIs

Miniview

Attach a miniview to a surface and see your world in miniature. Pan and zoom directly on the miniview component to control the surface.

X

Miniview - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Miniview

The miniview plugin for the surface component tracks the nodes and groups in your canvas, allowing you to see the whole dataset at a glance. A panner shows how the visible area of the canvas maps to the full dataset, and you can pan and zoom directly on the miniview to control the surface.

We use the miniview plugin in many of our demos - the flowchart builder, chatbot, mindmap builder and many more.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderhttps://jsplumbtoolkit.com/demonstrations/chatbothttps://jsplumbtoolkit.com/demonstrations/mindmap-builder
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/miniview

Node palette - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Node palette

Drag and drop new nodes/groups onto your canvas with the SurfaceDropManager

X

Node palette - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Node palette

Use any markup of your choice to render a set of items that you want to enable your users to drag onto your canvas.

Then create a SurfaceDropManager, give it a CSS selector that identifies what should be draggable, and you're done!

The drop manager can be configured to allow drop on the canvas and/ onto nodes, groups and edges. You can switch it on and off with a single method call, and we ship wrapper components for all of our library integrations - Angular, Svelte, React, Vue 2 and Vue3.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderhttps://jsplumbtoolkit.com/demonstrations/chatbot
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/drag-and-drop

Controls - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Controls

Manage surface mode (pan/lasso), undo/redo, zoom to extents from the Controls component.

X

Controls - jsPlumb Toolkit, build diagrams and rich visual UIs fast

Controls

This helper component can either be dropped directly into your app or used as a basis for your own implementation. Manage surface mode, lasso, undo/redo all in one place.

The controls component is very easily skinned via CSS, and we ship a component version of it for Angular, Vue and React.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builderhttps://jsplumbtoolkit.com/demonstrations/chatbothttps://jsplumbtoolkit.com/demonstrations/mindmap-builderhttps://jsplumbtoolkit.com/demonstrations/schema-builder
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/controls-component

Dialogs - jsPlumb Toolkit, industry standard diagramming and rich visual UI Javascript library

Dialogs

Straightforward and easily skinned dialog manager, with tight data binding to your model.

X

Dialogs - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Dialogs

Originally written for our demonstration pages, the Toolkit's Dialogs are a lightweight solution that integrate nicely with the data model and the Surface widget.

Each dialog consists of some HTML that you create, and you map input fields to fields in your data via a set of attributes. Easily styled and easy to integrate.
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/dialogs

Inspector - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Inspector

Property inspector component for the objects in your model. Supports inspecting multiple objects of disparate types at once.

Element Dragger - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Element Dragger

A helper class that you can use to turn any part of your UI external to the canvas into a draggable element

X

Element Dragger - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Element Dragger

Sometimes you'll build a UI with the Toolkit that has some elements which are not on your canvas but which you would like your users to be able to drag around. We had this requirement ourselves recently while building our Neighbourhood views demonstration, so we created the Element Dragger to help with the task.

Features include:

  • Optional filter to denote parts of your element that should not kick off a drag
  • Optional constrain function, to implement fine grained control over where your users can drag elements to
  • Optional containment specifier - limit drag to parent element, either fully or partially, and optionally prevent dragging into the negative axis.
Related demonstrations:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/starter-app-neighbourhood-view
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/element-dragger

Data Model

Graph operations - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Graph operations

A full set of operations on the underlying graph let you query and manipulate your dataset with ease

X

Graph operations - jsPlumb Toolkit, build diagrams and rich visual UIs fast

Graph operations

The Toolkit thinks of the world in terms of nodes, groups, ports and edges, all of which belong to a graph.

You can query the graph and operate on it without concerning yourself with the UI, knowing that the Toolkit will keep everything in sync.

Want to know if some node is connected to another? Easily done. Or maybe you want to find the shortest path from some node to another node? Find all the edges for which some element is the source? The Toolkit can tell you all of these things.
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/data-model

Undo & Redo - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Undo & Redo

Limitless stack of operations allowing your users to undo and redo to their hearts content.

X

Undo & Redo - jsPlumb Toolkit, industry standard diagramming and rich visual UI Javascript library

Undo & Redo

Every operation in the Toolkit is pushed onto an undo/redo stack, which, by default, has a limitless size, although you can specify a maximum if you'd like to.

A full set of events is fired by the Toolkit in response to operations on the undo/redo stack, allowing you to very easily maintain the state of any UI components you've got linked to it.

Undo stacks of a fixed size, when full, can either reject new operations, replace the most recent operation, or throw away the oldest operation to accomodate a new one.

Undo/redo is used in many of our demonstrations.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builder
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/undo_redo

Transactions - jsPlumb Toolkit, industry standard diagramming and rich visual UI Javascript library

Transactions

Wrap multiple operations in a transaction and undo/redo them all in one atomic operation

X

Transactions - jsPlumb Toolkit, build diagrams and rich visual UIs fast

Transactions

Rich graphical UIs are complex beasts, involving a lot of moving parts. When a user changes one thing in the UI it often causes a bunch of other stuff to update too.

For instance, say you delete a shape in a diagram. Any edges attached to that shape must also be deleted, and the Toolkit wraps all of those deletions into a single transaction, so that the entire operation can be undone at once.

The Toolkit automatically wraps several other common operations inside transactions, but you can also access the transaction API yourself. Maybe you want to move a bunch of nodes around, update the properties of some of them, add a new edge - you can do all of that in one atomic operation via the Toolkit's transaction API.
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/undo_redo#transactions

Paths - jsPlumb Toolkit, industry standard diagramming and rich visual UI Javascript library

Paths

Query the Toolkit to find paths between elements and then animate them

X

Paths - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Paths

The Toolkit has a graph at its core, allowing you to ask questions like "what is the shortest path from A to B?" or "is C connected to D?" and so on. Once you have a path object, you can instruct the surface widget to animate an overlay along it - with a full transport mechanism available.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/paths
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/selections

Selections - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Selections

Select a set of nodes, groups and/or edges and perform operations on them at once. Or, use a selection as the data source for a Surface.

X

Selections - jsPlumb Toolkit - JavaScript diagramming library that fuels exceptional UIs

Selections

Baked right in to the Toolkit's data model is the concept of a Selection - a set of one or more nodes, groups and edges. The Toolkit offers a full set of methods to select objects and to then perform operations on the set as a whole - you can update everything in the selection at once, delete everything, iterate through the objects - selections are very powerful.

The surface widget can be created with a selection as its data source, allowing you to display some subset of the entire dataset but with the ability to apply a layout and to pan/zoom the content. When you create a selection with a generator function, you can subsequently reload the selection and the surface will update itself accordingly.

We use the concept of a selection as a surface's datasource in our Neighbourhood views demonstration, in which we have four popups that are each driven by a selection, and which listen to selection events from the Toolkit. When the user clicks on an element, each of the selections is reloaded and the popups seamlessly keep themselves up to date.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/neighbourhood-views
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/selections

Full text search - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Full text search

Attach a text search index to your Toolkit instance and run queries over the contents of the dataset

X

Full text search - jsPlumb Toolkit, build diagrams and rich visual UIs fast

Full text search

The Toolkit contains an implementation of an Inverted Index, which is a data structure used at the core of most search engines. It offers fast retrieval and random access.

Full text search of all your domain objects - nodes, groups and/or edges - is offered, across either all fields or a set of fields of your choice.
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/selections

Copy & paste - jsPlumb Toolkit, industry standard diagramming and rich visual UI Javascript library

Copy & paste

Easily copy nodes, groups and/or edges to the clipboard and paste them elsewhere in your UI

X

Copy & paste - jsPlumb Toolkit, build diagrams and rich visual UIs fast

Copy & paste

Copy and paste is built in to the surface widget, with an easy to use API. Grab a set of nodes, groups and/or edges from one part of your diagram, copy them to the clipboard, and then paste them elsewhere. The surface will clone all of the items in the clipboard and place them in your new location.

When pasting the contents of the clipboard you can specify an x/y location yourself, or you can provide a mouse event, which the surface will automatically map to a location on the canvas.

Groups - to an arbitrary depth - are, by default, copied with copies of all of their child elements.

The clipboard offers in-depth control over how edges are pasted - what happens if you have an edge in your clipboard but not both of the nodes it is attached to? The Toolkit's clipboard provides a detailed API for handling every case.
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/copy-paste

Drawing

Shape Libraries - jsPlumb Toolkit, build diagrams and rich visual UIs fast

Shape Libraries

Choose from our Basic or Flowchart shape libraries to render the nodes in your UI, or create your own!

X

Shape Libraries - jsPlumb Toolkit - JavaScript diagramming library that fuels exceptional UIs

Shape Libraries

A shape library is a set of named shapes that you will use to render SVG inside the vertices in your application. These are an ideal solution for all sorts of diagrams.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builder
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/shape-libraries

Resize Objects - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Resize Objects

The DrawingTools plugin allows you to select and resize objects using the mouse or touch events.

X

Resize Objects - jsPlumb Toolkit, build diagrams and rich visual UIs fast

Resize Objects

Drag the corners of nodes and groups to resize them using the Drawing Tools plugin.

Touch events are supported without any intervention required. Easily skinned via CSS.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builder
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/shape-libraries

Lasso - jsPlumb Toolkit - JavaScript diagramming library that fuels exceptional UIs

Lasso

The Lasso plugin allows you to select multiple elements via the mouse or touch events.

X

Lasso - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

Lasso

With the lasso plugin you can snag a set of nodes, groups and/or edges and have them automatically added to the Toolkit's current selection.

Items added to the current selection will be automatically detected by various other parts of the Toolkit's ecosystem - the surface will add CSS classes in response, and any attached inspectors will respond too.

Use the lasso in standard mode as shown above, or in "mask" mode - the inverse of the image above, where the unselected parts of the UI are masked.

Nodes and groups snagged by the lasso are automatically added to the surface's current drag group.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/schema-builderhttps://jsplumbtoolkit.com/demonstrations/flowchart-builder
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/plugins-overview#lassohttps://docs.jsplumbtoolkit.com/toolkit/6.x/lib/selections

Path editing - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Path editing

Click and drag to manually edit the paths of connectors with a powerful and intuitive interface

X

Path editing - jsPlumb Toolkit - JavaScript diagramming library that fuels exceptional UIs

Path editing

The Toolkit's powerful and intuitive path editors enable you to fine tune the appearance of your applications and diagrams.

Touch events are fully supported with no extra libraries or setup required.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/segmented-connectorshttps://jsplumbtoolkit.com/demonstrations/flowchart-builder
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/edge-path-editors

Snaplines - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Snaplines

Display visual cues to help your users align their elements

X

Snaplines - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Snaplines

The snaplines plugin draws snaplines on the canvas when elements are within some threshold, helping your users to get their diagram layouts just so. As with all our plugins, the Snaplines plugin is easily skinned via CSS.
Related demonstrations:
https://jsplumbtoolkit.com/demonstrations/flowchart-builder
Read more here:
https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/plugins-overview#snaplines