工具选择
工欲善其事，必先利其器。首先是选择合适的工具。在开源时代，程序员还是很幸福的，有很多选择。
Flowchart.js http://adrai.github.io/flowchart.js/，基于SVG创建Flow Chartgo.js http://www.gojs.net/latest/index.html go.js提供了一整套JS工具，支持创建各种交互图表。有免费和付费版本joint.js http://www.jointjs.com/joint.js 是另一个创建图标库的工具，也提供免费和商业版本jsPlumb http://www.jsplumb.org/jsPlumb 是一个开源流程图创建工具集，小而紧凑，简单易用d3 http://d3js.org 在HTML5领域，d3可以说是最好的基础可视化库，提供全面的DOM操作，功能非常强大。最终我选择了jsPlumb，因为它完全开源，而且使用起来非常简单。使用D3可能需要付出更多的努力。 joint.js 也不错。大家可以根据自己的需要来选择。
构建静态应用
让我们逐步使用jsPlumb 来创建我们的流程图工具。
接下来我们需要创建一个节点。每个节点都可以用一个DIV来实现。我这里提供了一个创建节点的函数。
functionaddNode(parentId,nodeId,nodeLable,position){varpanel=d3.select('#'+parentId);panel.append('div').style('width','120px').style('height', '50px').style('position','absolute').style('top',position.y).style('left',position.x).style('border','2px#9DFFCAsolid') .attr('align','center').attr('id',nodeId).classed('node',true).text(nodeLable);returnjsPlumb.getSelector('#'+nodeId)[0];}这里所做的是创建一个DIV元素并将其放置在相应容器的指定位置。注意，为了支持拖放功能，必须使用position:absolute。
我使用D3 来操作DOM。您可能更习惯JQuery。这纯粹是个人喜好问题。
最后返回创建的节点的实例引用。该选择器使用jsPlumb.getSelector() 方法，与JQuery 的选择器相同。这样做的好处是可以使用不同的DOM 操作库，例如Vanilla
node 是我们使用addNode 方法创建的Node 实例
ports 是一个字符串数组，指定端点的数量和名称
type 可以是输出或输入，指定端点的类型。一个节点的输出端口可以连接到另一节点的输入端口。
这里anchor是一个四维数组，维度0和1分别是锚点在节点x轴和y轴上的偏移百分比。这里我希望将端口画在节点的左右两侧，并按照端口的数量均匀分布。
在下一步中，我们提供一个连接到端点的函数：
functionconnectPorts(instance,node1,port1,node2,port2){//声明一些commonvalues:varcolor='gray';vararrowCommon={foldback:0.8,fillStyle:color,width:5},//使用三参数spect创建两个不同的箭头与commonvalues:overlays=[['Arrow', {location:0.8 } ,arrowCommon],['箭头',{location:0.2,direction:-1},arrowCommon]];varuuid_source=node1.getAttribute('id')+'-'+port1;varuuid_target=node2.getAttribute('id') +'-'+port2;instance.connect({uuids:[uuid_source,uuid_target]});}node1和node2是对源节点和目标节点的引用，port1和port2是源端口和目标端口的名称。
使用instance.connect方法创建连接。叠加用于添加箭头效果或其他样式的连接线。我在这里没有使用它们，因为它们看起来不太好。如果你想使用它，只需在instance.connect的方法参数中添加覆盖即可。
调用上述方法创建节点、端点和连接线。
varnode1=addNode('容器id','node1','node1',{x:'80px',y:'20px'});varnode2=addNode('容器id','node2','node2',{ x:'280px',y:'20px'});addPorts(实例，node1,['out1','out2'],'输出');addPorts(实例，node2,['in','in1','in2 '],'input');connectPorts(instance,node1,'out2',node2,'in');这里我们创建两个节点，第一个节点有两个输出端口，第二个节点有三个输入端口，然后将第一个节点的out2 端口连接到第二个端点的in 端口。效果如下：
最后，我们为节点添加拖放功能，以便我们可以拖动这些节点来改变图形的布局。
实例.draggable($('.node'));这似乎取决于JQuery-UI，我还不太清楚。
交互式创建节点
我们已经有了初步的创建图的功能，但是必须通过程序来创建节点。我们希望能够交互地创建节点。
通常我们希望有一个树形视图控件，然后拖拽创建对应类型的节点。这里我使用的是这个开源树视图，基于bootstrap https://github.com/jonmiles/bootstrap-treeview
我们首先创建一个树视图：
functiongetTreeData(){vartree=[{text:'Nodes',nodes:[{text:'Node1',},{text:'Node2'}]}];returntree;}//InitializeControlTreeView$('#control-panel').treeview ({data:getTreeData()});树上有两个节点：
然后我实现了将相应节点从树中拖到流程图中的逻辑。
//Handledraganddrop$('.list-group-item').attr('draggable','true').on('dragstart',function(ev){//ev.dataTransfer.setData('text',ev .target.id);ev.originalEvent.dataTransfer.setData('text',ev.target.textContent);console.log('dragstart');});$('#container-id').on(' drop',function(ev){//avoideventconlictforjsPlumbif(ev.target.className.indexOf('_jsPlumb')=0){return;}ev.preventDefault();varmx=''+ev.originalEvent.offsetX+'px' ;varmy=''+ev.originalEvent.offsetY+'px';console.log('ondrop:'+ev.originalEvent.dataTransfer.getData('text'));varuid=newDate().getTime();varnode=addNode ('流程面板','节点'+uid,'节点',{x:mx,y:my});addPorts(实例，节点，['out'],'输出');addPorts(实例，节点，['in1) ','in2'],'input');instance.draggable($(node));}).on('dragover',function(ev){ev.preventDefault();console.log('ondragover') ;});这里需要注意的是避免与jsPlumb拖动端点发生逻辑冲突。当检测到目标是jsPlumb对象时，需要直接从drop方法退出，执行相应的jsPlumb drop逻辑。
好了，一个绘制流程图的软件工具就初步完成了。
用户评论
这篇文章太棒了！我一直想自己做一个流程图工具，HTML5确实是个好选择。特别是画布（canvas）和SVG，感觉以后做起来会轻松很多。
有20位网友表示赞同！
我尝试过用HTML5做流程图，但总是遇到兼容性问题。这篇文章提到的解决方案很实用，希望能帮到我。
有7位网友表示赞同！
流程图绘制工具对工作流程很有帮助，HTML5构建的确实方便。不过，我担心它的交互性是否会比传统软件差。
有6位网友表示赞同！
HTML5构建流程图工具听起来很有前景，但我更想知道它的易用性和扩展性如何。
有18位网友表示赞同！
看了这篇文章，我决定尝试用HTML5自己做一个流程图工具。希望可以像作者一样做出一个实用的产品。
有9位网友表示赞同！
使用HTML5构建流程图，听起来很高级。但我这个小白，能看懂吗？希望文章能详细解释一下。
有11位网友表示赞同！
HTML5构建流程图，这是个好主意。但我更关心的是，这样的工具是否能够支持复杂的流程设计。
有5位网友表示赞同！
作者对HTML5的运用真是娴熟，这篇文章让我对HTML5在图形设计领域的潜力有了新的认识。
有6位网友表示赞同！
HTML5构建流程图工具，我之前就听说过了，但一直没有深入研究。这篇文章给了我一些灵感。
有10位网友表示赞同！
这篇文章让我对HTML5的图形绘制能力有了新的认识。或许我可以用它来制作一些有趣的动画效果。
有17位网友表示赞同！
使用HTML5构建流程图，听起来挺有意思的。但我更想知道它的实际应用场景和案例。
有14位网友表示赞同！
我对HTML5构建流程图工具很感兴趣，但担心它的性能问题。希望作者能分享一些优化经验。
有16位网友表示赞同！
HTML5构建流程图工具，这样的创新真的很棒。希望未来的版本可以加入更多的协作功能。
有9位网友表示赞同！
这篇文章让我对HTML5的潜力有了新的认识。我觉得它不仅仅适用于流程图，还可以用于其他类型的图形设计。
有10位网友表示赞同！
使用HTML5构建流程图，听起来很酷。但我更想知道它是否能够支持跨平台的使用。
有15位网友表示赞同！
我对HTML5构建流程图工具很期待，但同时也担心它可能会遇到版权问题。
有12位网友表示赞同！
这篇文章让我对HTML5在流程图绘制方面的应用有了更深的理解。希望作者能继续分享更多相关内容。
有12位网友表示赞同！
HTML5构建流程图工具，这是我之前没有想到的。感觉这篇文章给了我很多新的思路。
有9位网友表示赞同！