@diagrammo/dgmo 0.8.21 → 0.8.22

package/gallery/fixtures/tech-radar-dense.dgmo

@@ -0,0 +1,77 @@
+tech-radar Dense Radar Stress Test
+
+rings
+  Adopt
+  Trial
+  Assess
+  Hold
+
+Techniques | quadrant: top-right
+  CI/CD | ring: Adopt, trend: stable
+  IaC | ring: Adopt, trend: stable
+  Microservices | ring: Adopt, trend: stable
+  Event Sourcing | ring: Trial, trend: up
+  CQRS | ring: Trial, trend: up
+  Feature Flags | ring: Adopt, trend: new
+  Chaos Engineering | ring: Assess, trend: new
+  Trunk-Based Dev | ring: Trial, trend: up
+  Contract Testing | ring: Trial, trend: new
+  Design Tokens | ring: Assess, trend: new
+  Micro Frontends | ring: Assess, trend: up
+  Server Components | ring: Trial, trend: new
+  Edge Functions | ring: Trial, trend: up
+  Zero Trust | ring: Adopt, trend: stable
+  Observability | ring: Adopt, trend: stable
+  Platform Engineering | ring: Trial, trend: new
+
+Tools | quadrant: top-left
+  GitHub Copilot | ring: Trial, trend: new
+  Vite | ring: Adopt, trend: up
+  Playwright | ring: Adopt, trend: stable
+  Turborepo | ring: Trial, trend: new
+  Docker | ring: Adopt, trend: stable
+  Grafana | ring: Adopt, trend: stable
+  Datadog | ring: Trial, trend: up
+  Webpack | ring: Hold, trend: down
+  Storybook | ring: Adopt, trend: stable
+  Figma | ring: Adopt, trend: stable
+  Linear | ring: Trial, trend: new
+  Pulumi | ring: Assess, trend: new
+  Tailscale | ring: Trial, trend: up
+  Renovate | ring: Adopt, trend: stable
+  Bruno | ring: Assess, trend: new
+  Cursor | ring: Trial, trend: new
+
+Platforms | quadrant: bottom-left
+  Kubernetes | ring: Adopt, trend: stable
+  Cloudflare Workers | ring: Trial, trend: up
+  AWS Lambda | ring: Hold, trend: down
+  Vercel | ring: Trial, trend: up
+  Fly.io | ring: Assess, trend: new
+  Neon | ring: Trial, trend: new
+  PlanetScale | ring: Hold, trend: down
+  Supabase | ring: Assess, trend: up
+  Upstash | ring: Trial, trend: new
+  Railway | ring: Assess, trend: new
+  Deno Deploy | ring: Assess, trend: new
+  Google Cloud Run | ring: Adopt, trend: stable
+  Azure AKS | ring: Trial, trend: up
+  Hetzner | ring: Assess, trend: new
+  Tigris | ring: Assess, trend: new
+
+Languages & Frameworks | quadrant: bottom-right
+  TypeScript | ring: Adopt, trend: stable
+  Rust | ring: Assess, trend: new
+  React | ring: Adopt, trend: stable
+  Go | ring: Adopt, trend: stable
+  Python | ring: Adopt, trend: stable
+  Svelte | ring: Assess, trend: up
+  Solid | ring: Assess, trend: new
+  Zig | ring: Hold, trend: stable
+  Kotlin | ring: Trial, trend: up
+  Swift | ring: Adopt, trend: stable
+  Astro | ring: Trial, trend: new
+  HTMX | ring: Assess, trend: new
+  Effect-TS | ring: Assess, trend: new
+  Bun | ring: Trial, trend: up
+  Deno | ring: Assess, trend: up

package/gallery/fixtures/tech-radar.dgmo

@@ -0,0 +1,36 @@
+tech-radar Engineering Tech Radar Q2 2026
+
+rings
+  Adopt
+  Trial
+  Assess
+  Hold
+
+Techniques | quadrant: top-right
+  Continuous Deployment | ring: Adopt, trend: stable
+    Fully adopted across all services.
+  Infrastructure as Code | ring: Adopt, trend: stable
+  Micro Frontends | ring: Trial, trend: up
+    Exploring for the portal project.
+  Trunk-Based Development | ring: Assess, trend: new
+
+Tools | quadrant: top-left
+  GitHub Copilot | ring: Trial, trend: new
+    Evaluating for developer productivity.
+  Vite | ring: Adopt, trend: up
+  Webpack | ring: Hold, trend: down
+    Migrating to Vite across all projects.
+  Playwright | ring: Adopt, trend: stable
+  Turborepo | ring: Trial, trend: new
+
+Platforms | quadrant: bottom-left
+  Kubernetes | ring: Adopt, trend: stable
+  Cloudflare Workers | ring: Trial, trend: up
+  AWS Lambda | ring: Hold, trend: down
+    Consolidating onto Kubernetes.
+
+Languages & Frameworks | quadrant: bottom-right
+  TypeScript | ring: Adopt, trend: stable
+  Rust | ring: Assess, trend: new
+    Evaluating for performance-critical services.
+  React | ring: Adopt, trend: stable

package/gallery/fixtures/timeline.dgmo

@@ -1,7 +1,7 @@
 timeline Product Roadmap 2024-2025
 sort tag:Team
 
-tag Team alias t
+tag Team t
   Engineering(blue)
   Design(purple)
   Product(green)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.8.21",
+  "version": "0.8.22",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",

package/src/boxes-and-lines/layout.ts

@@ -87,13 +87,125 @@ export interface BLLayoutResult {
 
 // ── Node sizing ────────────────────────────────────────────
 
-function computeNodeSize(_node: BLNode): { width: number; height: number } {
-  // Golden ratio (φ ≈ 1.618), uniform size
-  const PHI = 1.618;
-  const NODE_HEIGHT = 60;
-  const NODE_WIDTH = Math.round(NODE_HEIGHT * PHI); // ≈ 97
+const PHI = 1.618;
+const NODE_HEIGHT = 60;
+const NODE_WIDTH = Math.round(NODE_HEIGHT * PHI); // ≈ 97
+const DESC_NODE_WIDTH = 140; // wider nodes when descriptions are shown
+const DESC_FONT_SIZE = 10; // matches infra META_FONT_SIZE
+const DESC_LINE_HEIGHT = 1.4; // 14px row height at 10px (matches infra META_LINE_HEIGHT)
+const DESC_PADDING = 8;
+const SEPARATOR_GAP = 4; // matches infra NODE_SEPARATOR_GAP
+const MAX_DESC_LINES = 6;
+const MAX_LABEL_LINES = 3;
+const LABEL_LINE_HEIGHT = 1.3;
+const LABEL_PAD = 12; // top + bottom padding around label area
+
+/** Split on camelCase boundaries */
+function splitCamelCase(word: string): string[] {
+  const parts: string[] = [];
+  let start = 0;
+  for (let i = 1; i < word.length; i++) {
+    const prev = word[i - 1];
+    const curr = word[i];
+    const next = i + 1 < word.length ? word[i + 1] : '';
+    const lowerToUpper =
+      prev >= 'a' && prev <= 'z' && curr >= 'A' && curr <= 'Z';
+    const upperRunEnd =
+      prev >= 'A' &&
+      prev <= 'Z' &&
+      curr >= 'A' &&
+      curr <= 'Z' &&
+      next >= 'a' &&
+      next <= 'z';
+    if (lowerToUpper || upperRunEnd) {
+      parts.push(word.slice(start, i));
+      start = i;
+    }
+  }
+  parts.push(word.slice(start));
+  return parts.length > 1 ? parts : [word];
+}
 
-  return { width: NODE_WIDTH, height: NODE_HEIGHT };
+/** Estimate how many lines a label needs (split on spaces/dashes/camelCase, font shrink 13→9) */
+function estimateLabelLines(label: string, nodeWidth = NODE_WIDTH): number {
+  // Split on spaces and dashes, then camelCase
+  const rawParts = label.split(/[\s-]+/);
+  const words: string[] = [];
+  for (const part of rawParts) {
+    if (!part) continue;
+    words.push(...splitCamelCase(part));
+  }
+
+  for (let fontSize = 13; fontSize >= 9; fontSize--) {
+    const charWidth = fontSize * 0.6;
+    const maxChars = Math.floor((nodeWidth - 24) / charWidth);
+    if (maxChars < 2) continue;
+
+    let lines = 1;
+    let current = '';
+    for (const word of words) {
+      const test = current ? `${current} ${word}` : word;
+      if (test.length <= maxChars) {
+        current = test;
+      } else {
+        lines++;
+        current = word;
+      }
+    }
+    if (lines <= MAX_LABEL_LINES) return Math.min(lines, MAX_LABEL_LINES);
+  }
+  return MAX_LABEL_LINES;
+}
+
+function computeNodeSize(node: BLNode): { width: number; height: number } {
+  if (!node.description || node.description.length === 0) {
+    return { width: NODE_WIDTH, height: NODE_HEIGHT };
+  }
+
+  const w = DESC_NODE_WIDTH;
+
+  // Estimate label height (up to 3 lines)
+  const labelLines = estimateLabelLines(node.label, w);
+  const labelHeight = labelLines * 13 * LABEL_LINE_HEIGHT + LABEL_PAD;
+
+  // Estimate wrapped line count using word-boundary wrapping (matches renderer)
+  const charsPerLine = Math.floor((w - 24) / (DESC_FONT_SIZE * 0.6));
+  let totalRenderedLines = 0;
+  for (const line of node.description) {
+    if (line.length <= charsPerLine) {
+      totalRenderedLines += 1;
+    } else {
+      const words = line.split(/\s+/);
+      let current = '';
+      let lineCount = 0;
+      for (const word of words) {
+        // Words wider than line get truncated with "…" in renderer (1 line)
+        const fitted =
+          word.length > charsPerLine ? word.slice(0, charsPerLine) : word;
+        const test = current ? `${current} ${fitted}` : fitted;
+        if (test.length <= charsPerLine) {
+          current = test;
+        } else {
+          if (current) lineCount++;
+          current = fitted;
+        }
+      }
+      if (current) lineCount++;
+      totalRenderedLines += lineCount;
+    }
+  }
+  totalRenderedLines = Math.min(totalRenderedLines, MAX_DESC_LINES);
+
+  const descriptionHeight =
+    totalRenderedLines * DESC_FONT_SIZE * DESC_LINE_HEIGHT;
+  const totalHeight =
+    labelHeight +
+    SEPARATOR_GAP +
+    DESC_PADDING +
+    descriptionHeight +
+    DESC_PADDING;
+
+  return { width: w, height: Math.max(NODE_HEIGHT, totalHeight) };
 }
 
 // ── Main layout ────────────────────────────────────────────
@@ -103,8 +215,10 @@ export function layoutBoxesAndLines(
   collapseInfo?: {
     collapsedChildCounts: Map<string, number>;
     originalGroups: import('./types').BLGroup[];
-  }
+  },
+  layoutOptions?: { hideDescriptions?: boolean }
 ): BLLayoutResult {
+  const hideDescriptions = layoutOptions?.hideDescriptions ?? false;
   const g = new dagre.graphlib.Graph({ compound: true, multigraph: true });
   g.setGraph({
     rankdir: parsed.direction,
@@ -137,12 +251,9 @@ export function layoutBoxesAndLines(
   }
 
   // Add collapsed groups as regular nodes — same golden-ratio dimensions
-  const PHI = 1.618;
-  const COLLAPSED_H = 60;
-  const COLLAPSED_W = Math.round(COLLAPSED_H * PHI);
   for (const label of collapsedGroupLabels) {
     const gid = `__group_${label}`;
-    g.setNode(gid, { label, width: COLLAPSED_W, height: COLLAPSED_H });
+    g.setNode(gid, { label, width: NODE_WIDTH, height: NODE_HEIGHT });
   }
 
   // Add expanded group nodes as compound parents
@@ -176,9 +287,31 @@ export function layoutBoxesAndLines(
     }
   }
 
+  // Compute node sizes — described nodes share uniform height (unless hidden)
+  const nodeSizes = new Map<string, { width: number; height: number }>();
+  let maxDescHeight = 0;
+  for (const node of parsed.nodes) {
+    const size = hideDescriptions
+      ? { width: NODE_WIDTH, height: NODE_HEIGHT }
+      : computeNodeSize(node);
+    nodeSizes.set(node.label, size);
+    if (!hideDescriptions && node.description && node.description.length > 0) {
+      maxDescHeight = Math.max(maxDescHeight, size.height);
+    }
+  }
+  // Apply uniform height to all described nodes
+  if (maxDescHeight > 0) {
+    for (const node of parsed.nodes) {
+      if (node.description && node.description.length > 0) {
+        const size = nodeSizes.get(node.label)!;
+        nodeSizes.set(node.label, { width: size.width, height: maxDescHeight });
+      }
+    }
+  }
+
   // Add nodes
   for (const node of parsed.nodes) {
-    const size = computeNodeSize(node);
+    const size = nodeSizes.get(node.label)!;
     g.setNode(node.label, {
       label: node.label,
       width: size.width,
@@ -219,8 +352,22 @@ export function layoutBoxesAndLines(
     expandedGroupIds.add(`__group_${group.label}`);
   }
 
+  // Map expanded group IDs to their first child node (for proxy edges)
+  const groupFirstChild = new Map<string, string>();
+  for (const group of parsed.groups) {
+    const gid = `__group_${group.label}`;
+    // Find first child that is a plain node (not a sub-group)
+    const firstChild = group.children.find(
+      (c) => !groupLabelSet.has(c) && g.hasNode(c)
+    );
+    if (firstChild) {
+      groupFirstChild.set(gid, firstChild);
+    }
+  }
+
   // Add edges — skip edges where either endpoint is an expanded compound parent
   const deferredEdgeIndices: number[] = [];
+  let proxyIdx = 0;
   for (let i = 0; i < parsed.edges.length; i++) {
     const edge = parsed.edges[i];
     const src = edge.source;
@@ -228,6 +375,21 @@ export function layoutBoxesAndLines(
     if (!g.hasNode(src) || !g.hasNode(tgt)) continue;
     if (expandedGroupIds.has(src) || expandedGroupIds.has(tgt)) {
       deferredEdgeIndices.push(i);
+      // Add invisible proxy edge between child nodes so dagre ranks the groups
+      const proxySrc = expandedGroupIds.has(src)
+        ? groupFirstChild.get(src)
+        : src;
+      const proxyTgt = expandedGroupIds.has(tgt)
+        ? groupFirstChild.get(tgt)
+        : tgt;
+      if (proxySrc && proxyTgt && proxySrc !== proxyTgt) {
+        g.setEdge(
+          proxySrc,
+          proxyTgt,
+          { label: '', minlen: 1 },
+          `proxy${proxyIdx++}`
+        );
+      }
       continue;
     }
     g.setEdge(src, tgt, { label: edge.label ?? '', minlen: 1 }, `e${i}`);
@@ -285,6 +447,88 @@ export function layoutBoxesAndLines(
     });
   }
 
+  // Center-align groups connected by group-to-group edges.
+  // Dagre can't rank expanded compound parents directly, and collapsed groups
+  // may also end up misaligned. Post-process to share a common center axis.
+  // Track per-group shifts so regular edge points can be adjusted too.
+  const groupAlignShifts = new Map<string, number>(); // gid → shift in alignment axis
+  {
+    // Find all group-to-group edges (both deferred and regular)
+    const groupEdges: { source: string; target: string }[] = [];
+    for (const edge of parsed.edges) {
+      if (
+        edge.source.startsWith('__group_') &&
+        edge.target.startsWith('__group_')
+      ) {
+        groupEdges.push(edge);
+      }
+    }
+
+    if (groupEdges.length > 0) {
+      // Build connected components via union-find
+      const groupParent = new Map<string, string>();
+      const find = (x: string): string => {
+        while (groupParent.has(x) && groupParent.get(x) !== x) {
+          groupParent.set(x, groupParent.get(groupParent.get(x)!)!);
+          x = groupParent.get(x)!;
+        }
+        return x;
+      };
+      const union = (a: string, b: string) => {
+        const ra = find(a),
+          rb = find(b);
+        if (ra !== rb) groupParent.set(ra, rb);
+      };
+
+      for (const edge of groupEdges) {
+        if (!groupParent.has(edge.source))
+          groupParent.set(edge.source, edge.source);
+        if (!groupParent.has(edge.target))
+          groupParent.set(edge.target, edge.target);
+        union(edge.source, edge.target);
+      }
+
+      // Group layout groups by connected component
+      const components = new Map<string, BLLayoutGroup[]>();
+      for (const lg of layoutGroups) {
+        const gid = `__group_${lg.label}`;
+        if (!groupParent.has(gid)) continue;
+        const root = find(gid);
+        if (!components.has(root)) components.set(root, []);
+        components.get(root)!.push(lg);
+      }
+
+      // For each component, align on the widest group's center
+      const axis = parsed.direction === 'TB' ? 'x' : 'y';
+      for (const groups of components.values()) {
+        if (groups.length < 2) continue;
+        const dim = axis === 'x' ? 'width' : 'height';
+        let widest = groups[0];
+        for (const g of groups) {
+          if (g[dim] > widest[dim]) widest = g;
+        }
+        const targetCenter = widest[axis];
+
+        for (const grp of groups) {
+          const dx = targetCenter - grp[axis];
+          if (dx === 0) continue;
+          grp[axis] += dx;
+          groupAlignShifts.set(`__group_${grp.label}`, dx);
+          // Shift child nodes in this group (expanded groups only)
+          const parsedGroup = parsed.groups.find(
+            (pg) => pg.label === grp.label
+          );
+          if (parsedGroup) {
+            for (const childLabel of parsedGroup.children) {
+              const childNode = layoutNodes.find((n) => n.label === childLabel);
+              if (childNode) childNode[axis] += dx;
+            }
+          }
+        }
+      }
+    }
+  }
+
   // Compute parallel edge offsets
   const edgeYOffsets: number[] = new Array(parsed.edges.length).fill(0);
   const edgeParallelCounts: number[] = new Array(parsed.edges.length).fill(1);
@@ -326,32 +570,64 @@ export function layoutBoxesAndLines(
     let points: { x: number; y: number }[];
 
     if (deferredSet.has(i)) {
-      // Deferred edge (compound parent endpoint) — compute points clipped to border
-      const srcNode = g.node(edge.source);
-      const tgtNode = g.node(edge.target);
-      if (!srcNode || !tgtNode) continue;
-      const srcPt = clipToRectBorder(
-        srcNode.x,
-        srcNode.y,
-        srcNode.width,
-        srcNode.height,
-        tgtNode.x,
-        tgtNode.y
+      // Deferred edge (compound parent endpoint) — use post-alignment layout
+      // positions and emit from center of the relevant border face
+      const srcLayout = layoutGroups.find(
+        (lg) => `__group_${lg.label}` === edge.source
       );
-      const tgtPt = clipToRectBorder(
-        tgtNode.x,
-        tgtNode.y,
-        tgtNode.width,
-        tgtNode.height,
-        srcNode.x,
-        srcNode.y
+      const tgtLayout = layoutGroups.find(
+        (lg) => `__group_${lg.label}` === edge.target
       );
-      const midX = (srcPt.x + tgtPt.x) / 2;
-      const midY = (srcPt.y + tgtPt.y) / 2;
-      points = [srcPt, { x: midX, y: midY }, tgtPt];
+      if (!srcLayout || !tgtLayout) {
+        // Fallback to dagre node positions for collapsed groups / mixed endpoints
+        const srcNode = g.node(edge.source);
+        const tgtNode = g.node(edge.target);
+        if (!srcNode || !tgtNode) continue;
+        const srcPt = clipToRectBorder(
+          srcNode.x,
+          srcNode.y,
+          srcNode.width,
+          srcNode.height,
+          tgtNode.x,
+          tgtNode.y
+        );
+        const tgtPt = clipToRectBorder(
+          tgtNode.x,
+          tgtNode.y,
+          tgtNode.width,
+          tgtNode.height,
+          srcNode.x,
+          srcNode.y
+        );
+        const midX = (srcPt.x + tgtPt.x) / 2;
+        const midY = (srcPt.y + tgtPt.y) / 2;
+        points = [srcPt, { x: midX, y: midY }, tgtPt];
+      } else if (parsed.direction === 'TB') {
+        // TB: straight vertical line from bottom-center to top-center
+        const cx = (srcLayout.x + tgtLayout.x) / 2;
+        const srcPt = { x: cx, y: srcLayout.y + srcLayout.height / 2 };
+        const tgtPt = { x: cx, y: tgtLayout.y - tgtLayout.height / 2 };
+        const midY = (srcPt.y + tgtPt.y) / 2;
+        points = [srcPt, { x: cx, y: midY }, tgtPt];
+      } else {
+        // LR: straight horizontal line from right-center to left-center
+        const cy = (srcLayout.y + tgtLayout.y) / 2;
+        const srcPt = { x: srcLayout.x + srcLayout.width / 2, y: cy };
+        const tgtPt = { x: tgtLayout.x - tgtLayout.width / 2, y: cy };
+        const midX = (srcPt.x + tgtPt.x) / 2;
+        points = [srcPt, { x: midX, y: cy }, tgtPt];
+      }
     } else {
       const dagreEdge = g.edge(edge.source, edge.target, `e${i}`);
       points = dagreEdge?.points ?? [];
+      // If endpoints were shifted by center-alignment, adjust edge points
+      const srcShift = groupAlignShifts.get(edge.source) ?? 0;
+      const tgtShift = groupAlignShifts.get(edge.target) ?? 0;
+      if (srcShift !== 0 || tgtShift !== 0) {
+        const avgShift = (srcShift + tgtShift) / 2;
+        const prop = parsed.direction === 'TB' ? 'x' : 'y';
+        points = points.map((p) => ({ ...p, [prop]: p[prop] + avgShift }));
+      }
     }
 
     // Compute label position at midpoint