Example steps for using AntV X6 with Vue.js

<div ref="containerRef" class="area-center-container" />

const data = {
  // Nodes: [
    {
      id: 'node1', // String, optional, unique identifier of the node x: 40, // Number, required, x value of the node position y: 40, // Number, required, y value of the node position width: 80, // Number, optional, width value of the node size height: 40, // Number, optional, height value of the node size label: 'hello', // String, node label },
    {
      id: 'node2', // String, unique identifier of the node x: 160, // Number, required, x value of the node position y: 180, // Number, required, y value of the node position width: 80, // Number, optional, width value of the node size height: 40, // Number, optional, height value of the node size label: 'world', // String, node label },
  ],
  // edges: [
    {
      source: 'node1', // String, required, starting node id
      target: 'node2', // String, required, target node id
    },
  ],
}

function initGraph() {
  const graph = new Graph({
    container: this.$refs.containerRef,
    grid: {
      size: 10, // grid size 10px
      visible: true // render mesh background},
    snapline:
      enabled: true, // Alignment sharp: true
    },
    scroller:
      enabled: true,
      pageVisible: false,
      pageBreak: false,
      pannable: true
    }
  })
  // Center the canvas graph.centerContent()

  graph.fromJSON(data)
}

<el-aside ref="stencilRef" class="area-left" />

this.stencil = new Stencil({
    title: 'Process Node Sidebar',
    target: graph,
    search: false,
    collapsable: true,
    stencilGraphWidth: this.$refs.stencilRef.$el.clientWidth,
    stencilGraphHeight: this.$refs.stencilRef.$el.clientHeight,
    groups: [
        {
            name: 'group',
            title: 'Flowchart Node',
            collapsable: false
          }
        ],
    getDropNode: node => {
        let cloneNode = node.clone()
        switch (node.shape) {
            case 'rect':
                cloneNode = new RectShape()
                break
            case 'circle':
                cloneNode = new CircleShape()
                break
            case 'polygon':
                cloneNode = new PolylineShape()
                break
        }
        cloneNode.updateInPorts(graph)
        return cloneNode
    }
})
// Load nodes this.stencil.load([new Rect(rectInfo), new Circle(circleInfo), new Polygon(polygonInfo)], 'group')