最近项目上需要用流程图来做问题定界分析，之前有同事用jsPlumb做过，但是阅读代码后觉得比较麻烦，所以自己又找了一圈，找到一个叫Dagre-D3的开源类库，画出来的效果如下图，Dagre-D3最大的优点就是可以实现自动布局，你只需要put数据就可以了，但是缺点就是自动布局后的连线会比较乱，而且连线不是横平竖直的，对于流程图不复杂的还好，稍微复杂点画出来的连线就没法看。最后还是被pass了。
jsPlumb地址：https://jsplumbtoolkit.com
Dagre-D3 Git地址：https://github.com/cpettitt/dagre-d3
后面经过一番百度，最终决定用JointJS，官网：www.jointjs.com，相比Dagre-D3和jsPlumb，JointJS的API很详细，代码量少，连接线有多种选择，封装了多种常用的形状，而且能画的图很多，官方也给了一些demo可以参考。下面是我用JointJS画出来的流程图：
依赖：在官网的下载页面都能找到
<link rel="stylesheet" type="text/css" href="joint.css" />
<script src="jquery.min.js"></script>
<script src="lodash.min.js"></script>
<script src="backbone-min.js"></script>
<script src="joint.js"></script>我的demo里还引用了bootstrap的依赖用来显示模态框
html代码
<body>
<div id="paper" class="paper"></div> <div class="modal fade searchpanel" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalTitle">详细信息</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</body>
js代码
首先是定义画板和画布，这里重写了ElementView和LinkView，目的是为了让画出来的流程图不能被删除和编辑
var graph = new joint.dia.Graph(); var ElementView = joint.dia.ElementView.extend({
pointerdown: function () {
this._click = true;
joint.dia.ElementView.prototype.pointerdown.apply(this, arguments);
},
pointermove: function(evt, x, y) {
this._click = false;
joint.dia.ElementView.prototype.pointermove.apply(this, arguments);
