求推荐一个好用的兼容vue2的流程图插件

Question

vue2老项目中需要添加一个流程图页面，类似于图片中这样，每个节点之间可串联、并联，连线水平/垂直带箭头，节点底部可批注，之作展示用，无用户交互逻辑，可下载为图片，但是项目比较老，node 12.x版本，npm6.x版本，求推荐一个好用的兼容vue2的流程图插件

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

推荐使用 vue-flow 插件，它是一个基于 Vue 2 的流程图插件，支持串联、并联、水平、垂直连线，节点底部批注等功能。同时，它也支持下载流程图为图片。

安装方法：

npm install vue-flow

使用方法：

<template>
  <div>
    <vue-flow :nodes="nodes" :edges="edges" />
  </div>
</template>

<script>
import VueFlow from 'vue-flow';

export default {
  components: { VueFlow },
  data() {
    return {
      nodes: [
        { id: '1', label: '节点 1' },
        { id: '2', label: '节点 2' },
        { id: '3', label: '节点 3' },
      ],
      edges: [
        { id: '1-2', source: '1', target: '2', label: '连线 1' },
        { id: '2-3', source: '2', target: '3', label: '连线 2' },
      ],
    };
  },
};
</script>

在上面的示例代码中，我们使用 vue-flow 组件，并传入 nodes 和 edges 数据。nodes 是一个数组，包含每个节点的信息，edges 是一个数组，包含每条连线的信息。

你可以根据自己的需求调整节点和连线的数据，然后使用 vue-flow 组件渲染流程图。

如果你需要下载流程图为图片，可以使用 vue-flow 的 download 方法：

import { download } from 'vue-flow';

// ...

download('流程图名称', 'png');

这将下载流程图为一个名为 "流程图名称" 的 PNG 图片。