需求：
最近有一个需求是要做请假等各种流程图，所以需要一个可以绘制各种流程图的页面。将实现想法做个笔记
思路：
- 采用echarts,d3,G6等数据可视化插件去做（学习成本大）
- 查看流程插件，看是否有比较适合的插件。（简单，方便）
解决方案：
经查找，采取第二种方案。采用插件vue-flowchart-editor.是较为符合我们需求的插件。大家觉得不错也可以star，目前star不多 --
github github.com/jnoodle/vue…
使用过程：
1. 安装插件
yarn add vue-flowchart-editor
2.在项目里新建目录flowDesign
将此项目中的路径为 src/demo文件夹全部复制到我们准备的目录下。这个demo下的组件都是有用的。后面将一一介绍。
其中demo.vue就是我们最终看到的页面效果。我们在流程展示页面引入此页面，即可进行流程的编辑。
demo如下图
3.组件介绍：
它的页面布局为最上面的toolbar,工具栏
- toolbar.vue --- 工具栏，显示在页面的最顶部
- toolbarButton.vue --- 工具栏每个按钮的展示形式，最终显示icon，移动上去有label
- icon.vue --- 有图标的展示
侧边栏的画板区：用于放流程固定的节点，使其可以拖放在画板上，我们可以设置节点的size,type,shape,color,label等属性
- itemPanel.vue --- 侧边栏的画板区 数据来于dataNodeItem.js
中间主要的画板就是flow组件,引入即可。可以给画板初始化几个节点，数据来自data.js
右边的画板就是可以去控制节点和线段属性。
- detailPanel.vue 引入detailForm
- detailForm.vue 根据类型是节点还是线段去展示相应的属性
这些组件都是可以根据我们的需求去进行修改的。
经我修改后的demo：
以上就是先完成的部分，后续继续补充~~~~
