vue 通过js完成导图

你可以使用 `vue-draw-uml` 这样的第三方库来完成导图的绘制。以下是一个简单的示例：

1. 安装 `vue-draw-uml`：

npm install vue-draw-uml --save

2. 在 Vue 中引入 `vue-draw-uml`：

import VueDrawUML from 'vue-draw-uml'
Vue.use(VueDrawUML)

3. 在模板中使用 `vue-draw-uml` 组件：

<template>
  <div>
    <vue-draw-uml :elements="elements" :options="options"></vue-draw-uml>
  </div>
</template>

4. 在 Vue 实例中定义 `elements` 和 `options`：

export default {
  data() {
    return {
      elements: [
        { id: '1', type: 'start', text: 'Start' },
        { id: '2', type: 'process', text: 'Process 1' },
        { id: '3', type: 'process', text: 'Process 2' },
        { id: '4', type: 'decision', text: 'Decision' },
        { id: '5', type: 'end', text: 'End' },
        { id: '6', type: 'inputoutput', text: 'Input/Output' }
      ],
      options: {
        // 设置样式
        node: {
          width: 100,
          height: 50,
          stroke: '#000',
          fill: '#fff',
          strokeWidth: 2,
          radius: 5,
          fontSize: 14,
          fontFamily: 'Arial',
          fontWeight: 'normal',
          textAlign: 'center',
          textBaseline: 'middle'
        },
        edge: {
          stroke: '#000',
          strokeWidth: 2,
          fontSize: 12,
          fontFamily: 'Arial',
          fontWeight: 'normal',
          textAlign: 'center',
          textBaseline: 'middle'
        },
        layout: {
          rankdir: 'TB',
          marginx: 50,
          marginy: 50,
          nodesep: 50,
          edgesep: 10,
          ranksep: 100
        }
      }
    }
  }
}

使用以上代码，你可以绘制一个包含起始节点、两个处理节点、一个决策节点、一个结束节点和一个输入/输出节点的简单导图。

除了 `vue-draw-uml`，还有其他的 Vue 组件库和工具可以帮助你完成导图的绘制，例如 `vue-flowchart`、`vue-mindmap` 和 `vuedraggable` 等。