通过一个小demo来演示jsPlumb的常用内容。使用拖拽的方式从工具栏将节点拖至画布中；画布中的节点可以移动，连线；线条上可以输入备注信息。
一、项目环境
demo使用vue3+typescript4+quasar2前端框架，与之前的演示项目环境一致。demo完成代码地址
二、功能介绍
1. 界面
上方为工具栏，demo中只设置了三种图形 。下方为画布，可以将图形从工具栏种拖到下方的画布中。
2. 拖拽
拖拽创建的节点，使用jsPlumb创建了8个静态锚点。demo中节点的个数以及位置没有进行调整，圆形和菱形可以只创建4个静态锚点，菱形锚点的位置也可以根据图形的大小调整至图形的四个角。
3. 连线
通过jsPlumb事件，在连线完成后创建了隐藏的Overlay，例如一个删除图标，当点击连线时图标就会出现。线条设置了Hover样式，方便鼠标选中点击线条。
4. 删除连线
在连线上创建一个图标Overlay，点击时实现删除线条的功能。
5. 添加文案
双击线条显示一个输入框，输入框中输入的文案即可作为线条的文案描述