living-documentation 3.8.0 → 4.0.0

package/README.md

@@ -22,6 +22,8 @@ No cloud, no database, no build step — just point it at a folder of `.md` file
 - **Admin panel** — configure title, theme, filename pattern, and extra files in the browser
 - **Inline editing** — edit any document directly in the browser, saves to disk instantly
 - **Image paste** — paste an image from clipboard in the editor; auto-uploaded and inserted as Markdown
+- **Word Cloud** — visualise the dominant vocabulary of any folder on disk; supports `.md`, `.ts`, `.java`, `.kt`, `.py`, `.go`, `.rs`, `.cs`, `.swift`, `.rb`, `.html`, `.css`, `.yml`, `.json` and more; stop words filtered per language
+- **Diagram editor** — built-in canvas diagram editor (vis-network); deep-link to any diagram with `?id=`
 - **Zero frontend build** — Tailwind and highlight.js loaded from CDN
 
 ---

package/dist/src/frontend/diagram/clipboard.js

@@ -45,9 +45,17 @@ export async function copySelectionAsPng() {
   const cropW = Math.ceil(br.x - tl.x + PAD * 2);
   const cropH = Math.ceil(br.y - tl.y + PAD * 2);
 
+  // Temporarily deselect everything so orange highlights don't appear in the PNG
+  const savedNodeIds = [...st.selectedNodeIds];
+  st.network.unselectAll();
+  st.network.redraw();
+
   // Grab vis-network's canvas element
   const visCanvas = document.querySelector('#vis-canvas canvas');
-  if (!visCanvas) return;
+  if (!visCanvas) {
+    st.network.selectNodes(savedNodeIds);
+    return;
+  }
 
   // Crop into an offscreen canvas
   const out = document.createElement('canvas');
@@ -71,6 +79,8 @@ export async function copySelectionAsPng() {
     showToast('PNG copié dans le presse-papier');
   } catch {
     showToast('Impossible de copier l\'image', 'error');
+  } finally {
+    st.network.selectNodes(savedNodeIds);
   }
 }
 

package/dist/src/frontend/diagram/groups.js

@@ -0,0 +1,99 @@
+// ── Group management ──────────────────────────────────────────────────────────
+
+import { st, markDirty } from './state.js';
+import { SHAPE_DEFAULTS } from './node-rendering.js';
+
+// ── Create / destroy ──────────────────────────────────────────────────────────
+
+export function groupNodes() {
+  if (st.selectedNodeIds.length < 2) return;
+  const groupId = 'g' + Date.now();
+  st.selectedNodeIds.forEach((id) => st.nodes.update({ id, groupId }));
+  markDirty();
+}
+
+export function ungroupNodes() {
+  if (!st.selectedNodeIds.length) return;
+  // Collect all members of any group touched by the selection
+  const groupIds = new Set(
+    st.selectedNodeIds.map((id) => { const n = st.nodes.get(id); return n && n.groupId; }).filter(Boolean)
+  );
+  st.nodes.get().forEach((n) => {
+    if (n.groupId && groupIds.has(n.groupId)) st.nodes.update({ id: n.id, groupId: null });
+  });
+  markDirty();
+}
+
+// ── Selection expansion ───────────────────────────────────────────────────────
+// Called from onSelectNode — expands selection to all group members.
+
+export function expandSelectionToGroup(nodeIds) {
+  const groupIds = new Set();
+  nodeIds.forEach((id) => {
+    const n = st.nodes.get(id);
+    if (n && n.groupId) groupIds.add(n.groupId);
+  });
+  if (!groupIds.size) return nodeIds;
+
+  const expanded = new Set(nodeIds);
+  st.nodes.get().forEach((n) => {
+    if (n.groupId && groupIds.has(n.groupId)) expanded.add(n.id);
+  });
+  return [...expanded];
+}
+
+// ── Group outline (drawn on canvas in afterDrawing) ───────────────────────────
+
+function nodeBounds(id) {
+  const n        = st.nodes.get(id);
+  const bodyNode = st.network.body.nodes[id];
+  if (!bodyNode) return null;
+  const shape    = (n && n.shapeType) || 'box';
+  const defaults = SHAPE_DEFAULTS[shape] || [100, 40];
+  const W   = (n && n.nodeWidth)  || defaults[0];
+  const H   = (n && n.nodeHeight) || defaults[1];
+  const rot = (n && n.rotation)   || 0;
+  const cx = bodyNode.x, cy = bodyNode.y;
+  if (rot === 0) {
+    return { minX: cx - W / 2, minY: cy - H / 2, maxX: cx + W / 2, maxY: cy + H / 2 };
+  }
+  const cos = Math.abs(Math.cos(rot)); const sin = Math.abs(Math.sin(rot));
+  const hw = (W * cos + H * sin) / 2;
+  const hh = (W * sin + H * cos) / 2;
+  return { minX: cx - hw, minY: cy - hh, maxX: cx + hw, maxY: cy + hh };
+}
+
+export function drawGroupOutlines(ctx) {
+  if (!st.network || !st.selectedNodeIds.length) return;
+
+  // Find groupIds that have at least one selected member
+  const selectedSet = new Set(st.selectedNodeIds);
+  const activeGroups = new Set();
+  st.selectedNodeIds.forEach((id) => {
+    const n = st.nodes.get(id);
+    if (n && n.groupId) activeGroups.add(n.groupId);
+  });
+  if (!activeGroups.size) return;
+
+  // For each active group, compute bounding box over ALL members
+  activeGroups.forEach((groupId) => {
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    st.nodes.get().forEach((n) => {
+      if (n.groupId !== groupId) return;
+      const b = nodeBounds(n.id);
+      if (!b) return;
+      minX = Math.min(minX, b.minX); minY = Math.min(minY, b.minY);
+      maxX = Math.max(maxX, b.maxX); maxY = Math.max(maxY, b.maxY);
+    });
+    if (minX === Infinity) return;
+
+    const PAD = 14;
+    ctx.save();
+    ctx.strokeStyle = '#6366f1';
+    ctx.lineWidth   = 1.5;
+    ctx.setLineDash([6, 4]);
+    ctx.strokeRect(minX - PAD, minY - PAD, maxX - minX + PAD * 2, maxY - minY + PAD * 2);
+    ctx.setLineDash([]);
+    ctx.restore();
+  });
+}

package/dist/src/frontend/diagram/link-panel.js

@@ -0,0 +1,138 @@
+// ── Node link panel ───────────────────────────────────────────────────────────
+// Lets the user attach a URL or diagram link to a node.
+
+import { st, markDirty } from './state.js';
+import { openDiagram }   from './persistence.js';
+import { showToast }     from './toast.js';
+
+let _panelNodeId = null;
+
+export function showLinkPanel(nodeId) {
+  _panelNodeId = nodeId;
+  const n    = st.nodes.get(nodeId);
+  const link = (n && n.nodeLink) || null;
+
+  const panel = document.getElementById('linkPanel');
+  panel.classList.remove('hidden');
+
+  // Populate form from existing link
+  const typeUrl      = document.getElementById('linkTypeUrl');
+  const typeDiagram  = document.getElementById('linkTypeDiagram');
+  const typeNew      = document.getElementById('linkTypeNew');
+  const urlInput     = document.getElementById('linkUrlInput');
+  const diagSelect   = document.getElementById('linkDiagramSelect');
+  const newNameInput = document.getElementById('linkNewName');
+
+  // Populate diagram list
+  diagSelect.innerHTML = '';
+  st.diagrams.forEach((d) => {
+    if (d.id === st.currentDiagramId) return; // skip current
+    const opt = document.createElement('option');
+    opt.value       = d.id;
+    opt.textContent = d.title;
+    diagSelect.appendChild(opt);
+  });
+
+  if (link && link.type === 'url') {
+    typeUrl.checked    = true;
+    urlInput.value     = link.value;
+    newNameInput.value = '';
+  } else if (link && link.type === 'diagram') {
+    typeDiagram.checked = true;
+    diagSelect.value    = link.value;
+    urlInput.value      = '';
+    newNameInput.value  = '';
+  } else {
+    typeUrl.checked = true;
+    urlInput.value  = '';
+    newNameInput.value = '';
+  }
+
+  _syncLinkPanelVisibility();
+}
+
+export function hideLinkPanel() {
+  document.getElementById('linkPanel').classList.add('hidden');
+  _panelNodeId = null;
+}
+
+function _syncLinkPanelVisibility() {
+  const typeUrl     = document.getElementById('linkTypeUrl').checked;
+  const typeDiagram = document.getElementById('linkTypeDiagram').checked;
+  const typeNew     = document.getElementById('linkTypeNew').checked;
+  document.getElementById('linkUrlRow').classList.toggle('hidden', !typeUrl);
+  document.getElementById('linkDiagramRow').classList.toggle('hidden', !typeDiagram);
+  document.getElementById('linkNewRow').classList.toggle('hidden', !typeNew);
+}
+
+export function saveLinkPanel() {
+  if (_panelNodeId === null) return;
+  const typeUrl     = document.getElementById('linkTypeUrl').checked;
+  const typeDiagram = document.getElementById('linkTypeDiagram').checked;
+  const typeNew     = document.getElementById('linkTypeNew').checked;
+
+  if (typeUrl) {
+    const value = document.getElementById('linkUrlInput').value.trim();
+    st.nodes.update({ id: _panelNodeId, nodeLink: value ? { type: 'url', value } : null });
+    markDirty();
+    hideLinkPanel();
+  } else if (typeDiagram) {
+    const value = document.getElementById('linkDiagramSelect').value;
+    if (!value) return;
+    st.nodes.update({ id: _panelNodeId, nodeLink: { type: 'diagram', value } });
+    markDirty();
+    hideLinkPanel();
+  } else if (typeNew) {
+    const name = document.getElementById('linkNewName').value.trim();
+    if (!name) return;
+    _createAndLinkDiagram(name);
+  }
+}
+
+async function _createAndLinkDiagram(title) {
+  const id = 'd' + Date.now();
+  await fetch(`/api/diagrams/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ title, nodes: [], edges: [] }),
+  });
+  const res   = await fetch('/api/diagrams');
+  st.diagrams = await res.json();
+  st.nodes.update({ id: _panelNodeId, nodeLink: { type: 'diagram', value: id } });
+  markDirty();
+  hideLinkPanel();
+  showToast(`Diagramme "${title}" créé et lié`);
+}
+
+export function removeLinkPanel() {
+  if (_panelNodeId === null) return;
+  st.nodes.update({ id: _panelNodeId, nodeLink: null });
+  markDirty();
+  hideLinkPanel();
+}
+
+// ── Navigation ────────────────────────────────────────────────────────────────
+// Called on click (not drag). Returns true if navigation happened.
+
+export function navigateNodeLink(nodeId) {
+  const n    = st.nodes.get(nodeId);
+  const link = n && n.nodeLink;
+  if (!link) return false;
+  if (link.type === 'url') {
+    window.open(link.value, '_blank', 'noopener');
+    return true;
+  }
+  if (link.type === 'diagram') {
+    openDiagram(link.value);
+    return true;
+  }
+  return false;
+}
+
+// ── Wire radio buttons ────────────────────────────────────────────────────────
+['linkTypeUrl', 'linkTypeDiagram', 'linkTypeNew'].forEach((id) => {
+  document.getElementById(id).addEventListener('change', _syncLinkPanelVisibility);
+});
+document.getElementById('btnLinkSave').addEventListener('click',   saveLinkPanel);
+document.getElementById('btnLinkRemove').addEventListener('click', removeLinkPanel);
+document.getElementById('btnLinkCancel').addEventListener('click', hideLinkPanel);

package/dist/src/frontend/diagram/main.js

@@ -4,6 +4,8 @@
 import { st, markDirty }      from './state.js';
 import { TOOL_BTN_MAP }       from './constants.js';
 import { showNodePanel, hideNodePanel, setNodeColor, changeNodeFontSize, setTextAlign, setTextValign, changeZOrder, activateStamp, cancelStamp, stepRotate } from './node-panel.js';
+import { groupNodes, ungroupNodes } from './groups.js';
+import { showLinkPanel, hideLinkPanel } from './link-panel.js';
 import { hideEdgePanel, setEdgeArrow, setEdgeDashes, changeEdgeFontSize } from './edge-panel.js';
 import { startLabelEdit, startEdgeLabelEdit, hideLabelInput } from './label-editor.js';
 import { hideSelectionOverlay } from './selection-overlay.js';
@@ -108,6 +110,9 @@ document.getElementById('nodePanel').addEventListener('click', (e) => {
   if (colorBtn) setNodeColor(colorBtn.dataset.color);
 });
 document.getElementById('btnNodeLabelEdit').addEventListener('click', startLabelEdit);
+document.getElementById('btnNodeLink').addEventListener('click', () => {
+  if (st.selectedNodeIds.length === 1) showLinkPanel(st.selectedNodeIds[0]);
+});
 document.getElementById('btnNodeFontDecrease').addEventListener('click', () => changeNodeFontSize(-1));
 document.getElementById('btnNodeFontIncrease').addEventListener('click', () => changeNodeFontSize(1));
 document.getElementById('btnAlignLeft').addEventListener('click',   () => setTextAlign('left'));
@@ -131,6 +136,8 @@ document.getElementById('btnRotateCCW').addEventListener('click',   () => stepRo
 document.getElementById('btnStampColor').addEventListener('click',    () => activateStamp('color'));
 document.getElementById('btnStampFontSize').addEventListener('click', () => activateStamp('fontSize'));
 document.getElementById('btnCopyPng').addEventListener('click', () => copySelectionAsPng());
+document.getElementById('btnGroup').addEventListener('click',   () => groupNodes());
+document.getElementById('btnUngroup').addEventListener('click', () => ungroupNodes());
 
 // ── Edge panel wiring ─────────────────────────────────────────────────────────
 
@@ -153,7 +160,7 @@ document.addEventListener('keydown', (e) => {
   if ((e.metaKey || e.ctrlKey) && e.key === 'c')               { e.preventDefault(); copySelected();       return; }
   if ((e.metaKey || e.ctrlKey) && e.key === 'v')             { e.preventDefault(); pasteClipboard();  return; }
   if ((e.metaKey || e.ctrlKey) && e.key === 's')             { e.preventDefault(); saveDiagram();     return; }
-  if (e.key === 'Escape' || e.key === 's' || e.key === 'S')  { cancelStamp(); setTool('select'); return; }
+  if (e.key === 'Escape' || e.key === 's' || e.key === 'S')  { cancelStamp(); hideLinkPanel(); setTool('select'); return; }
   if (e.key === 'r' || e.key === 'R')  { setTool('addNode', 'box');      return; }
   if (e.key === 'e' || e.key === 'E')  { setTool('addNode', 'ellipse');  return; }
   if (e.key === 'd' || e.key === 'D')  { setTool('addNode', 'database'); return; }

package/dist/src/frontend/diagram/network.js

@@ -14,6 +14,8 @@ import { updateSelectionOverlay, hideSelectionOverlay } from './selection-overla
 import { drawGrid, onDragEnd } from './grid.js';
 import { drawDebugOverlay }    from './debug.js';
 import { updateZoomDisplay }   from './zoom.js';
+import { expandSelectionToGroup, drawGroupOutlines } from './groups.js';
+import { navigateNodeLink, hideLinkPanel }           from './link-panel.js';
 
 export function initNetwork(savedNodes, savedEdges) {
   const container = document.getElementById('vis-canvas');
@@ -65,26 +67,49 @@ export function initNetwork(savedNodes, savedEdges) {
   st.canonicalOrder = [...st.network.body.nodeIndices];
   st.network.renderer._drawNodes = function (ctx, alwaysShow = false) {
     const bodyNodes = this.body.nodes;
+    const bodyEdges = this.body.edges;
     const margin    = 20;
     const topLeft     = this.canvas.DOMtoCanvas({ x: -margin, y: -margin });
     const bottomRight = this.canvas.DOMtoCanvas({ x: this.canvas.frame.canvas.clientWidth + margin, y: this.canvas.frame.canvas.clientHeight + margin });
     const viewableArea = { top: topLeft.y, left: topLeft.x, bottom: bottomRight.y, right: bottomRight.x };
-    const drawExternalLabelCallbacks = [];
 
-    for (const id of st.canonicalOrder) {
+    // Build a map: canonical index → list of edges whose topmost endpoint is at that index.
+    const orderMap = new Map();
+    st.canonicalOrder.forEach((id, i) => orderMap.set(id, i));
+
+    const edgesByLevel = new Map(); // canonicalIndex → edge[]
+    for (const edgeId of Object.keys(bodyEdges)) {
+      const edge = bodyEdges[edgeId];
+      if (!edge.connected) continue;
+      const level = Math.min(orderMap.get(edge.fromId) ?? 0, orderMap.get(edge.toId) ?? 0);
+      if (!edgesByLevel.has(level)) edgesByLevel.set(level, []);
+      edgesByLevel.get(level).push(edge);
+    }
+
+    for (let i = 0; i < st.canonicalOrder.length; i++) {
+      const id   = st.canonicalOrder[i];
+      // Draw edges whose topmost node is at this level, before drawing the node.
+      const edges = edgesByLevel.get(i);
+      if (edges) edges.forEach((e) => e.draw(ctx));
+
       const node = bodyNodes[id];
       if (!node) continue;
       if (alwaysShow === true || node.isBoundingBoxOverlappingWith(viewableArea) === true) {
-        const r = node.draw(ctx);
-        // All shapes are ctxRenderer (shape:'custom') and draw their own labels.
-        // Skip drawExternalLabel entirely to avoid double-rendering.
+        node.draw(ctx);
       } else {
         node.updateBoundingBox(ctx, node.selected);
       }
     }
-    return { drawExternalLabels() { for (const draw of drawExternalLabelCallbacks) draw(); } };
+    return { drawExternalLabels() {} };
   };
 
+  // ── Z-order patch for edges ────────────────────────────────────────────────
+  // vis.js draws all edges before all nodes in separate passes.
+  // We neutralise _drawEdges (make it a no-op) and instead draw each edge
+  // inside _drawNodes, just before the node whose canonical index equals the
+  // max index of its two endpoints. This guarantees true z-order interleaving.
+  st.network.renderer._drawEdges = function () { /* no-op — edges drawn in _drawNodes */ };
+
   // Keep canonicalOrder in sync with DataSet add/remove events
   st.nodes.on('add', (_, { items }) => {
     const existing = new Set(st.canonicalOrder);
@@ -95,7 +120,9 @@ export function initNetwork(savedNodes, savedEdges) {
     st.canonicalOrder = st.canonicalOrder.filter((id) => !removed.has(id));
   });
 
+  st.network.on('click',        onClickNode);
   st.network.on('doubleClick',  onDoubleClick);
+  st.network.on('dragStart',    onDragStart);
   st.network.on('selectNode',   onSelectNode);
   st.network.on('deselectNode', onDeselectAll);
   st.network.on('selectEdge',   onSelectEdge);
@@ -104,6 +131,7 @@ export function initNetwork(savedNodes, savedEdges) {
   st.network.on('dragEnd',      onDragEnd);
   st.network.on('beforeDrawing', drawGrid);
   st.network.on('afterDrawing',  updateSelectionOverlay);
+  st.network.on('afterDrawing',  (ctx) => drawGroupOutlines(ctx));
   st.network.on('afterDrawing',  () => drawDebugOverlay());
 
   document.getElementById('emptyState').classList.add('hidden');
@@ -186,8 +214,35 @@ export function createImageNode(imageSrc, canvasX, canvasY) {
   }, 50);
 }
 
+function onClickNode(params) {
+  if (params.nodes.length === 1 && params.event.srcEvent.shiftKey) {
+    navigateNodeLink(params.nodes[0]);
+  }
+}
+
+// Expand group selection at dragStart so vis-network moves all members together.
+// dragStart fires before the move, unlike selectNode which fires after mouseup.
+function onDragStart(params) {
+  if (!params.nodes.length) return;
+  const expanded = expandSelectionToGroup(params.nodes);
+  if (expanded.length > params.nodes.length) {
+    st.network.selectNodes(expanded);
+    st.selectedNodeIds = expanded;
+  }
+}
+
+let _expandingGroup = false;
 function onSelectNode(params) {
-  st.selectedNodeIds = params.nodes;
+  if (_expandingGroup) return;
+  const expanded = expandSelectionToGroup(params.nodes);
+  if (expanded.length > params.nodes.length) {
+    _expandingGroup = true;
+    st.network.selectNodes(expanded);
+    _expandingGroup = false;
+    st.selectedNodeIds = expanded;
+  } else {
+    st.selectedNodeIds = params.nodes;
+  }
   st.selectedEdgeIds = [];
   hideEdgePanel();
   showNodePanel();
@@ -202,6 +257,7 @@ function onSelectEdge(params) {
 }
 
 function onDeselectAll() {
+  hideLinkPanel();
   st.selectedNodeIds = [];
   st.selectedEdgeIds = [];
   hideNodePanel();

package/dist/src/frontend/diagram/node-rendering.js

@@ -7,6 +7,31 @@
 import { NODE_COLORS } from './constants.js';
 import { st } from './state.js';
 
+// ── Link indicator ────────────────────────────────────────────────────────────
+// Small chain icon drawn at bottom-right of any node that has a nodeLink.
+function drawLinkIndicator(ctx, id, W, H) {
+  const n = st.nodes && st.nodes.get(id);
+  if (!n || !n.nodeLink) return;
+  const r = 7;
+  const bx = W / 2 - r;
+  const by = H / 2 - r;
+  ctx.save();
+  ctx.fillStyle   = n.nodeLink.type === 'url' ? '#3b82f6' : '#f97316';
+  ctx.strokeStyle = '#fff';
+  ctx.lineWidth   = 1;
+  ctx.beginPath(); ctx.arc(bx, by, r, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
+  ctx.strokeStyle = '#fff';
+  ctx.lineWidth   = 1.2;
+  ctx.lineCap     = 'round';
+  // Tiny link icon inside the badge
+  ctx.beginPath();
+  ctx.moveTo(bx - 1.5, by + 1.5); ctx.lineTo(bx + 1.5, by - 1.5);
+  ctx.moveTo(bx - 2.5, by - 0.5); ctx.lineTo(bx - 0.5, by - 2.5);
+  ctx.moveTo(bx + 0.5, by + 2.5); ctx.lineTo(bx + 2.5, by + 0.5);
+  ctx.stroke();
+  ctx.restore();
+}
+
 // ── Drawing helpers ───────────────────────────────────────────────────────────
 
 // Draw multi-line label centred at (0,0) in the current (possibly rotated) ctx.
@@ -91,6 +116,7 @@ export function makeBoxRenderer(colorKey) {
         roundRect(ctx, -W / 2, -H / 2, W, H, 4);
         ctx.fill(); ctx.stroke();
         drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, H, labelRotation);
+        drawLinkIndicator(ctx, id, W, H);
         ctx.restore();
       },
       nodeDimensions: { width: W, height: H },
@@ -110,6 +136,7 @@ export function makeEllipseRenderer(colorKey) {
         ctx.beginPath(); ctx.ellipse(0, 0, W / 2, H / 2, 0, 0, Math.PI * 2);
         ctx.fill(); ctx.stroke();
         drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, H, labelRotation);
+        drawLinkIndicator(ctx, id, W, H);
         ctx.restore();
       },
       nodeDimensions: { width: W, height: H },
@@ -130,6 +157,7 @@ export function makeCircleRenderer(colorKey) {
         ctx.beginPath(); ctx.arc(0, 0, R, 0, Math.PI * 2);
         ctx.fill(); ctx.stroke();
         drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, W, labelRotation);
+        drawLinkIndicator(ctx, id, W, W);
         ctx.restore();
       },
       nodeDimensions: { width: W, height: W },
@@ -160,6 +188,7 @@ export function makeDatabaseRenderer(colorKey) {
         ctx.beginPath(); ctx.ellipse(0, bodyTop, rx, ry, 0, 0, Math.PI * 2);
         ctx.fill(); ctx.stroke();
         drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, H, labelRotation);
+        drawLinkIndicator(ctx, id, W, H);
         ctx.restore();
       },
       nodeDimensions: { width: W, height: H },
@@ -201,6 +230,7 @@ export function makePostItRenderer(colorKey) {
         ctx.lineTo(W / 2,        -H / 2 + fold);
         ctx.stroke();
         drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, H, labelRotation);
+        drawLinkIndicator(ctx, id, W, H);
         ctx.restore();
       },
       nodeDimensions: { width: W, height: H },
@@ -224,6 +254,7 @@ export function makeTextFreeRenderer(colorKey) {
           ctx.setLineDash([]);
         }
         drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, H, labelRotation);
+        drawLinkIndicator(ctx, id, W, H);
         ctx.restore();
       },
       nodeDimensions: { width: W, height: H },
@@ -266,6 +297,7 @@ export function makeActorRenderer(colorKey) {
           lines.forEach((line, i) => ctx.fillText(line, 0, startY + i * lineH));
           ctx.restore();
         }
+        drawLinkIndicator(ctx, id, W, H);
         ctx.restore();
       },
       nodeDimensions: { width: W, height: H },
@@ -326,7 +358,42 @@ export function makeImageRenderer(colorKey) {
           ctx.fillText(src ? '…' : '🖼', 0, 0);
         }
 
-        if (label) drawLabel(ctx, label, fontSize, c.font, textAlign, textValign, W, H, labelRotation);
+        if (label) {
+          const lines  = String(label).split('\n');
+          const lineH  = fontSize * 1.3;
+          const pad    = 6;
+          const stripH = lines.length * lineH + pad * 2 - (lineH - fontSize);
+          ctx.save();
+          ctx.font = `${fontSize}px system-ui,-apple-system,sans-serif`;
+          const maxTextW = Math.max(...lines.map((l) => ctx.measureText(l).width));
+          const stripW   = maxTextW + pad * 2;
+          const M = 5; // margin from image edge
+          // Horizontal position based on textAlign
+          let stripX;
+          if (textAlign === 'left')       stripX = -W / 2 + M;
+          else if (textAlign === 'right') stripX = W / 2 - stripW - M;
+          else                            stripX = -stripW / 2;
+          // Vertical position based on textValign
+          let stripY;
+          if (textValign === 'top')         stripY = -H / 2 + M;
+          else if (textValign === 'bottom') stripY = H / 2 - stripH - M;
+          else                              stripY = -stripH / 2;
+          ctx.globalAlpha = 0.7;
+          ctx.fillStyle   = '#000';
+          roundRect(ctx, stripX, stripY, stripW, stripH, 4);
+          ctx.fill();
+          ctx.globalAlpha = 1;
+          // Draw text centered inside the box
+          if (labelRotation) ctx.rotate(labelRotation);
+          ctx.fillStyle    = '#fff';
+          ctx.textAlign    = 'center';
+          ctx.textBaseline = 'middle';
+          const textCX = stripX + stripW / 2;
+          const startY = stripY + pad + fontSize / 2;
+          lines.forEach((line, i) => ctx.fillText(line, textCX, startY + i * lineH));
+          ctx.restore();
+        }
+        drawLinkIndicator(ctx, id, W, H);
         ctx.restore();
       },
       nodeDimensions: { width: W, height: H },

package/dist/src/frontend/diagram/persistence.js

@@ -52,7 +52,10 @@ export async function loadDiagramList() {
   const res   = await fetch('/api/diagrams');
   st.diagrams = await res.json();
   renderDiagramList();
-  if (st.diagrams.length > 0) openDiagram(st.diagrams[0].id);
+  if (!st.diagrams.length) return;
+  const urlId  = new URLSearchParams(window.location.search).get('id');
+  const target = urlId && st.diagrams.find((d) => d.id === urlId) ? urlId : st.diagrams[0].id;
+  openDiagram(target);
 }
 
 export async function openDiagram(id) {
@@ -117,6 +120,8 @@ export async function saveDiagram() {
       fontSize: n.fontSize || null, textAlign: n.textAlign || null, textValign: n.textValign || null,
       rotation: n.rotation || 0, labelRotation: n.labelRotation || 0,
       imageSrc: n.imageSrc || null,
+      groupId: n.groupId || null,
+      nodeLink: n.nodeLink || null,
       x: positions[n.id]?.x ?? n.x, y: positions[n.id]?.y ?? n.y,
     }));