recently I tried to make a flow graph component by myself, but the connection drawn is too rough. Ask the old driver for advice on how to optimize it.

<!--  -->
<g>
  <g v-for="(line, i) in lines" :key="i">
    <path :d="drawLine(line)" fill="none" marker-end="url(-sharparrow)" stroke-width="2px" />
  </g>
</g>

drawLine(line){
  let node1 = this.nodes[line[0]], node2 = this.nodes[line[1]];
  const MARGIN = 50;
  const NODE_LINE_GAP = 8; //816
  let startX = node1.x+node1.width;
  let startY = node1.y+(node1.height/2);
  let targetX = node2.x-NODE_LINE_GAP;
  let targetY = node2.y+(node2.height/2);
  let x1 = startX+MARGIN;
  let x2 = targetX-MARGIN;
  let y1 = startY;
  let y2 = targetY;
  let x3 = (x1+x2)/2;
  let y3 = y1;
  let x4 = (x1+x2)/2;
  let y4 = (y1+y2)/2;
  //(startX,startY)(x1,y1),(x2,y2)(targetX,targetY)
  return `M ${startX},${startY} L ${x1},${y1} Q ${x3},${y3} ${x4},${y4} T ${x2},${y2} L ${targetX},${targetY}`;
}

how to optimize the algorithm of wiring or the style of path elements?