JSPlumb State Diagram

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
    
<div class="demo flowchart" id="flowchart"/>

CSS

/** DISABLE TEXT SELECTION (SET ON BODY WHEN DRAGGING IS OCCURRING) **/
 ._jsPlumb_drag_select * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none
}


.flowchart {
    position: relative;
    width:100%;
    height:400px;
    background-color:#2D2D30;
    overflow:auto;
    /** DISABLE TEXT SELECTION **/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none

}

.flowchart .state {
    border:1px solid #346789;
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius:0.3em;
    border-radius:0.3em;
    opacity:1.00;
    filter:alpha(opacity=50);
    text-align:center;
    z-index:20;
    position:absolute;
    background-color:white;
    padding:0.5em;
    font-size:0.9em;

    width:5em;
    height:5em;
    padding:0.5em;
    width:40px;
    height:40px;
    line-height: 40px;
    -webkit-transition: -webkit-box-shadow 0.15s ease-in;
    -moz-transition: -moz-box-shadow 0.15s ease-in;
    -o-transition: -o-box-shadow 0.15s ease-in;
    transition: box-shadow 0.15s ease-in;

}
.flowchart .state:hover {

    border:1px solid #123456;
    box-shadow: 2px 2px 19px #444;
    -o-box-shadow: 2px 2px 19px #444;
    -webkit-box-shadow: 2px 2px 19px #444;
    -moz-box-shadow: 2px 2px 19px #fff;
    opacity:0.9;
    filter:alpha(opacity=90);
}
.flowchart .active {
    border:1px dotted green;
}
.flowchart .hover {
    border:1px dotted red;
}


.flowchart .aLabel {
    background-color:white;
    padding:0.4em;
    font:12px sans-serif;
    color:#444;
    z-index:21;
    border:1px dotted gray;
    opacity:0.8;
    filter:alpha(opacity=80);
    cursor: pointer;
}

.flowchart .aLabel._jsPlumb_hover {
   ...

JavaScript

//==========================================================
var jspInstance = function () {
    this._type = 'jspInstance';    
    //jsplumb instance:
    this.instance = null;
    this.containerId = 'flowchart';
	
	//Default Connector Settings:
	this.connectorSettings = {
		width:2,
		colour:'#C0C0D0',
		colourHover:'#216477',
		grid:[8, 8],
		arrowSize: 8,
		labelStyle: 'aLabel',
		cornerRadius: 4,
	};

	//Default Endpoint Settings:
	this.endpointSettings = {
		size:6,
		colour:this.connectorSettings.colour,
		colourHover:this.connectorSettings.colourHover,
		//optional Endpoints label text to describe whether they are sources or targets:   
		sourceText:'Source',
		targetText:'Target',
	};
	

	this.stateConfiguration = {
		className:'state',
		//Beginning of id used for state divs (eg: 'state_1' and 'state_1_Endpoint_BottomLeft'):
		stateIdPrefix:'state',
		clickHandler:null,
		dblClickHandler:null,
	};
  
    this.state ={
		endpoints:  {}
	}
}
//==========================================================
jspInstance.prototype.log = function(msg){
	var me = this;
    console.log(msg);
}
//==========================================================
//Creates new 'instance':
jspInstance.prototype.create = function () {
    var me = this;
    return me.instance = jsPlumb.getInstance({
        
		//container id:
        Container: me.containerId,
        
		// default drag options
        DragOptions: {
            cursor: 'pointer',
            zIndex: 2000
        },
        
		// the overlays to decorate each connection with.  
        //note that the label overlay uses a function to generate the label text; in this
        // case it returns the 'labelText' member that we set on each connection in the 'createOverlaysOnConnector' method below.
        ConnectionOverlays: [
            ['Arrow', {
                location: 1,
                width: me.connectorSettings.arrowSize,
            }],
            ['Label', {
                location: 0.5,
           ...