一般开发这种需求，首先要了解几个概念性的东西，才能更好的熟练使用这些框架。
- 节点 (就是每个图形),有矩形、图形，或者自义定图形,像jsplumb它是通过svg和dom结合渲染
- 端点 （图形上面的锚点）一般情况都固定图形的上下左右
- 连接线 (从起始端点连接到结束端点的线).线有很多种、直线、贝塞尔、折线.
另外还有一些其它图形方面可能用到的
- 图形渲染框架.g6、jsplumb、fabric、zrender
- 图形布局（如树图、流程图、力导向图） d3、graphlib
基于g6
g6:支持canvas或svg渲染.
g6是一个更底层的框架，它更多的是渲染一些节点布局，它自带一套布局系统，也可以自定义布局。如果把它用来开发编辑器，很多需要自己来处理。可以通过注册插件扩展应用、注册行为去扩展交互、注册节点扩展节点多样化、注册连接线扩展线的多样化
基于jsplumb
是基于dom和svg渲染。它相比较g6，g6更底层一些，g6很多东西需要自己实现。而jsplumb都有现成的
- 它的节点需要自己定义创建，需要灵活也很高，你可以自己用div设计一个很漂亮和高交互的层.
- 默认样式配置很丰富，样式除了通过动态js配置，也可以通过css来控制
- 各种拦载事件与监听事件很完善
- 没有对应节点对象，所以节点上面的事件或交互需要自己来写
![在这里插入图片描述]()
