How to use the jsplumb.jsPlumb.getInstance function in jsplumb

dagAutomaticLayout() {
        $('#canvas').html('')

      // Destroy round robin
        Dag.init({
        dag: this,
        instance: jsPlumb.getInstance({
          Endpoint: [
            'Dot', { radius: 1, cssClass: 'dot-style' }
          ],
          Connector: 'Straight',
          PaintStyle: { lineWidth: 2, stroke: '#456' }, // Connection style
          ConnectionOverlays: [
            [
              'Arrow',
              {
                location: 1,
                id: 'arrow',
                length: 12,
                foldback: 0.8
              }
            ]
          ],

created () {
      // Edit state does not allow deletion of node a...
      this.setIsEditDag(false)

      if (this.$route.query.subProcessIds) {
        this.isRtTasks = true
      }

      Dag.init({
        dag: this,
        instance: jsPlumb.getInstance({
          Endpoint: [
            'Dot', { radius: 1, cssClass: 'dot-style' }
          ],
          Connector: 'Straight',
          PaintStyle: { lineWidth: 2, stroke: '#456' }, // Connection style
          ConnectionOverlays: [
            [
              'Arrow',
              {
                location: 1,
                id: 'arrow',
                length: 12,
                foldback: 0.8
              }
            ]
          ],

const defaultConfig = {
  // 对应上述基本概念
  anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
  connector: ['Straight'],
  endpoint: 'Blank',
  // 添加样式
  paintStyle: { stroke: '#909399', strokeWidth: 1 }, // connector
  // endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 } // endpoint
  // 添加 overlay，如箭头
  overlays: [
    ['Arrow', { width: 8, length: 8, location: 1 }],
    ['Label', { location: 0.3, id: 'label' }]
  ]
}
const instance = jsPlumb.getInstance()

export default {
  name: 'FlowDesigner',
  components: { JsonEditor, OpDialog },
  data() {
    return {
      title: '',
      flow: {},
      steps: [],
      flowPath: this.$route.query.serviceFlowPath
    }
  },
  mounted() {
    const vm = this
    request.post('/api', { serviceFlowPath: this.flowPath, _path: '/loadFlowConf' })
      .then(response => {

data () {
			return {
				createNodeActive: false,
				instance: jsPlumb.getInstance(),
				lastClickPosition: [450, 450] as XYPositon,
				nodeViewScale: 1,
				ctrlKeyPressed: false,
				debouncedFunctions: [] as any[], // tslint:disable-line:no-any
				stopExecutionInProgress: false,
			};
		},
		beforeDestroy () {

*/
        getLocationTemplate: function (dataType) {
          return $(opts.template).find('#' + dataType + '-template').html();
        }
      };

      // 画布内所有节点的容器，用于控制位移和缩放
      var $nodeContainer = {
        el: null, // 容器Dom
        left: 0, // 容器位移
        top: 0,
        zoom: 1 // 画布容器整体缩放值
      };

      // jsPlumb插件实例
      var instance = jsPlumb.getInstance({
        ConnectionOverlays: [ // 配置链接线的样式
          ['PlainArrow', {
            location: 1, // 0-1
            width: 8,
            id: 'arrow',
            length: 6,
            events: { // 终线箭头的点击事件
              click: function (e) {
                e.stopPropagation();
              }
            }
          }],
          ['Label',
                        {label: '<i class="common-icon-dark-circle-close"></i>', id: 'label'}
          ]
        ],

mounted () {
    const ths = this;

    ths.jsPlumb = jsPlumb.getInstance();
    ths.$nextTick(() => {
        // 默认加载流程A的数据、在这里可以根据具体的业务返回符合流程数据格式的数据即可
      ths.drawNodeFn();
    });
  },
  methods: {

cssClass?: string;
        overlays?: any[];
    }

    interface jsPlumbInstance { /*tslint:disable-line */
        setZoom(n: number): void;
        getAllConnections(): any[];
        getConnections(p?: any): any[];
    }
}


export class Graph {
    private static readonly Anchors = ["Bottom", "Top"];
    private static readonly EndpointStyle = {radius: 6, fill: "#456"};
    private p: jsPlumbInstance = jsPlumb.getInstance();
    private zoom: Zoom;

    private connectAll(edges: GraphEdge[]) {
        for (const edge of edges) {
            this.p.connect({
                source: edge.source,
                target: edge.target,
                detachable: false,
                cssClass: `edge edge-${edge.state} inPath`,
                overlays: [
                    ["Label", {label: edge.state, id: "state-label", cssClass: `edge-overlay ${edge.state}`}],
                    ["PlainArrow", {width: 11, length: 11, location: -5}]
                ]
            });
        }
    }

jsPlumb.getInstance().ready(() => {
            this.jsplumbInstance = jsPlumb.getInstance();

            this.jsplumbInstance.importDefaults({
                Anchor: ['Top', 'RightMiddle', 'LeftMiddle', 'Bottom'],
                Connector: [
                    'Flowchart',
                    { cornerRadius: 0, stub: 0, gap: 3 },
                ],
                ConnectionOverlays: [
                    [
                        'Arrow',
                        { direction: 1, foldback: 1, location: 1, width: 10, length: 10 },
                    ],
                    ['Label', { label: '', id: 'label', cssClass: 'aLabel' }],
                ],
                connectorPaintStyle: {
                    lineWidth: 2,

static createInstance = (container: any, readonly: boolean): jsPlumbInstance =>
    jsPlumb.getInstance({
      ConnectionsDetachable: !readonly,
      DragOptions: { cursor: 'pointer', zIndex: 2000 },
      ConnectionOverlays: [
        ['Arrow', {
          location: 1,
          visible: true,
          width: 11,
          length: 11
        }],
        ['Label', {
          location: 0.5,
          id: 'label',
          cssClass: 'connection-label'
        }]
      ],
      Container: container

public initJsPlumbInstance() {
        jsPlumb.getInstance().ready(() => {
            this.jsplumbInstance = jsPlumb.getInstance();

            this.jsplumbInstance.importDefaults({
                Anchor: ['Top', 'RightMiddle', 'LeftMiddle', 'Bottom'],
                Connector: [
                    'Flowchart',
                    { cornerRadius: 0, stub: 0, gap: 3 },
                ],
                ConnectionOverlays: [
                    [
                        'Arrow',
                        { direction: 1, foldback: 1, location: 1, width: 10, length: 10 },
                    ],
                    ['Label', { label: '', id: 'label', cssClass: 'aLabel' }],
                ],
                connectorPaintStyle: {