jsPlumb是一个强大的JavaScript连线库，提供html元素的拖放、连线等功能，可绘制不同类型、样式的连线，适用于开发web页面的图表、建模工具等。除了Dom对象，同时支持jquery对象，也可以与jquery-ui结合使用。我没有使用jquery-ui的方法来实现拖放效果，jsPlumb本身也提供相关方法，参数与jquery-ui非常类似。
个人觉得直接看英文官方文档比较难读，采用的学习曲线是，先搜一两篇中文资料看个大概，并结合官方文档https://jsplumbtoolkit.com/community/doc/home.html自己理解，毕竟有的翻译的会略生硬；然后看gitHub上的例子，提供了不同类型连线的demo，碰到具体的方法、参数设置等不清楚可到官网api中查看；最后可以试着开始在你的项目中使用了，这时候随时查官方api，因为你肯定需要它。
tips： 网上的一些资料由于年代较早，我们的jsPlumb一直保持着版本更新，若引用的新版本js，有的方法已经弃用，在api中都能找到替代方法，或者到其更新日志（https://jsplumbtoolkit.com/community/doc/changelog.html ）中去查找关键字。
官方网站：https://jsplumbtoolkit.com/
gitHub项目地址：https://github.com/jsplumb/jsPlumb
网络资料：
文档翻译类：
https://segmentfault.com/a/1190000003826470
http://www.cnblogs.com/leomYili/p/6346526.html
实用总结类：
jsPlumb官网提供社区版和toolkit版（付费），下载社区版js并在页面中引入。jsPlumb没有额外的依赖。
<script src="jsplumb.js "></script>
jsPlumb必须等到DOM加载完成之后使用：
jsPlumb.bind("ready",function(){
...
// jsPlumb相关初始化代码
...
});
//or
...
jsPlumb.ready(function(){ //简写
...
// jsPlumb相关初始化代码
...
});
jsPlumb默认注册在浏览器的window对象中，为整个页面提供了一个静态实例(jsPlumb)可直接使用，你也可以用getInstance方法创建一个单独的实例。即可以直接使用全局对象[jsPlumb]或实例对象[myInstance]来调用jsPlumb的方法：
var myInstance = jsPlumb.getInstance();
设置默认配置（主要是点、线样式），两种方式，通过importDefaults方法或者getInstance中传参。importDefaults为全局设置，可以在实例化时用getInstance重新定义，推荐使用单独的实例：
myInstance.importDefaults({ //或jsPlumb.importDefaults();
Connector : [ "Bezier", { curviness: 150 } ],
Anchors : [ "TopCenter", "BottomCenter" ],
...
});
//or
var myInstance = jsPlumb.getInstance({
Connector : [ "Bezier", { curviness: 150 } ],
Anchors : [ "TopCenter", "BottomCenter" ],
...
});
关于默认配置的详细解释如下。根据实际需要，我们一般可能只用到一部分参数。官网参考：https://jsplumbtoolkit.com/community/doc/defaults.html 。
{
Anchor: "BottomCenter", //锚点位置，如left，top，bottom等；对任何没有声明描点的Endpoint设置锚点，用于source及诶单或target节点
Anchors: [ null, null ], //连线的source和target Anchor
ConnectionsDetachable: true, //连线是否可用鼠标分离
ConnectionOverlays: [ //连线的叠加组件，如箭头、标签
["Arrow", { //箭头参数设置
location: 1,
visible:true,
width:11,
length:11,
id:"ARROW",
events:{
click:function() { }
}
} ],
[ "Label", { //标签参数设置
location: 0.1,
id: "label",
cssClass: "aLabel", //hover时label的样式名
events:{
tap:function() { }
},
visible: true
}]
],
Connector: "Bezier", //连线的类型，流程图(Flowchart)、贝塞尔曲线等
Container: null, //父级元素id；假如页面元素所在上层不同，最外层父级一定要设置
DoNotThrowErrors: false, //如果请求不存在的Anchor、Endpoint或Connector，是否抛异常
DragOptions: {cursor: 'pointer', zIndex: 2000}, //通过jsPlumb.draggable拖拽元素时的默认参数设置
DropOptions: { }, //target Endpoint放置时的默认参数设置
Endpoint: "Dot", //端点（锚点）的样式声明
Endpoints: [ null, null ], //用jsPlumb.connect创建连接时，source端点和target端点的样式设置
EndpointOverlays: [ ], //端点的叠加物
EndpointStyle: { fill : "#456" }, //端点的默认样式
EndpointStyles: [ null, null ], //连线的source和target端点的样式
EndpointHoverStyle: { fill: "#ec9f2e" }, //端点hover时的样式
EndpointHoverStyles: [ null, null ], //连线的source和target端点hover时的样式
HoverPaintStyle: {stroke: "#ec9f2e" }, //连线hover时的样式
LabelStyle: { color: "black" }, //标签的默认样式，用css写法。
LogEnabled: false, //是否开启jsPlumb内部日志
Overlays: [ ], //连线和端点的叠加物
MaxConnections: 1, //端点支持的最大连接数
PaintStyle: { lineWidth : 8, stroke : "#456" }, //连线样式
ReattachConnections: false, //是否重新连接使用鼠标分离的线?
RenderMode: "svg", //默认渲染模式
Scope: "jsPlumb_DefaultScope" //范围，具有相同scope的点才可连接？
}
点或线的一些参数设置，在上述全局默认配置中也并不是必须，因为在使用connect方法创建连接和addEndpoint 方法添加锚点时都可以对其进行重写。
下面看个实际的例子：
详见文档：https://jsplumbtoolkit.com/community/doc/basic-concepts.html
锚点位置，EndPoint所处的位置。
锚点位置可以是固定的(Static)、动态(Dynamic)、周边锚(Perimeter anchors)、连续锚(Continuous anchors)四种类型。
端点，连线末端可见的端点。
创建Endpoint可以通过多种方式：
instance.connect({uuids: ["sourceId", "targetId" ], overlays: [...], detachable: true, reattach: true, editable: true});
//Endpoint的配置参数，尽可能多的列出了以下这些：
//需要区别的是，此处是针对Endpoint点的定义设置，在全局配置中也有一些同名的属性，在那里是针对线的样式设置。
var endpoint = {
endpoint: "Dot", //四种类型Dot，Rectangle，Image，Blank
anchor: [0.5, 0.5, 0, -1], //锚点位置
paintStyle: { fill: "#7AB02C", radius: 5 }, //点的样式
hoverPaintStyle: { fill: "#216477", stroke: "#216477" }, //点hover时的样式
connector: [ "Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true, midpoint: 0.3 } ], //连线设置
connectorStyle: { strokeWidth: 7, stroke: "rgba(198,89,30,0.7)" }, //连线样式
connectorHoverStyle: {}, //连线hover时样式
endpointsOnTop: true,
isSource: true, //是否为源端点
maxConnections: 10, //最大连接数，若为-1则不限制连接数
isTarget: true, //是否为目标端点
dragOptions: {}
dropOptions: { tolerance: "touch", hoverClass: "className" }, //从source拖出时 target点的样式
overlays: [
[ "Label", {
location: [0.5, 1.5],
label: "Drag",
cssClass: "className",
visible: false
}
]
};
var e1 = instance.addEndpoint( "elId1", endpoint );
var e2 = instance.addEndpoint( "elId2", endpoint );
instance.connect({ source: e1, target: e2 });
a
连线。两个页面元素直接的连线，有四种类型，贝塞尔曲线(Bezier)、直线(Straight)、流程图(Flowchart)、状态器(StateMachine)，其中后两种类型支持连线的首末端都在一个元素上，形成回路。
叠加。连线上的装饰的组件，例如箭头(Arrow)、标签(Label)等等。具体参数前面的例子中有，详见官网。
分组