Skip to main content
Demonstration:

This is a demonstration of the path tracing functionality. Nodes here are positioned randomly and then moved as if they were connected with springs to each other, using the ForceDirected layout.

Click a node to select it. Then click another node. The shortest path between the two nodes will be traversed with an overlay. If no path exists (which can happen due to the fact that edges may be one-way), an alert will show.

Use the pause/play/cancel buttons to change the state of the path trace animation.

The source code for this application - and several others - is available on Github here. If you haven't got a license for the Toolkit, we offer 30 day evaluations.

Path tracing
What is a Graph?

A graph is a structure that consists of a set of objects in which some set of pairs are related. The objects in the set are variously referred to as vertices or nodes, and sometimes points. The relationship between any two vertices is referred to as an edge, or link. Edges may be directed or undirected.Wikipedia gives a good example of directed vs undirected edges:

For example, if the vertices represent people at a party, and there is an edge between two people if they shake hands, then this graph is undirected because any person A can shake hands with a person B only if B also shakes hands with A. In contrast, if an edge from a person A to a person B means that A owes money to B, then this graph is directed, because owing money is not necessarily reciprocated

Edges may also be weighted, which is the concept of how "expensive" it is to travel along that edge. A good analogy for this can be found in road networks: when a particular road is choked with traffic, we'd assign it a high weight value, whereas roads that have little to no traffic would be assigned a low value. Of course this is a simplified take: the weight of a road segment is more properly a measure of its current throughput, and in the real world we'd take into account how many lanes has, what the average speed is, etc. Interestingly, the nucleus of the Toolkit's data model came directly from some JS code we wrote many years ago as part of a road traffic simulation.

What is a Path?

A Path is a sequence of vertices in which the target vertex of one edge is the source vertex of the next edge in the path. Where a graph contains directed edges, it may be the case that some vertex is not reachable from some other vertex, ie. there is no path available.

How are paths calculated?

There are a number of different algorithms that are used to calculate paths in graphs. One of the most well-known, and the one that the Toolkit uses, isDjikstra's algorithm. In summary, Djikstra's algorithm works by assigning a 'distance' value for every vertex in the graph except for the source vertex, with an initial value of Infinity for each vertex. From the source vertex we find its neighbours, and then compute the distance to that neighbour from the weight of the edge. We then repeat the process using each of the neighbours as the focus. Each time we process a neighbour we check to see if our new computed distance to that neighbour is less than a previously computed distance, and if so, we store it. Once all the distance to every vertex has been computed we track back from the target vertex along the path represented by the minimum distance.

Paths in the jsPlumb Toolkit

The Toolkit has at its core an implementation of a graph. Whenever you add a node to an instance of the Toolkit, that node is added as a vertex to the underlying graph. Whenever you establish a connection between two nodes, that connection is added as an edge to the underlying graph. This foundation adds a great deal of power to the Toolkit - you can reason with and interrogate its data model.

As mentioned above, the Toolkit uses the Djikstra algorithm to computer paths between vertices, but in fact we use a modified version which is able to take "ports" into account.

The Toolkit offers a number of methods for working with paths, which are discussed on our site here: https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/paths.

Path tracing in the jsPlumb Toolkit

The Toolkit's Surface renderer offers a complete solution for tracing paths through the UI. As shown in the demo above, there is a transport control available, and throughout the lifecycle of a path trace a number of CSS classes are used. You can read about path tracing in full on our site here: https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/path-tracing.

Further information
Fork me on Github
Flowchart Builder
Flowchart builder application - jsPlumb Toolkit, leading alternative to JointJS and GoJS
Fully featured flowchart builder for you to use as a base for your own apps. Includes support for custom shapes, edge routing, node resizing, and SVG/PNG/JPG export. Angular, Vue 2, Vue 3, React and Svelte versions available.
Schema Builder
Database schema builder application - jsPlumb Toolkit, leading alternative to JointJS and GoJS
Includes support for tables, views, multiple columns types, and column relationships. Easily extensible. Angular, Vue 2, Vue 3 and React versions available.
Chatbot Builder
Chatbot builder application - jsPlumb Toolkit, leading alternative to JointJS and GoJS
Use the Toolkit to build a chatbot flow, with actions, messages, input and choices. Angular, Vue 2, Vue 3, React and Svelte versions available.
Org chart
Org chart application - jsPlumb Toolkit, leading alternative to JointJS and GoJS
The Toolkit makes it simple to build interactive org charts. This starter app uses the classic org chart layout and provides an inspector from which the user can navigate around. Angular, Vue 2, Vue 3 and React versions available.
Mindmap Builder
Mindmap builder application - jsPlumb Toolkit, leading alternative to JointJS and GoJS
Simple mindmap builder, highlighting several advanced features the Toolkit offers, such as custom layouts, parsers and exporters
Nested Groups
Element grouping demonstration - jsPlumb Toolkit, leading alternative to JointJS and GoJS
Learn about how the Toolkit lets you work with groups nested to an arbitrary level, with full drag and drop support.
Path Tracing
Path tracing demonstration - jsPlumb Toolkit, leading alternative to JointJS and GoJS
Leverage the Toolkit's underlying Directed Graph to visualize paths between elements.
Hello World
Hello world demonstration - jsPlumb Toolkit, leading alternative to JointJS and GoJS
This app is designed to give you a basic starter app from which you can build your own, without any of the bells and whistles included in our other starter apps.
Image Processor
Image processor application - jsPlumb Toolkit, leading alternative to JointJS and GoJS
Fully featured image processor using HTML canvas for you to use as a base for your own apps. Angular, Vue 2, Vue 3, React and Svelte versions available.
Neighbourhood Views

Neighbour views dynamic selections demonstration - jsPlumb Toolkit, build diagrams and rich visual UIs fast

Use popups and the Toolkit's ability to dynamically render selections to provide neighbourhood contextual information for some selected element
Active Filtering

Active filtering demonstration - jsPlumb Toolkit, industry standard diagramming and rich visual UI Javascript library

Filter drag targets as your users start to drag new connections using the ActiveFiltering plugin.
Segmented Connectors

CAD Drawing tools demonstration - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

An adaptable connector that consists of a series of segments, with the option to smooth to a set of Bezier splines
Hierarchy Layout

Org chart layout demonstration - jsPlumb Toolkit - JavaScript diagramming library that fuels exceptional UIs

The classic organization chart layout, with support for horizontal/vertical axis and a number of different alignment options
Layouts

Force directed layout demonstration, org chart layout demonstration - jsPlumb Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

A playground for testing the various layouts that the Toolkit offers - Hierarchy, Force Directed, Circular, Balloon and more.
Collapsible Hierarchy

Collapsible hierarchy Italic language family demonstration - jsPlumb Toolkit, build diagrams and rich visual UIs fast

Use the Toolkit's ability to render a dynamically collapsible and expandable hierarchy.