如何用LeaderLine实现类图中的一元/递归自关联关系？

方案1：使用隐藏辅助元素（推荐） #

LeaderLine不允许同一元素同时作为起点和终点，最靠谱的办法是给目标类元素加一个隐藏的辅助DOM节点，用它作为线条的一端，另一端仍指向目标元素，以此模拟自连线效果。

• 第一步：创建并挂载辅助元素

  const target = document.getElementById('OtherClass');
  // 生成透明的辅助节点
  const helper = document.createElement('div');
  helper.style.cssText = 'position:absolute; width:0; height:0; opacity:0; pointer-events:none;';
  target.appendChild(helper);
  // 初始化辅助元素位置（可根据类图布局调整偏移）
  helper.style.left = '120px';
  helper.style.top = '30px';
  

• 第二步：基于辅助元素创建自连线

  const selfLine = new LeaderLine(helper, target, {
    startPlug: 'blank', // 辅助端不需要显示插头
    endPlug: 'arrow',
    path: 'fluid', // 让线条自然弯曲，适配递归关系
    color: '#ff0000',
    size: 2
  });
  

• 第三步：同步拖拽时的辅助元素位置
  因为你的类元素用PlainDraggable实现了拖拽，需要在拖拽事件里更新辅助元素位置并刷新线条：

  new PlainDraggable(target, {
    onDrag: () => {
      // 保持辅助元素在目标元素的固定偏移位置
      helper.style.left = '120px';
      helper.style.top = '30px';
      selfLine.position(); // 刷新线条坐标
    }
  });
  

方案2：修改LeaderLine源码（仅临时应急） #

如果不想新增辅助元素，可以直接修改LeaderLine的压缩代码，移除对起点终点相同的校验：

• 找到报错位置leader-line.min.js:2:51907对应的it函数，删除或注释掉其中判断start和end是否为同一元素的逻辑。
• 注意：这种方法会破坏库的原有校验，后续升级LeaderLine时修改会被覆盖，还可能引发未知问题，不推荐长期使用。

内容的提问来源于stack exchange，提问作者Mohamed Ennahdi El Idrissi