Implement a Flowchart Editor using jsPlumb – Part 1

Hi all, today in my blog, I am going to show how a simple flowchart editor can be implemented using jsPlumb.js library and the demo example given here.

I implemented a flowchart diagram editor for WSO2 Process-Center (Product-PC) during my internship training period and this tutorial is based on that editor.

As the first part, I am going to show how to implement the palette which contains the basic symbols and the drawing pane in which you can draw the flowchart diagram.

The ultimate outcome of part 1 is as follows:

interface

Figure 1 – The interface of the flowchart editor

Step 1: First let’s create the directory structure.

directory

Figure 2 – The directory structure

You can download the following css files:

Note: flowchart.css file contains the css of the editor. You do not need to download it.

Step 2: Now we can create the flowchart editor interface. There are 4 basic elements we are going to use. They are:

                                startstepdecisionend

Figure 3 – The basic elements of the flowchart

All the elements are inherited by a basic shape called window. You can download the demo.css file originally used in the jsPlumb examples project.

Let’s create these shapes one by one.

1. The start element:

.start{
    border-radius: 40px;
    text-align: center;
}
<div class="window start jsplumb-connected" id="startEv"><strong>start</strong></div>

2. The step element:

.step{
    border-radius: 0.5em;
    width: 80px;
    height: 80px;
}
.window.jsplumb-connected-step {
    border: 2px solid #29e;
}
<div class="window step jsplumb-connected-step" id="stepEv"><strong>step</strong></div>

3. The decision element:

.diamond{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.desc-text{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
<div class="window diamond jsplumb-connected-step" id="descEv"><strong><p class="desc-text">decision</p></strong></div>

4. The end element:

.window.jsplumb-connected-end {
    border: 2px solid orangered;
}
<div class="window start jsplumb-connected-end" id="endEv"><strong>end
</strong></div>

Step 3: Create the flowchart editor in the index.html file:

<div id="flowChartView" style="display:block;">
    <br>
    <button class="btn btn-success" id="flowchartSaveBtn" onclick="" style="margin-left: 15px">Save</button><br><br>
    <div style="width:100%; height: 50%; white-space:nowrap;">
        <span style="display: inline-block; vertical-align: top; padding: 5px; width:15%">
            <div id="myPalette" style="border: solid 1px gray; height: auto"><p></p><center><strong>Palette</strong></center><p></p>
                <div class="jtk-demo-main" style="margin-top: 20px;">
                    <div class="jtk-demo-canvas canvas-wide flowchart-demo" id="canvas1">
                        <div class="window start jsplumb-connected" id="startEv"><strong><p>start</p></strong></div>
                        <div class="window step jsplumb-connected-step" id="stepEv"><strong><p>step</p></strong></div>
                        <div class="window diamond jsplumb-connected-step" id="descEv"><strong><p class="desc-text">decision</p></strong></div>
                        <div class="window start jsplumb-connected-end" id="endEv"><strong><p>end</p></strong></div>
                    </div>
                </div>
            </div>
        </span>

        <span style="display: inline-block; vertical-align: top; padding: 5px; width:85%">
          <div id="myDiagram" style="border: solid 1px gray;;"><p></p><center><strong>Drawing</strong></center><p></p>
              <div class="jtk-demo-main" style="margin-top: 20px;">
                  <div class="jtk-demo-canvas canvas-wide flowchart-demo jtk-surface  jtk-surface-nopan" id="canvas">
                  </div>
              </div>
          </div>
        </span>
    </div>
</div>

Well, that is it! Now you have created the web interface for the flowchart editor that is going to be implemented using jsPlumb and jsPlumb demo example. In part 2, I discuss how to make the elements draggable and how to draw connections using jsPlumb.

Advertisements

6 thoughts on “Implement a Flowchart Editor using jsPlumb – Part 1

  1. Hi , very nice tutorial. I have a few questions on this. Are you using jsplumb tool kit or jsplumb community edition ?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s