The jsPlumb Toolkit is a wrapper around the open source jsPlumb library that provides several key pieces of functionality:
• Data binding via client side templates, supporting declarative configuration of connectivity.
• An underlying directed graph, allowing you to query the data in several ways.
• A pan/zoom widget with the ability to serialize its state (either manually or automatically) to local storage or cookies.
• A minimap widget to assist in the navigation of large datasets.
• Automatic layouts (Hierarchical, Spring, Circular, Balloon, Absolute), plus the ability to write your own.
• A powerful declarative mechanism for defining the appearance and behaviour of the various parts of your UI.
• Data load/save Either automatically or on-demand.
• Angular 7/6/5/4/2 integration
• Angular 1.x integration
• React integration
• Vue 2 integration
The Toolkit version of jsPlumb has the Community version as a dependency. These docs refer to version 1.14.0.
This site provides the documentation for the Toolkit edition. For Community edition documentation, visit the project site on Github.
Getting Started
The best place to get started familiarising yourself with the architecture of the Toolkit is to read through the documentation on one of the example applications - either the Database Visualizer or the Flowchart Designer. Then, with your licensed copy of the Toolkit, you can use Grunt to create a clone of one of these apps and start hacking away.
You can also use Grunt to create an empty application if you'd prefer to start with a basic skeleton.
Alternatively, you might like to start with the documentation. The Data Model and Basic Concepts pages are the best places to start looking around. In a nutshell, the Toolkit uses a directed graph as its core data structure. Every app that has a need for jsPlumb - which is to say a need for the ability to connect entities - can be thought of in terms of a directed (or undirected) graph.
Data Model
The core model abstraction in the jsPlumb Toolkit is that of a Graph, or more properly, a Directed Graph, as discussed here:
http://en.wikipedia.org/wiki/Directed_graph
A Graph is a collection of Nodes, Groups, Edges and Ports.
• Nodes map to entities in your data model.
• Ports are points on your Nodes that are the endpoint of some relationship with another Node, or with a Port on another Node.
• Edges are relationships between Nodes, Groups or Ports.
• Groups are collections of Nodes.
Example - Database Visualizer
As an example of how these data types map to an application - in the Database Visualizer application that ships with the Toolkit - Nodes, Edges and Ports are mapped as follows:
• Nodes are tables in a database schema
• Ports are columns on a table
• Edges are relationships between columns on two tables
Example - Flowchart Builder
In the Flowchart Builder application, Nodes, Edges and Ports are mapped as follows:
• Nodes are objects in the flowchart such as questions or actions.
• Ports are used to model the yes/no connection points from a Question. Action Nodes do not have Ports as they have only one output and this is assigned to the Node itself.
• Edges are the control flow of the chart.
Neither of these applications make use of the concept of Groups, which are new in version 1.1.0. We're currently evaluating a few different options for a demonstration application that uses Groups.
Every application using the Toolkit will have its own mapping of concepts to Nodes, Groups, Edges and Ports. Some applications may not even use Ports at all, since every Node can be an Edge target and/or source. Ports just give you the ability to model more complex data structures.
Paths
In addition to Nodes, Ports and Edges, the Toolkit has the concept of a Path: an in-order list of Nodes/Ports and Edges that represent the path from one Node or Port to some other Node or Port. These are a very useful way of querying, and operating on, your model. Paths are discussed in a separate page.
For more details on our products and services, please feel free to visit us at gantt chart, diagram, process flow, process chart, Flowchart