jsPlumb is all about connecting things together, so the core abstraction in jsPlumb is the Connection object, which is itself broken down into these five concepts. The jsPlumb Toolkit is an advanced, standards-compliant and easy to use library for building Javascript connectivity based applications, such as flowcharts. jQuery/MooTools/YUI3 Javascript library that lets you connect parts of your UI together.

Author: Mezijinn Turan
Country: Bolivia
Language: English (Spanish)
Genre: Finance
Published (Last): 25 May 2006
Pages: 460
PDF File Size: 19.89 Mb
ePub File Size: 16.24 Mb
ISBN: 297-2-93153-728-1
Downloads: 20070
Price: Free* [*Free Regsitration Required]
Uploader: Yozshujar

jdplumb Hi all, today in my blog post I am going to continue the session on implementing a flowchart diagram editor using jsPlumb. This is the 3rd and last part of the session. The initial implementation of this editor can be found in my tuforial two blog posts.

Almost all the requirements of the editor is now completed. The remaining two tutoriwl are as follows:. To implement the 1 tutorjal requirement, we have to add a delete icon provided by font-awesome library to each and every element.

That is why we used the following jjsplumb within the createElement function See tutorial Part 2. To include this icon you need to have font-awesome. The easiest way to do this is to include the CSS file within the head tag as follows:.

The decision element was created by rotating the step element. Hence the position of the delete icon differs from that of the other elements.

That is why I used an If-Else condition in the above function. The positions are calculated based on the element width. The 3 different conditions had to be checked as the basic elements contains paragraph and strong element tags and user might click on one of those elements when selecting the whole element.


We use the jsPlumb functionalities to accomplish this task. We can remove elements from the canvas using the jsPlumb.

Now we can move on to implement the 2 nd requirement which is to save the flowchart diagram to a JSON string.

This is quite straight forward. If you know how to extract the required details using the jsPlumb API, then implementing this functionality is very easy. I recommend you to try first before using the function I implemented. However, as a starting point, I will define the structure of the JSON string keep in mind that you can define your own structure.

Implementing a Flowchart Editor Using jsPlumb – Part 3

I am giving this to make it easy for you! The structure would be as follows:.

Now we implemented the 2 nd remaining requirement thereby finishing the whole flowchart diagram editor. Since I gave almost every code segment for this editor, I would like to present a homework for the reader.

Now you are familiar enough with jsPlumb and it is time for you to write your own functionality jsplujb display a delete icon on top of the connections and delete the corresponding connection by jsllumb the icon.

This can be easily done using the jsPlumb Overlays. This is the end of the 3 rd and final part of the tutorial I wrote to implement a flowchart diagram editor using jsPlumb.

I hope this may be useful to you. Please comment your suggestions as well as problems if jslpumb get any while reading the post.

This tutorial was based on the flowchart diagram editor I implemented for the WSO2 Process Center during my internship training period. Do you happen to have to files that are the end result of each step or the final product which you can share?


Hi Chad, Thank you! You can access the working demo here: Hi Dilini Mampitiya an thank you for posting this interesting tutorial. Thank You again Gianni from Italy.

Getting started with jsPlumb | Emiel on software development

Hi Gianni, Thank you! Like Liked by 1 person.

You are commenting using your WordPress. You are commenting using your Twitter account. You are commenting using your Facebook account. Notify me of new comments via email. Skip to content May 12, May 12, dilinimampitiya. They are, Flowchart diagram editor — Part 1 Flowchart jspplumb editor — Part tutodial Almost all the requirements of the editor is now completed.

The remaining two requirements are as follows: As the most convenient way of saving, I will show how the diagram can be saved in to a JSON string so that users can later retrieve the diagram easily.

JS Plumb – JavaScripting

The easiest way to do this is to include jsppumb CSS file within the head tag as follows: To make the border highlighted with red, we can write the following function: The structure would be as follows: Leave a Reply Cancel reply Enter your comment here Fill in your details below or click an icon to log in: Email required Address never made public.

This site uses cookies. By continuing to use this website, you agree to their use. To find out more, including how to control cookies, see here:

Author: admin