Visjs

Visjs, versions:

vis-data → 6.6.1
vis-graph3d → 5.9.8
vis-network → 7.10.2
vis-timeline → 7.3.7
vis-util → 4.3.4

Template:

<div class="container">
    <style>
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>
    <p>Create a simple network with some nodes and edges.</p>
    <div id="mynetwork"></div>
</div>

Script:

SR.render({}, async () => {
    await eval(await fetch('https://cdnjs.cloudflare.com/ajax/libs/vis-data/6.6.1/dist/umd.js').then((res) => res.text()));
    await eval(await fetch('https://cdnjs.cloudflare.com/ajax/libs/vis-network/8.5.4/standalone/umd/vis-network.min.js').then((res) => res.text()));
    // create an array with nodes
    var nodes = new vis.DataSet([{
            id: 1,
            label: "Node 1"
        },
        {
            id: 2,
            label: "Node 2"
        },
        {
            id: 3,
            label: "Node 3"
        },
        {
            id: 4,
            label: "Node 4"
        },
        {
            id: 5,
            label: "Node 5"
        }
    ]);
    // create an array with edges
    var edges = new vis.DataSet([{
            from: 1,
            to: 3
        },
        {
            from: 1,
            to: 2
        },
        {
            from: 2,
            to: 4
        },
        {
            from: 2,
            to: 5
        },
        {
            from: 3,
            to: 3
        }
    ]);
    // create a network
    var container = document.getElementById("mynetwork");
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {};
    var network = new vis.Network(container, data, options);
});