项目使用 Vue2.0 + Element-ui 框架，在开发流程功能时自定义节点，为实现稍复杂的样式以及操作交互，使用 markup + attrs的方式的话，比较麻烦，且难以结合使用 Element-ui的交互组件，因此换成结合 Vue组件渲染方式注册自定义节点
（官方文档相对简单了点，老报错，搞了老半天，嘤嘤嘤）

安装依赖

npm install @antv/x6 --save
npm install @antv/x6-vue-shape --save
npm install @vue/composition-api --save

流程组件（父组件）

<script>
import { Graph } from '@antv/x6'
import { register } from '@antv/x6-vue-shape'
import FlowNode from './components/FlowNode'
    
export default {
methods: {
// 注册自定义节点
registerCustomNode() {
register({
  shape: 'flow-node',
  width: 200,
  height: 200,
  component: {
  // 使用 render函数来创建组件
    render: h => h(FlowNode, {
      on: {
      // 监听 FlowNode组件触发的事件，获取传递出来的数据
        myEvent: (data) => {
          this.handleMyEvent(data)
        }
      }
    })
  }
})
},
handleMyEvent(data) {
...
}
}
}
</script>

节点组件（子组件）

/* FlowNode组件 */
<script>    
export default {
name: 'FlowNode',
// 在节点组件中通过 inject 配置来获取 node 和 graph
  inject: ['getNode'],
  data () {
    return {
      curNode: null,
      nodeData: null
    }
  },
  mounted () {
    this.curNode = this.getNode()
    this.nodeData = this.curNode?.data ?? {}
    // 外部更新节点数据时，可监听 data的 change事件来获取
    /* this.curNode.on('change:data', ({ current }) => {
      this.nodeData = current.data
    }) */
  },
methods: {
onMyEvent(node) {
// 节点组件中触发事件，传递数据
this.$emit('myEvent', 'data from FlowNode')
}
}
}
</script>

数据交互

以上是我自己想办法写的一种数据交互方式，相当于是【节点组件】通过 inject、'change:data'的方式获取【流程组件】中赋予节点的数据，通过 $emit 将数据传递给【流程组件】，【流程组件】在注册节点的时候使用 render函数来创建组件，并监听【节点组件】中的事件。
（还有其他数据交互的方式，比如通过 Vuex，根据实际情况可以尝试。）