教程： bpmnjs教程
bpmn-js 是 BPMN 2.0 渲染工具包和 Web 模型。bpmn-js 正在努力成为 Camunda BPM 的一部分。bpmn-js 使用 Web 建模工具可以很方便的构建 BPMN 图表，可以把 BPMN 图表嵌入到你的项目中，容易扩展。bpmn-js是基于原生js开发，支持集成到vue、react等开源框架中。
官方网站
mxGraph是一个强大的JavaScript流程图前端库，可以快速创建交互式图表和图表应用程序，国内外著名的ProcessOne和draw.io都是使用该库创建的强大的在线流程图绘制网站. 由于mxGraph是一个开放的js绘图开发框架，我们可以开发出很炫的样式，或者完全按照项目需求定制。
官方网站
//Handle drag and drop$('.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('drag start')
})
$('#container-id').on('drop', function(ev){
//avoid event conlict for jsPlumb
if (ev.target.className.indexOf('_jsPlumb') >= 0 ) {
return
ev.preventDefault()
var mx = '' + ev.originalEvent.offsetX + 'px'
var my = '' + ev.originalEvent.offsetY + 'px'
console.log('on drop : ' + ev.originalEvent.dataTransfer.getData('text'))
var uid = new Date().getTime()
var node = addNode('flow-panel','node' + uid, 'node', {x:mx,y:my})
addPorts(instance, node, ['out'],'output')
addPorts(instance, node, ['in1','in2'],'input')
instance.draggable($(node))
}).on('dragover', function(ev){
ev.preventDefault()
console.log('on drag over')
})
这里要注意的是要避免和jsPlumb拖拽端点的逻辑冲突，当检测到target是jsPlumb对象是需要直接从drop方法中退出以执行对应的jsPlumb的drop逻辑。
好了，一个绘制流程图的软件工具初步完工。
