Konva Interactive Node Graph — Live-Updating Canvas Diagram Snippet

<div class="kng-stage">
  <div class="kng-head">
    <span class="kng-tag">Konva · live edges</span>
    <h2>Interactive Node Graph</h2>
    <p>Drag any node — every connected line updates its endpoint live.</p>
  </div>
  <div id="kngContainer" class="kng-container"></div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:radial-gradient(120% 100% at 50% 0%,#161d38,#080a14);color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.kng-stage{width:min(640px,94vw);display:flex;flex-direction:column;align-items:center;gap:16px}
.kng-head{text-align:center}
.kng-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#60a5fa;background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.3);padding:5px 12px;border-radius:99px;margin-bottom:12px}
.kng-head h2{font-size:clamp(24px,5vw,34px);font-weight:800;letter-spacing:-.02em}
.kng-head p{font-size:13.5px;color:#8e97b8;margin-top:7px}

.kng-container{width:100%;aspect-ratio:8/5;border-radius:18px;overflow:hidden;background:#0c1024;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px -24px rgba(0,0,0,.8)}

var container = document.getElementById('kngContainer');
var width = container.clientWidth || 600;
var height = container.clientHeight || 375;

var stage = new Konva.Stage({ container: 'kngContainer', width: width, height: height });
var edgeLayer = new Konva.Layer();
var nodeLayer = new Konva.Layer();
stage.add(edgeLayer);
stage.add(nodeLayer);

var NODES = [
  { id: 'api', label: 'API', x: width * 0.18, y: height * 0.28, color: '#60a5fa' },
  { id: 'auth', label: 'Auth', x: width * 0.5, y: height * 0.16, color: '#34d399' },
  { id: 'db', label: 'DB', x: width * 0.5, y: height * 0.55, color: '#f472b6' },
  { id: 'cache', label: 'Cache', x: width * 0.82, y: height * 0.28, color: '#fbbf24' },
  { id: 'worker', label: 'Worker', x: width * 0.3, y: height * 0.78, color: '#a78bfa' },
  { id: 'queue', label: 'Queue', x: width * 0.68, y: height * 0.78, color: '#38bdf8' }
];

var EDGES = [
  ['api', 'auth'], ['api', 'db'], ['api', 'cache'],
  ['db', 'worker'], ['worker', 'queue'], ['queue', 'db'], ['auth', 'db']
];

// Konva keeps shapes as persistent, addressable objects (the "retained
// mode" model) rather than pixels on a canvas, so each node's Konva.Circle
// can be looked up by id and its live x/y read directly \u2014 no need to
// track positions in a parallel data structure or redraw the whole scene.
var nodesById = {};
NODES.forEach(function (n) {
  var group = new Konva.Group({ x: n.x, y: n.y, draggable: true });

  var circle = new Konva.Circle({
    radius: 26,
    fill: n.color,
    stroke: 'rgba(255,255,255,0.35)',
    strokeWidth: 2,
    shadowColor: 'black',
    shadowBlur: 12,
    shadowOpacity: 0.45
  });

  var label = new Konva.Text({
    text: n.label,
    fontSize: 12,
    fontStyle: '700',
    fontFamily: 'system-ui, sans-serif',
    fill: '#0b0f22',
    width: 60,
    align: 'center',
    x: -30,
    y: -6
  });

  group.add(circle);
  group.add(label);
  nodeLayer.add(group);
  nodesById[n.id] = group;
});

var edgeLines = EDGES.map(function (pair) {
  var a = nodesById[pair[0]];
  var b = nodesById[pair[1]];
  var line = new Konva.Line({
    points: [a.x(), a.y(), b.x(), b.y()],
    stroke: 'rgba(148,163,184,0.5)',
    strokeWidth: 2
  });
  edgeLayer.add(line);
  return { line: line, from: a, to: b };
});

function updateEdgesFor(node) {
  edgeLines.forEach(function (e) {
    if (e.from === node || e.to === node) {
      e.line.points([e.from.x(), e.from.y(), e.to.x(), e.to.y()]);
    }
  });
}

NODES.forEach(function (n) {
  var group = nodesById[n.id];

  // dragmove fires continuously while the pointer moves, so recomputing
  // just this node's connected edges here \u2014 not the whole graph \u2014
  // is what keeps the drag responsive even as the graph grows.
  group.on('dragmove', function () {
    updateEdgesFor(group);
    edgeLayer.batchDraw();
  });

  group.on('dragstart', function () {
    group.moveToTop();
    nodeLayer.batchDraw();
  });

  group.on('mouseenter', function () { stage.container().style.cursor = 'grab'; });
  group.on('mousedown', function () { stage.container().style.cursor = 'grabbing'; });
  group.on('dragend', function () { stage.container().style.cursor = 'grab'; });
});

edgeLayer.draw();
nodeLayer.draw();