Due to the pop­ular­ity of my art­icles on jsPlumb, I am receiv­ing more and more requests for help with jsPlumb prob­lems. As hon­oured as I am by your requests, and as much as I would love to help each and every one of you with a com­plete solu­tion, I am unfor­tu­nately unable to do so. A fam­ous Chinese pro­verb is applic­able here: “Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a life­time.” In this art­icle, I want to teach you how to fish by show­ing four resources that you can use to get more and bet­ter help on jsPlumb faster than you could ever get from me directly.
Continue read­ing

In the pre­vi­ous art­icles in this series, we have built func­tion­al­ity that allows our users to cre­ate a graph and give a name to the states in that graph. In this art­icle we will take a look at how we can have the user save the graph he has created.

There are two ways to save your graph. The first approach is to send a call to the server every time the user cre­ates a con­nec­tion. The second one is to save the entire graph in one go when the user clicks a save button.
Continue read­ing

When you need to cre­ate schem­at­ics or dia­grams in your webap­plic­a­tion, or have your user cre­ate these, jsPlumb is a won­der­ful lib­rary to use. An example of a use case for some­thing like this is hav­ing the user cre­ate a flow dia­gram for a pro­cess he or she is modeling.

In the pre­vi­ous art­icle in this series, we made some divs that the user could con­nect using jsPlumb. Only con­nect­ing a few pre­defined items is not very use­ful. In this art­icle we will see how to have the user add new items and how to make them draggable.

Continue read­ing

The ori­ginal art­icle was pub­lished on 13 January 2013. It has been updated on 14 August 2014 to reflect the new­est ver­sions of jsPlumb and jQuery.

When you need to cre­ate schem­at­ics or dia­grams in your webap­plic­a­tion, or have your user cre­ate these, jsPlumb is a won­der­ful lib­rary to use. An example of a use case for some­thing like this is hav­ing the user cre­ate a flow dia­gram for a pro­cess he or she is modeling.

The jsPlumb-website has some great demos and a lot of doc­u­ment­a­tion. An easy guide to get star­ted is, how­ever, not avail­able. This art­icle will get you up and run­ning with jsPlumb in no time!

Continue read­ing