Network Diagram

import Chart from 'chart.js/auto';

// Illustrative data used by the live preview.
const chartData = {
  "nodeHeaders": [
    "Node ID",
    "Label"
  ],
  "edgeHeaders": [
    "First Node ID",
    "Second Node ID"
  ],
  "network": {
    "nodes": [
      {
        "id": "web",
        "label": "Web App"
      },
      {
        "id": "api",
        "label": "API"
      },
      {
        "id": "auth",
        "label": "Identity"
      },
      {
        "id": "db",
        "label": "Database"
      },
      {
        "id": "cache",
        "label": "Cache"
      },
      {
        "id": "archive",
        "label": "Archive"
      }
    ],
    "edges": [
      {
        "source": "web",
        "target": "api"
      },
      {
        "source": "web",
        "target": "auth"
      },
      {
        "source": "api",
        "target": "auth"
      },
      {
        "source": "api",
        "target": "db"
      },
      {
        "source": "api",
        "target": "cache"
      }
    ]
  },
  "datasets": []
};

function createConfig(chartData) {
    const graph = chartData.network;
    const nodes = graph.nodes.map((node, index) => {
        const angle = -Math.PI / 2 + index * Math.PI * 2 / graph.nodes.length;
        return { ...node, x: graph.nodes.length === 1 ? 0 : Math.cos(angle), y: graph.nodes.length === 1 ? 0 : Math.sin(angle), degree: graph.edges.filter(edge => edge.source === node.id || edge.target === node.id).length };
    });
    const byId = new Map(nodes.map(node => [node.id, node]));
    const edges = graph.edges.map(edge => ({ source: byId.get(edge.source), target: byId.get(edge.target) }));
    const radius = Math.max(1.5, Math.min(7, 180 / nodes.length));
    const label = (node) => `${node.label} (${node.id})`;
    const shortLabel = (node) => label(node).length > 22 ? label(node).slice(0, 21) + '…' : label(node);
    const geometry = (chart) => ({ x: (chart.chartArea.left + chart.chartArea.right) / 2, y: (chart.chartArea.top + chart.chartArea.bottom) / 2, size: Math.max(1, Math.min(chart.chartArea.width / 2 - 85, chart.chartArea.height / 2 - 30)) });
    return {
        type: 'scatter', data: { datasets: [{ data: nodes.map(node => ({ x: node.x, y: node.y })), pointRadius: radius, pointHoverRadius: radius + 2, backgroundColor: '#2563eb' }] },
        options: { responsive: true, maintainAspectRatio: false, animation: false,
            scales: { x: { display: false, min: -1.7, max: 1.7 }, y: { display: false, min: -1.2, max: 1.2, reverse: true } },
            plugins: { legend: { display: false }, title: { display: true, text: 'Undirected Associations' }, tooltip: { callbacks: { title: items => label(nodes[items[0].dataIndex]), label: item => `Neighbors: ${nodes[item.dataIndex].degree}` } } },
        },
        plugins: [{ id: 'network-connections', afterDatasetsUpdate(chart) {
                    const center = geometry(chart);
                    chart.getDatasetMeta(0).data.forEach((element, index) => { element.x = center.x + nodes[index].x * center.size; element.y = center.y + nodes[index].y * center.size; });
                }, beforeDatasetsDraw(chart) {
                    const { ctx } = chart, center = geometry(chart);
                    ctx.save();
                    ctx.strokeStyle = '#94a3b8';
                    ctx.lineWidth = 1.5;
                    edges.forEach(edge => { ctx.beginPath(); ctx.moveTo(center.x + edge.source.x * center.size, center.y + edge.source.y * center.size); ctx.lineTo(center.x + edge.target.x * center.size, center.y + edge.target.y * center.size); ctx.stroke(); });
                    ctx.restore();
                }, afterDatasetsDraw(chart) {
                    if (nodes.length > 20)
                        return;
                    const { ctx } = chart, center = geometry(chart);
                    ctx.save();
                    ctx.fillStyle = '#334155';
                    ctx.font = '10px sans-serif';
                    ctx.textBaseline = 'middle';
                    nodes.forEach(node => { ctx.textAlign = node.x >= 0 ? 'left' : 'right'; ctx.fillText(shortLabel(node), center.x + node.x * center.size * 1.09 + (nodes.length === 1 ? 12 : 0), center.y + node.y * center.size * 1.09, 82); });
                    ctx.restore();
                } }],
    };
}

const chart = new Chart(document.getElementById('myChart'), createConfig(chartData));

Preview and code follow the same library selection.

npm install chart.js@4.5.1

<div style="height:320px"><canvas id="myChart"></canvas></div>