vue实现可视化流程图

<template>
  <div id="app">
    <div ref="flowContainer" style="width: 100%; height: 500px; border: 1px solid #ccc;"></div>
  </div>
</template>

<script>
import { FlowChart } from 'diagram-js';

export default {
  name: 'App',
  mounted() {
    this.initFlowChart();
  },
  methods: {
    initFlowChart() {
      // 初始化流程图
      const flowChart = new FlowChart({
        container: this.$refs.flowContainer,
      });

      // 添加一个简单的开始节点
      const startNode = flowChart.create('shape', {
        type: 'start-event',
        x: 100,
        y: 100,
        width: 36,
        height: 36,
      });

      // 添加一个任务节点
      const taskNode = flowChart.create('shape', {
        type: 'task',
        x: 200,
        y: 100,
        width: 100,
        height: 80,
      });

      // 添加连接线
      flowChart.create('connection', {
        source: startNode,
        target: taskNode,
      });
    }
  }
};
</script>

<style>
/* 可以根据需要添加样式 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了一个 div 容器来放置流程图，设置了宽度和高度，并添加了边框以便于查看。

2. 脚本部分 (<script>):

   • 引入了 diagram-js 库，这是一个用于创建和编辑图表的库。
   • 在 mounted 生命周期钩子中调用了 initFlowChart 方法来初始化流程图。
   • initFlowChart 方法中：
     • 创建了一个新的 FlowChart 实例，并指定了容器为 this.$refs.flowContainer。
     • 使用 create 方法添加了两个节点：一个是开始节点 (start-event)，另一个是任务节点 (task)。
     • 使用 create 方法添加了一条连接线，将开始节点和任务节点连接起来。

3. 样式部分 (<style>):

   • 这里可以添加自定义样式，例如调整节点的颜色、字体等。

这个示例展示了如何使用 Vue 和 diagram-js 库来创建一个简单的可视化流程图。你可以根据需求进一步扩展和自定义。