vue怎么绘制简单的流程图

可以使用vue-flowchart库来绘制简单的流程图。

步骤如下：

1. 安装vue-flowchart库

npm install vue-flowchart --save

2. 在Vue组件中引入vue-flowchart

import VueFlowchart from 'vue-flowchart'

3. 在Vue组件中使用vue-flowchart

<template>
  <div>
    <vue-flowchart :nodes="nodes" :links="links" :options="options"></vue-flowchart>
  </div>
</template>

<script>
import VueFlowchart from 'vue-flowchart'

export default {
  components: {
    VueFlowchart
  },
  data () {
    return {
      nodes: [
        { id: 'node1', x: 100, y: 100, width: 80, height: 30, label: '开始', type: 'start' },
        { id: 'node2', x: 300, y: 100, width: 80, height: 30, label: '步骤1', type: 'process' },
        { id: 'node3', x: 500, y: 100, width: 80, height: 30, label: '步骤2', type: 'process' },
        { id: 'node4', x: 300, y: 200, width: 80, height: 30, label: '步骤3', type: 'process' },
        { id: 'node5', x: 500, y: 200, width: 80, height: 30, label: '结束', type: 'end' }
      ],
      links: [
        { source: 'node1', target: 'node2' },
        { source: 'node2', target: 'node3' },
        { source: 'node3', target: 'node5' },
        { source: 'node2', target: 'node4' },
        { source: 'node4', target: 'node5' }
      ],
      options: {
        node: {
          size: 30,
          type: 'rectangle'
        },
        link: {
          width: 2,
          curveness: 0
        }
      }
    }
  }
}
</script>

4. 在data中定义nodes和links数组，分别表示节点和连线的信息。options表示图形的样式和属性。

5. 在nodes中定义每个节点的信息，包括id、坐标、大小、标签和类型。

6. 在links中定义每条连线的信息，包括起点和终点的id。

7. 在options中定义图形的样式和属性，包括节点的大小、形状和样式，以及连线的宽度和曲度。

8. 运行Vue应用，就可以看到绘制出来的流程图了。