026试用流程图框架jsPlumb和VueFlow，作为可视化编程实现参考

026试用流程图框架jsPlumb和VueFlow，作为可视化编程实现参考

jsPlumb定制型太强，vue3示例与教程能力不足

<script setup lang="ts">
import {
      jsPlumb } from 'jsplumb';
import {
      onMounted } from 'vue';
let nodeList:any;
onMounted(() => {
     
  let plumbIns = jsPlumb.getInstance();
  let 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: ['StateMachine'],
    endpoint: 'Blank',
    paintStyle: {
      stroke: '#909399', strokeWidth: 2 },
    endpointStyle: {
      fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 }, // endpoint
    // 添加 overlay，如箭头
    overlays: [['Arrow', {
      width: 8, length: 8, location: 1 }]], // overlay
  };
  let relations = [
    ['item-4', 'item-1'],
    ['item-1', 'item-5'],
    ['item-5', 'item-2'],
    ['item-2', 'item-6'],
    ['item-6', 'item-3'],
    ['item-3', 'item-7'],
    ['item-7', 'item-9'],
    ['item-9', 'item-6'],
    ['item-6', 'item-8'],
    ['item-8', 'item-5'],
    ['item-3', 'item-9'],
    ['item-2', 'item-8'],
    ['item-1', 'item-4'],
    ['item-5', 'item-4'],
  ];

  plumbIns.ready(() => {
     
    //在item-4节点上添加一个端点
    let anEndpoint = plumbIns.addEndpoint('item-4', {
     
      anchors: [[0.7, 1, 0, 1]],
      endpoint: 'Blank',
    });

    relations.push(['item-8', anEndpoint]);

    for (let item of relations) {
     
      plumbIns.connect(
        {
     
          source: item[0],
          target: item[1],
        },
        defaultConfig
      );
    }
  });
});
script>

<template>
  <div class="hello">
    <div id="relation-box">
      <div
        class="node"
        v-for="item in nodeList"
        :key="item.id"
        :style="{ left: item.left, top: item.top }"
        :id="'node-' + item.id"
      >
        {
  { item.name }}
        <div>detail...div>
      div>
    div>
  div>
  <div id="wrapper">
    <div class="line-wrap" style="margin-left: 70px">
      <div id="item-1" class="state-item">State 1div>
      <div id="item-2" class="state-item">State 2div>
      <div id="item-3" class="state-item">State 3div>
    div>
    <div class="line-wrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96