安装npm install @antv/x6 --save
引入import { Graph, Addon } from "@antv/x6";
说明：如果没有自定义拖拽到画布的需求引入Graph就行了。

具体说明可查看官网
所有事件

graph.dispose() // 删除画布
graph.model.getNodes() // 获取画布中所有节点数据
graph.model.getEdges() // 获取画布中所有连接线数据

初始化代码：

<template>
  <div id="container"></div>
</template>
<script>
import { Graph, Addon } from "@antv/x6";
export default {
	data() {
	    return {
	      ports: { // 连接桩
	        groups: {
	          // 输入链接桩群组定义
	          top: {
	            position: "top",
	            attrs: {
	              circle: {
	                r: 4,
	                magnet: true,
	                stroke: "#2D8CF0",
	                strokeWidth: 2,
	                fill: "#fff"
	              }
	            }
	          },
	          // 输出链接桩群组定义
	          bottom: {
	            position: "bottom",
	            attrs: {
	              circle: {
	                r: 4,
	                magnet: true,
	                stroke: "#2D8CF0",
	                strokeWidth: 2,
	                fill: "#fff"
	              }
	            }
	          },
	          left: {
	            position: "left",
	            attrs: {
	              circle: {
	                r: 4,
	                magnet: true,
	                stroke: "#2D8CF0",
	                strokeWidth: 2,
	                fill: "#fff"
	              }
	            }
	          },
	          right: {
	            position: "right",
	            attrs: {
	              circle: {
	                r: 4,
	                magnet: true,
	                stroke: "#2D8CF0",
	                strokeWidth: 2,
	                fill: "#fff"
	              }
	            }
	          }
	        },
	        items: [
	          {
	            id: "top1",
	            group: "top"
	          },
	          {
	            id: "right1",
	            group: "right"
	          },
	          {
	            id: "bottom1",
	            group: "bottom"
	          },
	          {
	            id: "left1",
	            group: "left"
	          }
	        ]
	      }
	    };
	  },
	methods: {
		init() {
			let nodes = [
				{
					id:1, //节点唯一标识
					x:100,
					y:100,
					shape:"circle", // 节点形状
					height:30,
					width:100,
					attrs: { // 节点样式
		              body: {
		                fill: "#ffffff", // 背景颜色
		                stroke: "#ffffff" // 边框颜色
		              },
		              label: {
		                text: '节点', // 节点显示文字
		                fill: "#000000"
		              }
		            },
		            ports: this.ports // 链接桩
				},
				{
					id:2, //节点唯一标识
					x:200,
					y:300,
					shape:"circle", // 节点形状
					height:30,
					width:100,
					attrs: { // 节点样式
		              body: {
		                fill: "#ffffff", // 背景颜色
		                stroke: "#ffffff" // 边框颜色
		              },
		              label: {
		                text: '节点', // 节点显示文字
		                fill: "#000000"
		              }
		            },
		            ports: this.ports // 链接桩
				}
			]
			let esges = [{
				source: 2, // 开始节点id
                target:1, // 结束节点id
                label: x.cond,
                attrs: {
                    text: {
                      fill:"#800000",
                      fontSize: 14,
                      textAnchor: "middle",
                      textVerticalAnchor: "middle",
                      pointerEvents: "none"
                    },
                    line: {
                      stroke:"#800000"
                    }
                  },
                  router: { // 路由
                    name: "manhattan",
                    args: {} // 自定义数据
                }
			}]
			const graph = new Graph({
		        container: document.getElementById("container"), // 画布
		        snapline: { // 对齐线
		          enabled: true,
		          className: "my-snapline" // 自定义对齐线类名
		        },
		        grid: {  // 背景网格
		          size: 10, // 网格大小 10px
		          visible: true // 渲染网格背景
		        },
		        scroller: {
		          enabled: true,
		          pannable: true,
		          autoResize: true
		        },
		        mousewheel: { // 缩放
		          enabled: true,
		          zoomAtMousePosition: true,
		          modifiers: ["ctrl", "meta"],
		          minScale: 0.2, // 最小缩放比例
		          maxScale: 3 // 最大缩放比例
		        },
		        connecting: { // 连接线设置
		          snap: {
		            radius: 10
		          }, // 自动吸附
		          allowBlank: false, // 空白处不显示连接线
		          allowLoop: true,
		          allowMulti: false, // 在起始和终止节点之间只允许创建一条边
		          highlight: true, // 高亮
		          connector: "rounded",
		          // 创建连接线
		          createEdge() {
		            return graph.createEdge({
		              attrs: { // 连接线样式
		                text: {
		                  fill: "#52ce60",
		                  fontSize: 14,
		                  textAnchor: "middle",
		                  textVerticalAnchor: "middle",
		                  pointerEvents: "none"
		                },
		                line: {
		                  stroke: "#52ce60"
		                }
		              },
		              label: "pass"
		            });
		          },
		          // 判断是否可以链接
		          validateConnection({ edge, sourceView, targetView }) {
		          	// 自定义逻辑，不满足连接条件返回false
		            return true;
		          }
		        }
		      });
		      graph.fromJSON({ // 按照指定的 JSON 数据渲染节点和边
		      	nodes:nodes, // 节点数据
		      	edges:esges // 连接线数据
		      });
      		  graph.centerContent() // 居中
      		  // 链接桩显示隐藏
		      graph.on("node:mouseenter", () => {
		        const ports = container.querySelectorAll(".x6-port-body");
		        this.showPorts(ports, true);
		      });
		      graph.on("node:mouseleave", () => {
		        const ports = container.querySelectorAll(".x6-port-body");
		        this.showPorts(ports, false);
		      });
		      // 显示删除链接线按钮
		      graph.on("edge:mouseenter", ({ edge }) => {
		        edge.addTools([
		          "source-arrowhead",
		          "target-arrowhead",
		          {
		            name: "button-remove",
		            args: {
		              distance: -30
		            }
		          }
		        ]);
		      });
		      graph.on("edge:mouseleave", ({ edge }) => {
		        edge.removeTools();
		      });
		      // 显示删除节点按钮
		      graph.on("node:mouseenter", ({ node }) => {
		        node.addTools([
		        {
		        	name: "button-remove",
		        	args: {
		                x: "100%",
		                y: 0,
		                offset: { x: -10, y: 10 }
		            }
		         }
		        ]);
		      });
		      graph.on("node:mouseleave", ({ node }) => {
		        node.removeTools();
		      });
		},
		showPorts(ports, show) {
	      for (let i = 0, len = ports.length; i < len; i = i + 1) {
	        ports[i].style.visibility = show ? "visible" : "hidden";
	      }
	    }
	}
};
</script>

连接线以及节点的方法