二、可视化流程图工具集成

因为主要使用的是vue进行开发，而流程图绘制工具主要也就那么几个，jsplumb、Jtopo这些都是比较成熟的绘制工具了，直接使用的话有点复杂，样式也不是很好看，找了半天找到一个比较简单的，学习下

easy-flow

学习曲线还算简单，照操作流程一步步执行。

1、进入上一章的空白工作空间

2、npm i -S vuedraggable

3、npm i codemirror --save

4、npm i --save lodash

5、npm install element-ui -S

6、npm install --save vue-codemirror

7、下载easy-flow项目包，将easy-flow/src/components/ef 目录复制到自己工程的一个目录下（如/src/views）

8、修改main.js，引入elementUI和easy-flow样式

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import './views/ef/index.css'

Vue.use(ElementUI, {size: 'small'})

9、修改/src/views/ef/panel.vue里面的路径

    import './jsplumb'

    import { easyFlowMixin } from './mixins'

    import flowNode from './node'

    import nodeMenu from './node_menu'

    import FlowInfo from './info'

    import FlowHelp from './help'

    import FlowNodeForm from './node_form'

    import lodash from 'lodash'

    import { getDataA } from './data_A'

    import { getDataB } from './data_B'

    import { getDataC } from './data_C'

    import { getDataD } from './data_D'

    import { getDataE } from './data_E'

    import { ForceDirected } from './force-directed'

10、修改router后展示效果如下