X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。

最终效果图

1.安装

npm install @antv/x6 --save  //x6主要包

npm install  @antv/x6-vue-shape  //使用vue组件画图插件

npm install @antv/x6-plugin-dnd //拖拽 添加元素图形插件

2.直接上代码

dom元素 form.vue

<template>

    <!-- 新增、编辑弹窗-->
    <el-dialog width="1200px" class="flow-dialog" top="5vh" title="实体编辑" :visible.sync="show" :append-to-body="true" :close-on-click-modal = "false" v-el-drag-dialog>
      <div class="content">
        <!--左侧工具栏-->
        <div class="stencil" >
          <p>流程编辑器</p>
          <span @mousedown="startDragToGraph(item, $event)" v-for="item in list" :key="item" @click="test(item)" class="percentage-value">
            <i style="margin-right: 5px;cursor: pointer;"  class="el-icon-setting"/>
            <span class="percentage-content">{{ item }}</span>
          </span>
        </div>
        <div class="panel">
          <!--流程图工具栏-->
          <div class="toolbar">
            <el-button class="float-btn" icon="el-icon-s-claim" type="primary" @click="save()">保存</el-button>
            <el-button class="float-btn" icon="el-icon-s-home" type="danger" @click="show=false">退出</el-button>
            <el-button style="margin-left: 100px;" class="float-btn" icon="el-icon-s-tools" type="success" @click="">设置预览参数</el-button>
            <el-button class="float-btn" icon="el-icon-notebook-2" type="info" @click="">预览节点数据</el-button>
            <el-button class="float-btn" icon="el-icon-refresh" type="success" @click="">重算预览数据</el-button>
          </div>
          <!--流程图画板-->
          <div id="containerShape" />
        </div>
      </div>
    </el-dialog>

</template>

js部分

<script>
 import elDragDialog from '@/directive/el-drag-dialog'
  import { register } from '@antv/x6-vue-shape'
  import { Graph,Shape} from "@antv/x6";
  import CustomNode from './CustomNode.vue'
  import { Dnd } from '@antv/x6-plugin-dnd'

  export default {
    directives: { elDragDialog },
    data() {
      return {
        show:false,
        list: ['数据查询', '横向连接', '追加合并', '分组汇总', '数据过滤','字段设置','输出'],
        graph:{}
      }
    },
    mounted() {
      const attrs = {
        circle: {
          r: 4,
          magnet: true,
          fill: '#fff',
          stroke: '#85A5FF',
          strokeWidth: 1,
        },
      };
      register({
        shape: 'custom-vue-node',
        component: CustomNode,
        width: 180,
        height: 40,
        // port默认不可见
        ports: {
          groups: {
            in: {
              position: {
                name:'left',
                args: {
                  dx: -10,
                  y: '50%',
                },
              },
              attrs: attrs
            },
            out: {
              position: {
                name:'right',
                args: {
                  x: '100%',
                  dx: 10,
                  y: '50%',
                },
              },
              attrs: attrs
            },
          },
        },
      })
    },
    methods: {
      open() {
        this.show = true;
        this.$nextTick(() => {
          this.init("containerShape");
        });
      },
      init(id){
        const graph = new Graph({
          container: document.getElementById(id),
          width: 1000,
          height: 1000,
          connecting: {
            router: 'manhattan',
            anchor: 'center',
            connectionPoint: 'anchor',
            createEdge() {
              return new Shape.Edge({
                attrs: {
                  line: {
                    stroke: '#52c41a',
                    strokeWidth: 1,
                    strokeDasharray: 5,
                    targetMarker: 'classic',
                    style: {
                      animation: 'ant-line 30s infinite linear',
                    },
                  },
                },
                zIndex: 0,
              })
            },
          }
        })
        graph.addNode({
          shape: 'custom-vue-node',
          x: 100,
          y: 100,
          ports: [{group: 'in'},{group: 'out'}],
          data:{
            percentage: 30
          }
        })


        this.graph = graph;
     },
      save() {
       this.graph.addNode({
         shape: 'custom-vue-node',
         x: 200,
         y: 300,
         ports: [{group: 'in'},{group: 'out'}],
         data:{
           percentage: '数据流程飒飒飒飒拉开阿斯兰的卡死了的科目来打开'
         }
       })
      },
      // 自定义一个拖拽方法，也可以单独封装成一个js文件(方便调用)
      // 这里直接写到vue文件的methods方法里了
      // 需求：未置灰的可以拖拽，置灰的无法拖拽即禁用状态
      startDragToGraph(item, e) {
          const node = this.graph.createNode({
            shape: 'custom-vue-node',
            x: 200,
            y: 300,
            ports: [{group: 'in'},{group: 'out'}],
            data:{
              percentage: item
            }
          });
          const dnd = new Dnd({
            target: this.graph,
            // ☆拖拽结束时，验证节点是否可以放置到目标画布中。
            validateNode: () => {
              console.log('成功拖拽至目标画布')
            },
          })
          dnd.start(node, e)
      },

    }
  }
</script>

css部分

<style type="text/css">
  @keyframes ant-line {
    to {
    stroke-dashoffset: -1000
    }
  }
</style>

<style type="text/css" scoped>
  .flow-dialog ::v-deep .el-dialog__body{
    max-height: 85vh;
    padding: 0;
  }
  .toolbar ::v-deep .el-button--small{
    padding: 5px 10px;
  }
  .content {
    width: 1180px;
    height: 85vh;
    display: flex;
  }

  .stencil {
    width: 230px;
    height: 100%;
    position: relative;
    margin-right: 10px;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    text-align: center;
  }
  .stencil p{
     margin: 0;
     line-height: 37px;
     border-bottom: 1px solid #00000008;
     background-color: #f7f9fb;
     font-size: 14px;
     padding-left: 5px;
     text-align: left;
   }
  .panel {
    width: calc(100% - 230px);
    height: 100%;
  }

  .panel .toolbar {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    background-color: #f7f9fb;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .panel #containerShape {
    width: 100%;
    height: calc(100% - 10px) !important;
  }

  .percentage-value{
    display: inline-block;
    width: max-content;
    background-color: #fff;
    border: 1px solid #c2c8d5;
    border-left: 4px solid #5F95FF;
    border-radius: 4px;
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
    padding: 8px;
    font-size: 16px;
    margin-top: 10px;
    text-align: left;
  }
  .percentage-content{
    width: 100px;
    max-width: 150px;
    overflow: hidden;
    font-size: 12px;
    display: inline-block;
  }

</style>

CustomNode.vue节点元素dom

<template>
  <span class="percentage-value">
    <i style="margin-right: 5px;cursor: pointer;" @click="save()" class="el-icon-setting"/>
    <span class="percentage-content">{{ percentage }}%</span>
    <i @click="save()" class="el-icon-success data-start"/>
  </span>
</template>


<script>
  export default {
    inject: ['getNode'],
    data() {
      return {
        percentage: 50,
      }
    },
    mounted() {
      const cell = this.getNode();
      this.percentage = cell.data.percentage;
    },
    methods: {
      save(){
        console.log("点击成功")
      }
    }
  }
</script>
<style type="text/css" scoped>
 .percentage-value{
   display: inline-block;
   width: max-content;
   background-color: #fff;
   border: 1px solid #c2c8d5;
   border-left: 4px solid #5F95FF;
   border-radius: 4px;
   box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
   padding: 10px;
   font-size: 16px;
 }
 .percentage-content{
   width: 100px;
   max-width: 150px;
   overflow: hidden;
   font-size: 12px;
   display: inline-block;
 }
  .data-start{
    margin-right: 5px;
    margin-left: 10px;
    cursor: pointer;
    color: #6bcc00;
  }
</style>

相关官方文档x6.antv官网