JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
  <div id="box"></div>
</body>
</html>

JavaScript

const points = [
  // x, y, text
  [1, 2, 'Artifical Intelligence'],
  [2, 1, 'Engine Intelligence'],
  [2, 3, 'Engine Intelligence'],
  [3, 2, 'Neuro-like networks'],
  [3, 4, 'Heuristic Programming'],
  [4, 3, 'Heuristic modeling'],
];
const links = [
  // index from, to
  [0, 1],
  [0, 2],
  [2, 3],
  [2, 4],
  [3, 5],
  [4, 5]
];
const mx = 256;
const my = 64;
const cr = 16;

function makePath(x1, y1, x2, y2) {
  const weight = 0.3;
  const dx = (x2 - x1) * weight;
  const c1 = x1 + dx;
  const c2 = x2 - dx;
  return `<path d="M${x1},${y1} C${c1},${y1} ${c2},${y2} ${x2},${y2}" stroke-width="2" stroke="#DDD" fill="transparent"/>`;
}

function makeSvg () {
  let svg = '<svg  width="1200" height="330" xmlns="http://www.w3.org/2000/svg">';
  svg += '<style>.title { font: 20px Arial; fill: black; }</style>';
  links.forEach(([a, b]) => {
    const pointA = points[a];
    const pointB = points[b];
    svg += makePath(
      pointA[0] * mx + cr,
      pointA[1] * my,
      pointB[0] * mx - cr,
      pointB[1] * my
    );
  });
  points.forEach(([x, y, text]) => {
    const w = x * mx;
    const h = y * my;
    const circle = `<circle cx="${w}" cy="${h}" r="${cr}" stroke-width="3"  stroke="#51BFFF" fill="white"/>`;
    svg += circle;
    const title = `<text class="title" text-anchor="end" x="${w - 2 * cr}" y="${h + 6}">${text}</text>`;
    svg += title;
  });
  svg += '</svg>';
  document.querySelector('#box').innerHTML = svg;
}

makeSvg();