不过做图表的特效倒是有，和你给的不太一样
你看看这个是不是你想要的效果
http://hci.stanford.edu/jheer/files/zoo/ex/networks/force.html
下面是合集地址
http://queue.acm.org/detail.cfm?id=1805128
一个BPMN 2.0渲染工具包和Web建模器。使用JavaScript编写，在不需要后端服务器支持的前提下向现代浏览器内嵌入BPMN2.0流程图。这使得它很容易的嵌入到任何web应用中。这个库既可以是web查看器也可以是web建模器。使用查看器将BPMN2.0流程图嵌入到你的应用中并可以使用数据丰富你的流程图。使用建模器在你的应用内部创建BPMN2.0流程图。github地址： https://github.com/bpmn-io
实例地址： https://bpmn.io/toolkit/bpmn-js/
http://wkd.to8to.com/
https://github.com/haoyanyu/vue-with-bpmn
必须引入组件：
//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逻辑。
好了，一个绘制流程图的软件工具初步完工。
