easy-flow 画流程图

最近项目中需要画流程图的功能，本来想自己手写一个，后来发现这个东东好像挺复杂的，时间也不允许，就在网上找找看有没有合适的，然后就发现了这个easy-flow，很适合我们项目，关键它里面的demo代码也是非常简单易懂，拿来就可以用（非常感谢善解人意的作者大大）。具体使用方式如下：

1、下载源码
2、在自己的vue工程中找到package.json，并引入如下依赖（不用额外引入jsplumb，因为作者修改了源码，直接通过js引入了）

"element-ui": "2.9.1",
 "lodash": "4.17.15",
 "vue": "^2.5.2",
 "vue-codemirror": "^4.0.6",
 "vuedraggable": "2.23.0"

3、将easy-flow/src/components/ef 目录复制到自己工程的一个目录下
4、引入elementUI和easy-flow样式（可以在main.js里引入，也可以在父组件panel.vue里引入，看你需求）

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/这个为复制后的目录，src就不要写了/ef/index.css'
Vue.use(ElementUI, {size: 'small'})

官网demo截图：

我项目里的效果截图：

gitee官网地址：
gitee.com/xiaoka2017/…

PS: 项目中流程图画完之后需要下载成图片保存，我用的是html2canvas，具体方法如下：
1、下载html2canvas
2、引入import html2canvas from 'html2canvas';
3、详细代码如下

if (typeof html2canvas !== 'undefined') {
  // 以下是对svg的处理
  const nodesToRecover = [];
  const nodesToRemove = [];
  const svgElem = document.querySelectorAll('svg');
  svgElem.forEach(async (node) => {
    // 判断是loading的转圈图标
    if (node.getAttribute('class') === 'circular') {
      return
    }
    const parentNode = node.parentNode;
    const svg = node.outerHTML.trim();

    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    // canvas.width = 650;
    // canvas.height = 798;
    const v = Canvg.fromString(context, svg);
    v.start();
    if (node.style.position) {
      canvas.style.position += node.style.position;
      canvas.style.left += node.style.left;
      canvas.style.top += node.style.top;
    }

    nodesToRecover.push({
      parent: parentNode,
      child: node
    });
    parentNode.removeChild(node);

    nodesToRemove.push({
      parent: parentNode,
      child: canvas
    });

    parentNode.appendChild(canvas);
  });
  const options = {
    dpi: window.devicePixelRatio * 4,
    //   scale: 4,
    backgroundColor: 'transparent',
    allowTaint: true,
    useCORS: true,
    width: this.$refs.efContainer.offsetWidth,
    height: this.$refs.efContainer.offsetHeight
  };
  html2canvas(document.querySelector('#efContainer'), options).then((canvas) => {
    const oImg = new Image();
    oImg.src = canvas.toDataURL(); // 导出图片
    const imgBase64 = oImg.getAttribute('src'); 
    // 这里掉接口把imgBase64传给后端
  });
}

以上。