npm install vue-x6
yarn add vue-x6

<script setup lang="ts">
import { ref } from 'vue'
import { Snapline } from "@antv/x6-plugin-snapline";
import { Graph, Node, Edge, ElementOfPlugin } from 'vue-x6'
const click = (e) => {
  console.log(e)
}
const SnaplinePlugin = ElementOfPlugin('Snapline', Snapline)
const visible = ref(true)
const toggle = () => visible.value = !visible.value
</script>

<template>
  <button @click="toggle">显示/隐藏node2</button>
  <Graph grid>
    <SnaplinePlugin key="Snapline" />
    <Node id="1" label="node1" :x="100" :y="100" :width="80" :height="40" @click="click" >
    </Node>
    <Node id="2" label="node2" :x="200" :y="200" :width="80" :height="40" @click="click" v-if="visible" />
    <Node id="3" label="node3" :x="200" :y="100" :width="80" :height="40" parent="1" @click="click" />
    <Edge v-if="visible" source="1" target="2" @click="click">
      <EdgeTool name="button-remove" :args='{ x: 10, y: 10 }' />
      <Label :attrs='{text: {text: "Hello Label1"}}' :position='{distance: 0.3}' />
      <Label :attrs='{text: {text: "Hello Label3"}}' :position='{distance: 0.5}' />
      <Label :attrs='{text: {text: "Hello Label2"}}' :position='{distance: 0.7}' />
      <SourceMarker name="diamond" />
      <TargetMarker name="ellipse" />
    </Edge>
  </Graph>
</template>

import { register, getTeleport } from "@antv/x6-vue-shape";
import ProgressNode from "./ProgressNode.vue";

register({
  shape: "custom-vue-node",
  width: 100,
  height: 100,
  component: ProgressNode,
});

const TeleportContainer = getTeleport();

<template>
  <TeleportContainer />
  <Graph grid>
    <Node shape="custom-vue-node" :x="400" :y="100" />
  </Graph>
</template>