jsPlumb Tutorial: Add Diagramming Features to your Javascript Projects (Build a Workflow Editor)

While not necessary, if you enjoyed this video, buying me a coffee is greatly appreciated!

One of my side projects is building a low code workflow tool that helps power users design and automate file transfer/SFTP related business processes. One of the components of this workflow tool is a graphical workflow editor that allows users to create a sequence of file processing tasks without coding. I looked into a few JavaScript libraries to help me implement this and the one that caught my eye the most was jsPlumb because of its flexibility - everything is just HTML elements. In this video, I'll provide quick tutorial on jsPlumb and we'll build a simple workflow editor together as we go through some basic jsPlumb concepts.

Source code from this video:

Documentation for jsPlumb Community Edition:

Introduction 00:00
jsPlumb Concepts 00:47
HTML Boilerplate 02:28
Adding Controls 02:50
Initial jsPlumb 04:40
Add Endpoints 05:30
Register Connection Type 10:00
Delete Connections 12:30
Delete Controls 18:10
Populate Toolbox 20:55
Making Controls in the Toolbox Draggable 21:53
Making the Diagram Droppable 23:00
Changing Connector Style 26:30

[BlurryBit]

Very helpful. Keep up the good works. :)

[wesleyd]

Thank you so much. It helped a lot. You got a subscriber.
I'm researching something about EditableFlowchart. I've been there for days, but the documentation still seems obscure to me. Any suggestion?
2.xx Community

[coffeecuppepsi]

this is exactly what i needed. how easy is it to retrieve connections afterwards? i.e. click a button and have a report generated indicating where each connection is made...

[suleymanemiryavuzaslanoglu]

Thank you very much. It's very helpful video but i have a question. How do i smooth the corners in the diagram with a button?

[tjtate]

would love to see the future video of the simple workflow engine. does that exist? this is most helpful thanks

[aldolopez]

Hi, thanks for the video. I tried to use the community version in vue js but couldn't integrate it. Can you give me a suggestion please?

[vineethakammarachedu]

i have used the same code given in the description, but i am not able to drag elements and connect them. can you help me why it is giving an error

[Omcsesz]

Can you please update the gist with the latest version of the code you created in the video?

[anchalavinash]

Hi,
I am using JSPlumb version 5 and trying to do:
instance.addEndpoint(control1,
{
endpoint: 'Dot',
containement: true,
}
)

But it is not working. How to restrct node in that container for version 5?

[this.namanjain]

sir how to use jsplumb with angular12 ?
as the jsplumb community version is under production mode for typescript as beta version so i am not able to understand the connectivity
I am making SPA which use node connectivity which is similar to yours, so can you please help in this.
thank you

[monmon]

Hi, can I know how to get the data that each node and the connection sequence data?

[rahulnellepalli]

dd.html:121 Uncaught ReferenceError: jsPlumb is not defined
at dd.html:121:3


im getting jsplumb not defined error while running your source code can u please help

[JohnSnow-giiv]

does it support integration with angular 11? i have updated my project from angular 6 to angular 11, now jsplumb is not working. jsplumb version 2.9.0

[muhamadtaufan]

What of the convert to PDf ? Please give me tutorial .. ;)

[ghnasatru]

Are there any more videos for jsPlumb?

[micaelagordillo]

Is it possible to set the value of the conection?

[harshavardhan-ryhe]

How to learn jsplumb with react integration