using HTML in labels

HTML

<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.9-all-min.js"></script>
<!DOCTYPE html>
<html>
<head>
    
<style type="text/css">
    body {background-color:yellow}
    p {color:blue}
    #nav li {background:red; display:inline-block;}
    
    #r4 {width:200px; border:solid green 1px; margin:400px;}
</style>
    
<title>Title of the document</title>
</head>

<body>
    <!--
    <div class="d" id="d1">1</div>
    <div class="d" id="d2">2</div>
    -->
    <ul id="nav">
        <li id="1">Link 1</li>
        <li id="2">Link 2</li>
        <li id="3">Link 3</li>
    </ul>
    
    
    <h1 id="r4">Something Else</h1>
</body>

</html>

CSS

.d { 
    position:absolute; 
    width:2em; 
    height:2em; 
    border:1px solid black; 
    z-index:1;
}

._jsPlumb_connector { z-index:0; }
._jsPlumb_endpoint { z-index:2; } /* endpoint sits above nodes and connectors */

#d1 { top:50px;left:50px; }
#d2 { top:50px;left:240px; }

.aLabel {
    background-color:white; 
    z-index:10;
    border:1px solid red;
    font-size:20px;
    padding:1em;
    cursor:pointer;
    text-align:center;
    box-shadow:0px 0px 3px 3px #567;
    border-radius:3px;
    -moz-border-radius:3px;
}

.strong {
    font-weight:bold;
}
.red {
    color:red;
}

JavaScript

jsPlumb.ready(function() {
    
    //jsPlumb.draggable($(".d"));
    
    jsPlumb.connect({
        anchor:"Continuous",
        connector:[ "Flowchart", { stub : 200}, { gap : 100}], 
        source:"1",
        target:"r4",
        //overlays:[
        //    ["Label", {
        //        label:"Write<br/><span class='strong'>HTML</span><br/>in<br/><span class='strong red'>labels</span>",
        //        cssClass:"aLabel"
        //    }]
        //]
    });                          
});