<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>

import * as gojs from "https://cdn.skypack.dev/gojs@2.1.44";
import "https://cdn.skypack.dev/gojs@2.1.56/extensions/HyperlinkText.js";
import "https://cdn.skypack.dev/gojs@2.1.56/extensions/PanelLayoutFlow.js";

function init() {
  const $ = go.GraphObject.make;

  const myDiagram =
    $(go.Diagram, "myDiagramDiv");

  const itmap = new go.Map();
  itmap.add("",
      $(go.Panel,
        $(go.TextBlock, { maxSize: new go.Size(200, 20), margin: new go.Margin(0, 1.5), overflow: go.TextBlock.OverflowEllipsis,	isMultiline: true, maxLines: 2,},
          new go.Binding("text", ""))
      ));
  itmap.add("Hyperlink",
      $(go.Panel,
        $("HyperlinkText",
          function(obj) { return "https://gojs.net/" + obj.part.data.version; },
          $(go.TextBlock, { stroke: "blue", font: "bold 10pt sans-serif" },
            new go.Binding("text", "", (v, obj) => "Visit GoJS " + obj.part.data.version))
        )
      ));

  function convText(t) {
    return [{ category: "Hyperlink" }].concat(t.split(" "));
  }

  myDiagram.nodeTemplate =
    $(go.Node, "Auto",
      { maxSize: new go.Size(200, NaN) },
      $(go.Shape,
        { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
        new go.Binding("fill", "color")),
      $(go.Panel, "Flow",
        { margin: 8, stretch: go.GraphObject.Fill },
        new go.Binding("itemArray", "text", convText),
        { itemTemplateMap: itmap }
      )
    );

  myDiagram.model = new go.GraphLinksModel(
  [
    { key: 1, text: "Alpha Alpha Alpha Alpha Alpha Alpha Alpha Alpha Alpha Alpha ", color: "lightblue", version: "latest" },
    { key: 2, text: "Beta Beta Beta Beta Beta", color: "orange", version: "beta" },
  ],
  [
    { from: 1, to: 2 },
  ]);
}
window.addEventListener('DOMContentLoaded', init);