Below example illustrate a basic drawing of path or line between two different html div by not using any 3rd party library. in the tutorial we have only use pure SVG(Scalable Vector Graphics) concept to draw path between two different html dom.

In this example we have total 10 different ports and there are three different path between these ports.

And below is the react component for above simple html page.

PathViewer.tsx

import * as React from 'react';
import './style.css';

export default function App() {
  return (
    <div>
      <div className="port_container">
        <div id="port1" className="port">
          P1
        </div>
        <div id="port2" className="port">
          P2
        </div>
        <div id="port3" className="port">
          P3
        </div>
        <div id="port4" className="port">
          P4
        </div>
        <div id="port5" className="port">
          P5
        </div>
      </div>
      <div className="port_container">
        <div id="port6" className="port">
          P6
        </div>
        <div id="port7" className="port">
          P7
        </div>
        <div id="port8" className="port">
          P8
        </div>
        <div id="port9" className="port">
          P9
        </div>
        <div id="port10" className="port">
          P10
        </div>
      </div>
    </div>
  );
}

style.css

.port_container {
  display: flex;
  justify-content: center;
}

.port {
  padding: 25px 25px;
  border: 2px solid rgb(33, 34, 33);
  text-align: center;
  margin: 2px;
}

After having drawing logic in PathViewer React Component in place.

Updated PathViewer.tsx

import * as React from 'react';
import { useEffect, useState } from 'react';
import Path from './Path';
import './style.css';

export default function PathViewer() {
  
  let paths = [
    {
      name: 'path1',
      'src-port': 'port1',
      'dst-port': 'port3',
    },
    {
      name: 'path2',
      'src-port': 'port6',
      'dst-port': 'port4',
    },
    {
      name: 'path3',
      'src-port': 'port9',
      'dst-port': 'port10',
    },
  ];

  let svgPathList = [];
  paths.forEach((p) => {
    svgPathList.push(<Path key={p['name']} pathName={p['name']} />);
  });

  useEffect(() => {
    updatePaths(paths);
  }, []);

  function updatePaths(paths) {
    if (paths != null) {
      paths.forEach((p) => {
        //console.log(p);
        //console.log(p['name']);
        var path = document.getElementById(p['name']);
        if (path != null) {
          //console.log(document.getElementById(p['src-port']));
          //console.log(document.getElementById(p['dst-port']));

          var pathViewerSvg = document.getElementById('pathViewerSvg');
          var srcPort = document.getElementById(p['src-port']);
          var dstPort = document.getElementById(p['dst-port']);

          //console.log(pathViewerSvg.getBoundingClientRect());
          //console.log(srcPort.getBoundingClientRect());
          //console.log(dstPort.getBoundingClientRect());

          var x1 =
            srcPort.getBoundingClientRect().left +
            srcPort.getBoundingClientRect().width / 2 -
            pathViewerSvg.getBoundingClientRect().left;
          var y1 =
            srcPort.getBoundingClientRect().top +
            srcPort.getBoundingClientRect().height / 2 -
            pathViewerSvg.getBoundingClientRect().top;

          var x2 =
            dstPort.getBoundingClientRect().left +
            dstPort.getBoundingClientRect().width / 2 -
            pathViewerSvg.getBoundingClientRect().left;
          var y2 =
            dstPort.getBoundingClientRect().top +
            dstPort.getBoundingClientRect().height / 2 -
            pathViewerSvg.getBoundingClientRect().top;

          //Example when 200 is diff between start and end points.
          //path.setAttribute("d", "M 0 0 C 75 25, 125 25, 200 200");
          var diffxOffset = Math.abs(x1 - x2) / 200;
          var cx1 = x1 + 75 * diffxOffset;
          var cy1 = y1 + 25 * diffxOffset;
          var cx2 = x2 - 75 * diffxOffset;
          var cy2 = y1 + 25 * diffxOffset;

          //console.log(x1, y1, cx1, cy1, cx2, cy2, x2, y2);

          path.setAttribute(
            'd',
            'M ' +
              x1 +
              ' ' +
              y1 +
              ' C ' +
              cx1 +
              ' ' +
              cy1 +
              ', ' +
              cx2 +
              ' ' +
              cy2 +
              ', ' +
              x2 +
              ' ' +
              y2
          );
        }
      });
    }
  }

  return (
    <div>
      <svg id="pathViewerSvg" width="100%" height="100%">
        <foreignObject x="0" y="0" width="100%" height="100%">
          <div>
            <div className="port_container">
              <div id="port1" className="port">
                P1
              </div>
              <div id="port2" className="port">
                P2
              </div>
              <div id="port3" className="port">
                P3
              </div>
              <div id="port4" className="port">
                P4
              </div>
              <div id="port5" className="port">
                P5
              </div>
            </div>
            <div className="port_container">
              <div id="port6" className="port">
                P6
              </div>
              <div id="port7" className="port">
                P7
              </div>
              <div id="port8" className="port">
                P8
              </div>
              <div id="port9" className="port">
                P9
              </div>
              <div id="port10" className="port">
                P10
              </div>
            </div>
          </div>
        </foreignObject>
        {svgPathList}
      </svg>
    </div>
  );
}

New Path.tsx

import * as React from 'react';
export default function Path(props) {
  // console.log(props.pathName);
  return (
    <path
      id={props.pathName}
      d="M 0 0 C 0 0, 0 0, 0 0"
      stroke="rgb(248 214 25)"
      stroke-width="2.5"
      fill="transparent"
    ></path>
  );
}

Demo

https://react-html-draw-line-hzdw3h.stackblitz.io

https://stackblitz.com/edit/react-html-draw-line-hzdw3h?file=index.tsx

Reference

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

https://reactjs.org/docs/hooks-effect.html