@diagrammo/dgmo 0.6.0 → 0.6.2

package/src/er/renderer.ts

@@ -9,10 +9,25 @@ import type { PaletteColors } from '../palettes';
 import { mix } from '../palettes/color-utils';
 import { getSeriesColors } from '../palettes';
 import { resolveTagColor } from '../utils/tag-groups';
+import {
+  LEGEND_HEIGHT,
+  LEGEND_PILL_PAD,
+  LEGEND_PILL_FONT_SIZE,
+  LEGEND_PILL_FONT_W,
+  LEGEND_CAPSULE_PAD,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_ENTRY_FONT_W,
+  LEGEND_ENTRY_DOT_GAP,
+  LEGEND_ENTRY_TRAIL,
+  LEGEND_GROUP_GAP,
+} from '../utils/legend-constants';
 import type { ParsedERDiagram, ERConstraint } from './types';
 import type { ERLayoutResult, ERLayoutNode, ERLayoutEdge } from './layout';
 import { parseERDiagram } from './parser';
 import { layoutERDiagram } from './layout';
+import { classifyEREntities, ROLE_COLORS, ROLE_LABELS, ROLE_ORDER } from './classify';
+import type { EntityRole } from './classify';
 
 // ============================================================
 // Constants
@@ -202,32 +217,62 @@ export function renderERDiagram(
   isDark: boolean,
   onClickItem?: (lineNumber: number) => void,
   exportDims?: { width?: number; height?: number },
-  activeTagGroup?: string | null
+  activeTagGroup?: string | null,
+  /** When false, semantic role colors are suppressed and entities use a neutral color. */
+  semanticColorsActive?: boolean
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
-  const width = exportDims?.width ?? container.clientWidth;
-  const height = exportDims?.height ?? container.clientHeight;
-  if (width <= 0 || height <= 0) return;
+  const useSemanticColors =
+    parsed.tagGroups.length === 0 && layout.nodes.every((n) => !n.color);
+  const legendReserveH = useSemanticColors ? LEGEND_HEIGHT + DIAGRAM_PADDING : 0;
 
   const titleHeight = parsed.title ? 40 : 0;
   const diagramW = layout.width;
   const diagramH = layout.height;
-  const availH = height - titleHeight;
-  const scaleX = (width - DIAGRAM_PADDING * 2) / diagramW;
-  const scaleY = (availH - DIAGRAM_PADDING * 2) / diagramH;
-  const scale = Math.min(MAX_SCALE, scaleX, scaleY);
 
-  const scaledW = diagramW * scale;
-  const scaledH = diagramH * scale;
-  const offsetX = (width - scaledW) / 2;
-  const offsetY = titleHeight + DIAGRAM_PADDING;
+  // Natural dimensions derived purely from the layout — no dependency on container
+  // size at render time, which eliminates the stagger caused by reading clientWidth/
+  // clientHeight before the container has stabilized.
+  const naturalW = diagramW + DIAGRAM_PADDING * 2;
+  const naturalH = diagramH + titleHeight + legendReserveH + DIAGRAM_PADDING * 2;
+
+  // For export: scale the natural layout to fit the requested pixel dimensions.
+  // For live preview: render at natural scale (scale=1) and let the SVG viewBox
+  // handle fitting to the container via CSS.
+  let viewW: number;
+  let viewH: number;
+  let scale: number;
+  let offsetX: number;
+  let offsetY: number;
+
+  if (exportDims) {
+    viewW = exportDims.width ?? naturalW;
+    viewH = exportDims.height ?? naturalH;
+    const availH = viewH - titleHeight - legendReserveH;
+    const scaleX = (viewW - DIAGRAM_PADDING * 2) / diagramW;
+    const scaleY = (availH - DIAGRAM_PADDING * 2) / diagramH;
+    scale = Math.min(MAX_SCALE, scaleX, scaleY);
+    const scaledW = diagramW * scale;
+    offsetX = (viewW - scaledW) / 2;
+    offsetY = titleHeight + DIAGRAM_PADDING;
+  } else {
+    viewW = naturalW;
+    viewH = naturalH;
+    scale = 1;
+    offsetX = DIAGRAM_PADDING;
+    offsetY = titleHeight + DIAGRAM_PADDING;
+  }
+
+  if (viewW <= 0 || viewH <= 0) return;
 
   const svg = d3Selection
     .select(container)
     .append('svg')
-    .attr('width', width)
-    .attr('height', height)
+    .attr('width', exportDims ? viewW : '100%')
+    .attr('height', exportDims ? viewH : '100%')
+    .attr('viewBox', `0 0 ${viewW} ${viewH}`)
+    .attr('preserveAspectRatio', 'xMidYMid meet')
     .style('font-family', FONT_FAMILY);
 
   // ── Title ──
@@ -235,7 +280,7 @@ export function renderERDiagram(
     const titleEl = svg
       .append('text')
       .attr('class', 'chart-title')
-      .attr('x', width / 2)
+      .attr('x', viewW / 2)
       .attr('y', 30)
       .attr('text-anchor', 'middle')
       .attr('fill', palette.text)
@@ -263,6 +308,15 @@ export function renderERDiagram(
   // ── Auto-assign colors ──
   const seriesColors = getSeriesColors(palette);
 
+  // ── Semantic coloring gate ──
+  // Classify entities whenever conditions allow; suppress colors when user collapses the legend.
+  // (useSemanticColors was computed above for legend reserve height)
+  const semanticRoles: Map<string, EntityRole> | null = useSemanticColors
+    ? classifyEREntities(parsed.tables, parsed.relationships)
+    : null;
+  // semanticColorsActive defaults to true; false = legend collapsed, neutral color applied
+  const semanticActive = semanticRoles !== null && (semanticColorsActive ?? true);
+
   // ── Edges (behind nodes) ──
   const useLabels = parsed.options.notation === 'labels';
 
@@ -341,7 +395,12 @@ export function renderERDiagram(
   for (let ni = 0; ni < layout.nodes.length; ni++) {
     const node = layout.nodes[ni];
     const tagColor = resolveTagColor(node.metadata, parsed.tagGroups, activeTagGroup ?? null);
-    const nodeColor = node.color ?? tagColor ?? seriesColors[ni % seriesColors.length];
+    const semanticColor = semanticActive
+      ? palette.colors[ROLE_COLORS[semanticRoles!.get(node.id) ?? 'unclassified']]
+      : semanticRoles
+        ? palette.primary  // neutral color when legend is collapsed
+        : undefined;
+    const nodeColor = node.color ?? tagColor ?? semanticColor ?? seriesColors[ni % seriesColors.length];
 
     const nodeG = contentG
       .append('g')
@@ -359,6 +418,12 @@ export function renderERDiagram(
       }
     }
 
+    // Set data-er-role for semantic coloring (CSS targeting + test assertions)
+    if (semanticRoles) {
+      const role = semanticRoles.get(node.id);
+      if (role) nodeG.attr('data-er-role', role);
+    }
+
     if (onClickItem) {
       nodeG.style('cursor', 'pointer').on('click', () => {
         onClickItem(node.lineNumber);
@@ -445,19 +510,19 @@ export function renderERDiagram(
 
   // ── Tag Legend ──
   if (parsed.tagGroups.length > 0) {
-    const LEGEND_Y_PAD = 16;
-    const LEGEND_PILL_H = 22;
-    const LEGEND_PILL_RX = 11;
-    const LEGEND_PILL_PAD = 10;
+    const LEGEND_PILL_H = LEGEND_HEIGHT - 6;
+    const LEGEND_PILL_RX = Math.floor(LEGEND_PILL_H / 2);
     const LEGEND_GAP = 8;
-    const LEGEND_FONT_SIZE = 11;
-    const LEGEND_GROUP_GAP = 16;
 
     const legendG = svg.append('g')
       .attr('class', 'er-tag-legend');
 
+    if (activeTagGroup) {
+      legendG.attr('data-legend-active', activeTagGroup.toLowerCase());
+    }
+
     let legendX = DIAGRAM_PADDING;
-    let legendY = height - DIAGRAM_PADDING;
+    let legendY = viewH - DIAGRAM_PADDING;
 
     for (const group of parsed.tagGroups) {
       const groupG = legendG.append('g')
@@ -469,7 +534,7 @@ export function renderERDiagram(
         .attr('y', legendY + LEGEND_PILL_H / 2)
         .attr('dominant-baseline', 'central')
         .attr('fill', palette.textMuted)
-        .attr('font-size', LEGEND_FONT_SIZE)
+        .attr('font-size', LEGEND_PILL_FONT_SIZE)
         .attr('font-family', FONT_FAMILY)
         .text(`${group.name}:`);
 
@@ -484,7 +549,7 @@ export function renderERDiagram(
 
         // Estimate text width
         const tmpText = legendG.append('text')
-          .attr('font-size', LEGEND_FONT_SIZE)
+          .attr('font-size', LEGEND_PILL_FONT_SIZE)
           .attr('font-family', FONT_FAMILY)
           .text(entry.value);
         const textW = tmpText.node()?.getComputedTextLength?.() ?? entry.value.length * 7;
@@ -509,7 +574,7 @@ export function renderERDiagram(
           .attr('text-anchor', 'middle')
           .attr('dominant-baseline', 'central')
           .attr('fill', palette.text)
-          .attr('font-size', LEGEND_FONT_SIZE)
+          .attr('font-size', LEGEND_PILL_FONT_SIZE)
           .attr('font-family', FONT_FAMILY)
           .text(entry.value);
 
@@ -519,6 +584,161 @@ export function renderERDiagram(
       legendX += LEGEND_GROUP_GAP;
     }
   }
+
+  // ── Semantic Legend ──
+  // Rendered when semantic role detection is enabled (no tag groups, no explicit colors).
+  // Follows the sequence-legend pattern: one clickable "Role" group pill that expands
+  // to show colored-dot entries. Clicking toggles semanticColorsActive on/off.
+  if (semanticRoles) {
+    const presentRoles = ROLE_ORDER.filter((role) => {
+      for (const r of semanticRoles.values()) {
+        if (r === role) return true;
+      }
+      return false;
+    });
+
+    if (presentRoles.length > 0) {
+      // Measure actual text widths for consistent spacing regardless of character mix.
+      // Falls back to a character-count estimate in jsdom/test environments.
+      const measureLabelW = (text: string, fontSize: number): number => {
+        const dummy = svg.append('text')
+          .attr('font-size', fontSize)
+          .attr('font-family', FONT_FAMILY)
+          .attr('visibility', 'hidden')
+          .text(text);
+        const measured = (dummy.node() as SVGTextElement | null)?.getComputedTextLength?.() ?? 0;
+        dummy.remove();
+        return measured > 0 ? measured : text.length * fontSize * 0.6;
+      };
+
+      const labelWidths = new Map<EntityRole, number>();
+      for (const role of presentRoles) {
+        labelWidths.set(role, measureLabelW(ROLE_LABELS[role], LEGEND_ENTRY_FONT_SIZE));
+      }
+
+      const groupBg = isDark
+        ? mix(palette.surface, palette.bg, 50)
+        : mix(palette.surface, palette.bg, 30);
+
+      const groupName = 'Role';
+      const pillWidth = groupName.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+      const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
+
+      let totalWidth: number;
+      let entriesWidth = 0;
+      if (semanticActive) {
+        for (const role of presentRoles) {
+          entriesWidth +=
+            LEGEND_DOT_R * 2 +
+            LEGEND_ENTRY_DOT_GAP +
+            labelWidths.get(role)! +
+            LEGEND_ENTRY_TRAIL;
+        }
+        totalWidth = LEGEND_CAPSULE_PAD * 2 + pillWidth + LEGEND_ENTRY_TRAIL + entriesWidth;
+      } else {
+        totalWidth = pillWidth;
+      }
+
+      const legendX = (viewW - totalWidth) / 2;
+      const legendY = viewH - DIAGRAM_PADDING - LEGEND_HEIGHT;
+
+      const semanticLegendG = svg
+        .append('g')
+        .attr('class', 'er-semantic-legend')
+        .attr('data-legend-group', 'role')
+        .attr('transform', `translate(${legendX}, ${legendY})`)
+        .style('cursor', 'pointer');
+
+      if (semanticActive) {
+        // ── Expanded: outer capsule + inner pill + dot entries ──
+        semanticLegendG
+          .append('rect')
+          .attr('width', totalWidth)
+          .attr('height', LEGEND_HEIGHT)
+          .attr('rx', LEGEND_HEIGHT / 2)
+          .attr('fill', groupBg);
+
+        semanticLegendG
+          .append('rect')
+          .attr('x', LEGEND_CAPSULE_PAD)
+          .attr('y', LEGEND_CAPSULE_PAD)
+          .attr('width', pillWidth)
+          .attr('height', pillH)
+          .attr('rx', pillH / 2)
+          .attr('fill', palette.bg);
+
+        semanticLegendG
+          .append('rect')
+          .attr('x', LEGEND_CAPSULE_PAD)
+          .attr('y', LEGEND_CAPSULE_PAD)
+          .attr('width', pillWidth)
+          .attr('height', pillH)
+          .attr('rx', pillH / 2)
+          .attr('fill', 'none')
+          .attr('stroke', mix(palette.textMuted, palette.bg, 50))
+          .attr('stroke-width', 0.75);
+
+        semanticLegendG
+          .append('text')
+          .attr('x', LEGEND_CAPSULE_PAD + pillWidth / 2)
+          .attr('y', LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2)
+          .attr('font-size', LEGEND_PILL_FONT_SIZE)
+          .attr('font-weight', '500')
+          .attr('fill', palette.text)
+          .attr('text-anchor', 'middle')
+          .attr('font-family', FONT_FAMILY)
+          .text(groupName);
+
+        let entryX = LEGEND_CAPSULE_PAD + pillWidth + LEGEND_ENTRY_TRAIL;
+        for (const role of presentRoles) {
+          const label = ROLE_LABELS[role];
+          const roleColor = palette.colors[ROLE_COLORS[role]];
+
+          const entryG = semanticLegendG
+            .append('g')
+            .attr('data-legend-entry', role);
+
+          entryG
+            .append('circle')
+            .attr('cx', entryX + LEGEND_DOT_R)
+            .attr('cy', LEGEND_HEIGHT / 2)
+            .attr('r', LEGEND_DOT_R)
+            .attr('fill', roleColor);
+
+          const textX = entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
+          entryG
+            .append('text')
+            .attr('x', textX)
+            .attr('y', LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1)
+            .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
+            .attr('fill', palette.textMuted)
+            .attr('font-family', FONT_FAMILY)
+            .text(label);
+
+          entryX = textX + labelWidths.get(role)! + LEGEND_ENTRY_TRAIL;
+        }
+      } else {
+        // ── Collapsed: single muted pill, no entries ──
+        semanticLegendG
+          .append('rect')
+          .attr('width', pillWidth)
+          .attr('height', LEGEND_HEIGHT)
+          .attr('rx', LEGEND_HEIGHT / 2)
+          .attr('fill', groupBg);
+
+        semanticLegendG
+          .append('text')
+          .attr('x', pillWidth / 2)
+          .attr('y', LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2)
+          .attr('font-size', LEGEND_PILL_FONT_SIZE)
+          .attr('font-weight', '500')
+          .attr('fill', palette.textMuted)
+          .attr('text-anchor', 'middle')
+          .attr('font-family', FONT_FAMILY)
+          .text(groupName);
+      }
+    }
+  }
 }
 
 // ============================================================

package/src/index.ts

@@ -246,7 +246,7 @@ export { collapseSitemapTree } from './sitemap/collapse';
 
 // ── Infra Chart ────────────────────────────────────────────
 export { parseInfra } from './infra/parser';
-export type { ParsedInfra, InfraNode, InfraEdge, InfraGroup, InfraTagGroup, InfraProperty, InfraDiagnostic, InfraScenario, InfraComputeParams, InfraBehaviorKey } from './infra/types';
+export type { ParsedInfra, InfraNode, InfraEdge, InfraGroup, InfraTagGroup, InfraProperty, InfraDiagnostic, InfraComputeParams, InfraBehaviorKey } from './infra/types';
 export { INFRA_BEHAVIOR_KEYS } from './infra/types';
 export { computeInfra } from './infra/compute';
 export type { ComputedInfraModel, ComputedInfraNode, ComputedInfraEdge, InfraLatencyPercentiles, InfraAvailabilityPercentiles, InfraCbState } from './infra/types';
@@ -256,7 +256,7 @@ export type { InfraRole } from './infra/roles';
 export { layoutInfra } from './infra/layout';
 export type { InfraLayoutResult, InfraLayoutNode, InfraLayoutEdge, InfraLayoutGroup } from './infra/layout';
 export { renderInfra, parseAndLayoutInfra, computeInfraLegendGroups } from './infra/renderer';
-export type { InfraLegendGroup, InfraPlaybackState } from './infra/renderer';
+export type { InfraLegendGroup } from './infra/renderer';
 export type { CollapsedSitemapResult } from './sitemap/collapse';
 
 export { collapseOrgTree } from './org/collapse';

package/src/infra/compute.ts

@@ -604,28 +604,8 @@ export function computeInfra(
   const defaultLatencyMs = parseFloat(parsed.options['default-latency-ms'] ?? '') || 0;
   const defaultUptime = parseFloat(parsed.options['default-uptime'] ?? '') || 100;
 
-  // Apply scenario overrides (shallow clone nodes with modified properties)
-  let effectiveNodes = parsed.nodes;
-  if (params.scenario) {
-    const overrides = params.scenario.overrides;
-    effectiveNodes = parsed.nodes.map((node) => {
-      const nodeOverrides = overrides[node.id];
-      if (!nodeOverrides) return node;
-      const props = node.properties.map((p) => {
-        const ov = nodeOverrides[p.key];
-        return ov != null ? { ...p, value: ov } : p;
-      });
-      // Add new properties from scenario that don't exist on the node
-      for (const [key, val] of Object.entries(nodeOverrides)) {
-        if (!props.some((p) => p.key === key)) {
-          props.push({ key, value: val, lineNumber: node.lineNumber });
-        }
-      }
-      return { ...node, properties: props };
-    });
-  }
   // Apply per-node property overrides (from interactive sliders)
-  // These take precedence over scenario overrides
+  let effectiveNodes = parsed.nodes;
   if (params.propertyOverrides) {
     const propOv = params.propertyOverrides;
     effectiveNodes = effectiveNodes.map((node) => {

package/src/infra/layout.ts

@@ -73,6 +73,7 @@ export interface InfraLayoutResult {
   groups: InfraLayoutGroup[];
   /** Diagram-level options (e.g., default-latency-ms, default-uptime). */
   options: Record<string, string>;
+  direction: 'LR' | 'TB';
   width: number;
   height: number;
 }
@@ -110,12 +111,12 @@ const DISPLAY_KEYS = new Set([
 
 /** Display names for width estimation. */
 const DISPLAY_NAMES: Record<string, string> = {
-  'cache-hit': 'cache hit', 'firewall-block': 'fw block',
+  'cache-hit': 'cache hit', 'firewall-block': 'firewall block',
   'ratelimit-rps': 'rate limit RPS', 'latency-ms': 'latency', 'uptime': 'uptime',
   'instances': 'instances', 'max-rps': 'max RPS',
-  'cb-error-threshold': 'CB error', 'cb-latency-threshold-ms': 'CB latency',
+  'cb-error-threshold': 'CB error threshold', 'cb-latency-threshold-ms': 'CB latency threshold',
   'concurrency': 'concurrency', 'duration-ms': 'duration', 'cold-start-ms': 'cold start',
-  'buffer': 'buffer', 'drain-rate': 'drain', 'retention-hours': 'retention', 'partitions': 'partitions',
+  'buffer': 'buffer', 'drain-rate': 'drain rate', 'retention-hours': 'retention', 'partitions': 'partitions',
 };
 
 function countDisplayProps(node: ComputedInfraNode, expanded: boolean, options?: Record<string, string>): number {
@@ -356,18 +357,20 @@ function formatUptime(fraction: number): string {
 // Group separation pass
 // ============================================================
 
-const GROUP_GAP = 24; // min clear gap between group boxes — matches GROUP_HEADER_HEIGHT
+const GROUP_GAP = GROUP_PADDING * 2 + GROUP_HEADER_HEIGHT; // min clear gap between group boxes
 
 export function separateGroups(
   groups: InfraLayoutGroup[],
   nodes: InfraLayoutNode[],
   isLR: boolean,
   maxIterations = 20,
-): void {
+): Map<string, { dx: number; dy: number }> {
   // Symmetric 2D rectangle intersection — no sorting needed, handles all
   // relative positions correctly, stable after mid-pass shifts.
   // Endpoint edge routing is not affected: renderer.ts recomputes border
   // connection points from node x/y at render time via nodeBorderPoint().
+  const groupDeltas = new Map<string, { dx: number; dy: number }>();
+  let converged = false;
   for (let iter = 0; iter < maxIterations; iter++) {
     let anyOverlap = false;
     for (let i = 0; i < groups.length; i++) {
@@ -398,6 +401,11 @@ export function separateGroups(
         if (isLR) groupToShift.y += shift;
         else groupToShift.x += shift;
 
+        // Accumulate the total delta for this group (used by fixEdgeWaypoints)
+        const prev = groupDeltas.get(groupToShift.id) ?? { dx: 0, dy: 0 };
+        if (isLR) groupDeltas.set(groupToShift.id, { dx: prev.dx, dy: prev.dy + shift });
+        else groupDeltas.set(groupToShift.id, { dx: prev.dx + shift, dy: prev.dy });
+
         for (const node of nodes) {
           if (node.groupId === groupToShift.id) {
             if (isLR) node.y += shift;
@@ -406,7 +414,44 @@ export function separateGroups(
         }
       }
     }
-    if (!anyOverlap) break;
+    if (!anyOverlap) { converged = true; break; }
+  }
+  if (!converged && maxIterations > 0) {
+    console.warn(`separateGroups: hit maxIterations (${maxIterations}) without fully resolving all group overlaps`);
+  }
+  return groupDeltas;
+}
+
+export function fixEdgeWaypoints(
+  edges: InfraLayoutEdge[],
+  nodes: InfraLayoutNode[],
+  groupDeltas: Map<string, { dx: number; dy: number }>,
+): void {
+  if (groupDeltas.size === 0) return;
+  const nodeToGroup = new Map<string, string | null>();
+  for (const node of nodes) nodeToGroup.set(node.id, node.groupId);
+
+  for (const edge of edges) {
+    const srcGroup = nodeToGroup.get(edge.sourceId) ?? null;
+    // Group-targeting edges (targetId is a group ID, not a node) return undefined from the map → null →
+    // treated as "ungrouped target", which is the correct approximation.
+    const tgtGroup = nodeToGroup.get(edge.targetId) ?? null;
+    const srcDelta = srcGroup ? groupDeltas.get(srcGroup) : undefined;
+    const tgtDelta = tgtGroup ? groupDeltas.get(tgtGroup) : undefined;
+
+    if (!srcDelta && !tgtDelta) continue; // neither side shifted
+
+    if (srcDelta && tgtDelta && srcGroup !== tgtGroup) {
+      // both sides in different shifted groups — discard, renderer draws a straight line
+      edge.points = [];
+      continue;
+    }
+
+    const delta = srcDelta ?? tgtDelta!;
+    for (const pt of edge.points) {
+      pt.x += delta.dx;
+      pt.y += delta.dy;
+    }
   }
 }
 
@@ -416,15 +461,16 @@ export function separateGroups(
 
 export function layoutInfra(computed: ComputedInfraModel, expandedNodeIds?: Set<string> | null, collapsedNodes?: Set<string> | null): InfraLayoutResult {
   if (computed.nodes.length === 0) {
-    return { nodes: [], edges: [], groups: [], options: {}, width: 0, height: 0 };
+    return { nodes: [], edges: [], groups: [], options: {}, direction: computed.direction, width: 0, height: 0 };
   }
 
+  const isLR = computed.direction !== 'TB';
   const g = new dagre.graphlib.Graph();
   g.setGraph({
     rankdir: computed.direction === 'TB' ? 'TB' : 'LR',
-    nodesep: 50,
-    ranksep: 100,
-    edgesep: 20,
+    nodesep: isLR ? 70 : 60,
+    ranksep: isLR ? 150 : 120,
+    edgesep: 30,
   });
   g.setDefaultEdgeLabel(() => ({}));
 
@@ -436,7 +482,6 @@ export function layoutInfra(computed: ComputedInfraModel, expandedNodeIds?: Set<
 
   // Extra space dagre must reserve for the group bounding box
   const GROUP_INFLATE = GROUP_PADDING * 2 + GROUP_HEADER_HEIGHT;
-  const isLR = computed.direction !== 'TB';
 
   // Add nodes — inflate grouped nodes so dagre accounts for group boxes
   const widthMap = new Map<string, number>();
@@ -591,8 +636,9 @@ export function layoutInfra(computed: ComputedInfraModel, expandedNodeIds?: Set<
     };
   });
 
-  // Separate overlapping groups (post-layout pass)
-  separateGroups(layoutGroups, layoutNodes, isLR);
+  // Separate overlapping groups (post-layout pass) and fix stale edge waypoints
+  const groupDeltas = separateGroups(layoutGroups, layoutNodes, isLR);
+  fixEdgeWaypoints(layoutEdges, layoutNodes, groupDeltas);
 
   // Compute total dimensions
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
@@ -657,6 +703,7 @@ export function layoutInfra(computed: ComputedInfraModel, expandedNodeIds?: Set<
     edges: layoutEdges,
     groups: layoutGroups,
     options: computed.options,
+    direction: computed.direction,
     width: totalWidth,
     height: totalHeight,
   };

package/src/infra/parser.ts

@@ -110,7 +110,6 @@ export function parseInfra(content: string): ParsedInfra {
     edges: [],
     groups: [],
     tagGroups: [],
-    scenarios: [],
     options: {},
     diagnostics: [],
     error: null,
@@ -250,46 +249,20 @@ export function parseInfra(content: string): ParsedInfra {
         continue;
       }
 
-      // scenario: Name
+      // scenario: Name — deprecated, emit warning and skip block
       if (/^scenario\s*:/i.test(trimmed)) {
-        finishCurrentNode();
-        finishCurrentTagGroup();
-        currentGroup = null;
-        const scenarioName = trimmed.replace(/^scenario\s*:\s*/i, '').trim();
-        const scenario: import('./types').InfraScenario = {
-          name: scenarioName,
-          overrides: {},
-          lineNumber,
-        };
-        // Parse indented block for scenario overrides
-        let scenarioNodeId: string | null = null;
+        console.warn('[dgmo warn] scenario syntax is deprecated and will be ignored');
+        // Skip indented block
         let si = i + 1;
         while (si < lines.length) {
           const sLine = lines[si];
           const sTrimmed = sLine.trim();
           if (!sTrimmed || sTrimmed.startsWith('#')) { si++; continue; }
           const sIndent = sLine.length - sLine.trimStart().length;
-          if (sIndent === 0) break; // back to top level
-
-          if (sIndent <= 2) {
-            // Node reference (e.g., "  edge" or "  API")
-            scenarioNodeId = nodeId(sTrimmed.replace(/\|.*$/, '').trim());
-            if (!scenario.overrides[scenarioNodeId]) {
-              scenario.overrides[scenarioNodeId] = {};
-            }
-          } else if (scenarioNodeId) {
-            // Property override (e.g., "    rps: 10000")
-            const pm = sTrimmed.match(PROPERTY_RE);
-            if (pm) {
-              const key = pm[1].toLowerCase();
-              const val = parsePropertyValue(pm[2].trim());
-              scenario.overrides[scenarioNodeId][key] = val;
-            }
-          }
+          if (sIndent === 0) break;
           si++;
         }
-        i = si - 1; // advance past scenario block
-        result.scenarios.push(scenario);
+        i = si - 1;
         continue;
       }