@diagrammo/dgmo 0.4.2 → 0.4.4

package/src/d3.ts

@@ -5159,7 +5159,7 @@ export async function renderD3ForExport(
     activeTagGroup?: string | null;
     hiddenAttributes?: Set<string>;
   },
-  options?: { branding?: boolean; c4Level?: 'context' | 'containers' | 'components' | 'deployment'; c4System?: string; c4Container?: string }
+  options?: { branding?: boolean; c4Level?: 'context' | 'containers' | 'components' | 'deployment'; c4System?: string; c4Container?: string; scenario?: string }
 ): Promise<string> {
   // Flowchart and org chart use their own parser pipelines — intercept before parseD3()
   const { parseDgmoChartType } = await import('./dgmo-router');
@@ -5191,7 +5191,8 @@ export async function renderD3ForExport(
       effectiveParsed,
       hiddenCounts.size > 0 ? hiddenCounts : undefined,
       activeTagGroup,
-      hiddenAttributes
+      hiddenAttributes,
+      true // expandAllLegend — show all tag groups expanded in export
     );
 
     const PADDING = 20;
@@ -5204,6 +5205,46 @@ export async function renderD3ForExport(
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 
+  if (detectedType === 'sitemap') {
+    const { parseSitemap } = await import('./sitemap/parser');
+    const { layoutSitemap } = await import('./sitemap/layout');
+    const { collapseSitemapTree } = await import('./sitemap/collapse');
+    const { renderSitemap } = await import('./sitemap/renderer');
+
+    const isDark = theme === 'dark';
+    const effectivePalette = await resolveExportPalette(theme, palette);
+
+    const sitemapParsed = parseSitemap(content, effectivePalette);
+    if (sitemapParsed.error || sitemapParsed.roots.length === 0) return '';
+
+    // Apply interactive collapse state when provided
+    const collapsedNodes = orgExportState?.collapsedNodes;
+    const activeTagGroup = orgExportState?.activeTagGroup ?? null;
+    const hiddenAttributes = orgExportState?.hiddenAttributes;
+
+    const { parsed: effectiveParsed, hiddenCounts } =
+      collapsedNodes && collapsedNodes.size > 0
+        ? collapseSitemapTree(sitemapParsed, collapsedNodes)
+        : { parsed: sitemapParsed, hiddenCounts: new Map<string, number>() };
+
+    const sitemapLayout = layoutSitemap(
+      effectiveParsed,
+      hiddenCounts.size > 0 ? hiddenCounts : undefined,
+      activeTagGroup,
+      hiddenAttributes,
+      true,
+    );
+
+    const PADDING = 20;
+    const titleOffset = effectiveParsed.title ? 30 : 0;
+    const exportWidth = sitemapLayout.width + PADDING * 2;
+    const exportHeight = sitemapLayout.height + PADDING * 2 + titleOffset;
+    const container = createExportContainer(exportWidth, exportHeight);
+
+    renderSitemap(container, effectiveParsed, sitemapLayout, effectivePalette, isDark, undefined, { width: exportWidth, height: exportHeight }, activeTagGroup, hiddenAttributes);
+    return finalizeSvgExport(container, theme, effectivePalette, options);
+  }
+
   if (detectedType === 'kanban') {
     const { parseKanban } = await import('./kanban/parser');
     const { renderKanban } = await import('./kanban/renderer');
@@ -5336,6 +5377,55 @@ export async function renderD3ForExport(
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 
+  if (detectedType === 'infra') {
+    const { parseInfra } = await import('./infra/parser');
+    const { computeInfra } = await import('./infra/compute');
+    const { layoutInfra } = await import('./infra/layout');
+    const { renderInfra, computeInfraLegendGroups } = await import('./infra/renderer');
+
+    const effectivePalette = await resolveExportPalette(theme, palette);
+    const infraParsed = parseInfra(content);
+    if (infraParsed.error || infraParsed.nodes.length === 0) return '';
+
+    const selectedScenario = options?.scenario
+      ? infraParsed.scenarios.find((s) => s.name.toLowerCase() === options.scenario!.toLowerCase()) ?? null
+      : null;
+    const infraComputed = computeInfra(infraParsed, selectedScenario ? { scenario: selectedScenario } : {});
+    const infraLayout = layoutInfra(infraComputed);
+
+    const titleOffset = infraParsed.title ? 40 : 0;
+    const legendGroups = computeInfraLegendGroups(infraLayout.nodes, infraParsed.tagGroups, effectivePalette);
+    const legendOffset = legendGroups.length > 0 ? 28 : 0;
+    const exportWidth = infraLayout.width;
+    const exportHeight = infraLayout.height + titleOffset + legendOffset;
+    const container = createExportContainer(exportWidth, exportHeight);
+
+    renderInfra(container, infraLayout, effectivePalette, theme === 'dark', infraParsed.title, infraParsed.titleLineNumber, infraParsed.tagGroups, null, false, null, null, true);
+    // Restore explicit pixel dimensions for resvg (renderer uses 100%/viewBox for app scaling)
+    const infraSvg = container.querySelector('svg');
+    if (infraSvg) {
+      infraSvg.setAttribute('width', String(exportWidth));
+      infraSvg.setAttribute('height', String(exportHeight));
+    }
+    return finalizeSvgExport(container, theme, effectivePalette, options);
+  }
+
+  if (detectedType === 'state') {
+    const { parseState } = await import('./graph/state-parser');
+    const { layoutGraph } = await import('./graph/layout');
+    const { renderState } = await import('./graph/state-renderer');
+
+    const effectivePalette = await resolveExportPalette(theme, palette);
+    const stateParsed = parseState(content, effectivePalette);
+    if (stateParsed.error || stateParsed.nodes.length === 0) return '';
+
+    const layout = layoutGraph(stateParsed);
+    const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+
+    renderState(container, stateParsed, layout, effectivePalette, theme === 'dark', undefined, { width: EXPORT_WIDTH, height: EXPORT_HEIGHT });
+    return finalizeSvgExport(container, theme, effectivePalette, options);
+  }
+
   const parsed = parseD3(content, palette);
   // Allow sequence diagrams through even if parseD3 errors —
   // sequence is parsed by its own dedicated parser (parseSequenceDgmo)

package/src/dgmo-router.ts

@@ -4,6 +4,7 @@
 
 import { looksLikeSequence, parseSequenceDgmo } from './sequence/parser';
 import { looksLikeFlowchart, parseFlowchart } from './graph/flowchart-parser';
+import { looksLikeState, parseState } from './graph/state-parser';
 import { looksLikeClassDiagram, parseClassDiagram } from './class/parser';
 import { looksLikeERDiagram, parseERDiagram } from './er/parser';
 import { parseChart } from './chart';
@@ -13,6 +14,8 @@ import { parseOrg, looksLikeOrg } from './org/parser';
 import { parseKanban } from './kanban/parser';
 import { parseC4 } from './c4/parser';
 import { looksLikeInitiativeStatus, parseInitiativeStatus } from './initiative-status/parser';
+import { looksLikeSitemap, parseSitemap } from './sitemap/parser';
+import { parseInfra } from './infra/parser';
 import type { DgmoError } from './diagnostics';
 
 /**
@@ -62,6 +65,9 @@ export const DGMO_CHART_TYPE_MAP: Record<string, DgmoFramework> = {
   kanban: 'd3',
   c4: 'd3',
   'initiative-status': 'd3',
+  state: 'd3',
+  sitemap: 'd3',
+  infra: 'd3',
 };
 
 /**
@@ -94,6 +100,8 @@ export function parseDgmoChartType(content: string): string | null {
   if (looksLikeClassDiagram(content)) return 'class';
   if (looksLikeERDiagram(content)) return 'er';
   if (looksLikeInitiativeStatus(content)) return 'initiative-status';
+  if (looksLikeState(content)) return 'state';
+  if (looksLikeSitemap(content)) return 'sitemap';
   if (looksLikeOrg(content)) return 'org';
 
   return null;
@@ -120,6 +128,9 @@ const PARSE_DISPATCH = new Map<string, (content: string) => { diagnostics: DgmoE
   ['kanban', (c) => parseKanban(c)],
   ['c4', (c) => parseC4(c)],
   ['initiative-status', (c) => parseInitiativeStatus(c)],
+  ['state', (c) => parseState(c)],
+  ['sitemap', (c) => parseSitemap(c)],
+  ['infra', (c) => parseInfra(c)],
 ]);
 
 /**

package/src/echarts.ts

@@ -26,6 +26,7 @@ export interface ParsedSankeyLink {
   source: string;
   target: string;
   value: number;
+  color?: string;
   lineNumber: number;
 }
 
@@ -74,6 +75,7 @@ export interface ParsedEChart {
   sizelabel?: string;
   showLabels?: boolean;
   categoryColors?: Record<string, string>;
+  nodeColors?: Record<string, string>;
   diagnostics: DgmoError[];
   error: string | null;
 }
@@ -87,7 +89,8 @@ import { getSeriesColors, getSegmentColors } from './palettes';
 import { parseChart } from './chart';
 import type { ParsedChart } from './chart';
 import { makeDgmoError, formatDgmoError, suggest } from './diagnostics';
-import { collectIndentedValues, extractColor, parseSeriesNames } from './utils/parsing';
+import { resolveColor } from './colors';
+import { collectIndentedValues, extractColor, measureIndent, parseSeriesNames } from './utils/parsing';
 
 // ============================================================
 // Shared Constants
@@ -129,6 +132,9 @@ export function parseEChart(
   // Track current category for grouped scatter charts
   let currentCategory = 'Default';
 
+  // Sankey indentation state: stack of source nodes by indent level
+  const sankeyStack: { name: string; indent: number }[] = [];
+
   for (let i = 0; i < lines.length; i++) {
     const trimmed = lines[i].trim();
     const lineNumber = i + 1;
@@ -160,6 +166,22 @@ export function parseEChart(
 
     // Parse key: value pairs
     const colonIndex = trimmed.indexOf(':');
+
+    // Sankey: bare label (no colon) at any indent = source node for indented children
+    if (result.type === 'sankey' && colonIndex === -1) {
+      const indent = measureIndent(lines[i]);
+      while (sankeyStack.length && sankeyStack.at(-1)!.indent >= indent) {
+        sankeyStack.pop();
+      }
+      const { label: nodeName, color: nodeColor } = extractColor(trimmed, palette);
+      if (nodeColor) {
+        if (!result.nodeColors) result.nodeColors = {};
+        result.nodeColors[nodeName] = nodeColor;
+      }
+      sankeyStack.push({ name: nodeName, indent });
+      continue;
+    }
+
     if (colonIndex === -1) continue;
 
     const key = trimmed.substring(0, colonIndex).trim().toLowerCase();
@@ -264,20 +286,59 @@ export function parseEChart(
       continue;
     }
 
-    // Check for Sankey arrow syntax: Source -> Target: Value
-    const arrowMatch = trimmed.match(/^(.+?)\s*->\s*(.+?):\s*(\d+(?:\.\d+)?)$/);
+    // Check for Sankey arrow syntax: Source (color) -> Target (color): Value (color)
+    const arrowMatch = trimmed.match(/^(.+?)\s*->\s*(.+?):\s*(\d+(?:\.\d+)?)\s*(?:\(([^)]+)\))?\s*$/);
     if (arrowMatch) {
-      const [, source, target, val] = arrowMatch;
+      const [, rawSource, rawTarget, val, rawLinkColor] = arrowMatch;
+      const { label: source, color: sourceColor } = extractColor(rawSource.trim(), palette);
+      const { label: target, color: targetColor } = extractColor(rawTarget.trim(), palette);
+      if (sourceColor || targetColor) {
+        if (!result.nodeColors) result.nodeColors = {};
+        if (sourceColor) result.nodeColors[source] = sourceColor;
+        if (targetColor) result.nodeColors[target] = targetColor;
+      }
+      const linkColor = rawLinkColor ? resolveColor(rawLinkColor.trim(), palette) : undefined;
       if (!result.links) result.links = [];
       result.links.push({
-        source: source.trim(),
-        target: target.trim(),
+        source,
+        target,
         value: parseFloat(val),
+        ...(linkColor && { color: linkColor }),
         lineNumber,
       });
       continue;
     }
 
+    // Sankey: indented "Target: Value" under a source node on the indent stack
+    if (result.type === 'sankey' && sankeyStack.length > 0) {
+      const indent = measureIndent(lines[i]);
+      if (indent > 0) {
+        // Pop entries at same or deeper indent to find the parent
+        while (sankeyStack.length && sankeyStack.at(-1)!.indent >= indent) {
+          sankeyStack.pop();
+        }
+        if (sankeyStack.length > 0) {
+          const source = sankeyStack.at(-1)!.name;
+          const { label: target, color: targetColor } = extractColor(trimmed.substring(0, colonIndex).trim(), palette);
+          if (targetColor) {
+            if (!result.nodeColors) result.nodeColors = {};
+            result.nodeColors[target] = targetColor;
+          }
+          // Parse value with optional trailing (color) for link color
+          const valColorMatch = value.match(/^(\d+(?:\.\d+)?)\s*(?:\(([^)]+)\))?\s*$/);
+          const val = valColorMatch ? parseFloat(valColorMatch[1]) : NaN;
+          const linkColor = valColorMatch?.[2] ? resolveColor(valColorMatch[2].trim(), palette) : undefined;
+          if (!isNaN(val)) {
+            if (!result.links) result.links = [];
+            result.links.push({ source, target, value: val, ...(linkColor && { color: linkColor }), lineNumber });
+            // Push target as potential source for deeper nesting
+            sankeyStack.push({ name: target, indent });
+            continue;
+          }
+        }
+      }
+    }
+
     // For function charts, treat non-numeric values as function expressions
     if (result.type === 'function') {
       const { label: fnName, color: fnColor } = extractColor(trimmed.substring(0, colonIndex).trim(), palette);
@@ -504,7 +565,7 @@ function buildSankeyOption(
   const nodes = Array.from(nodeSet).map((name, index) => ({
     name,
     itemStyle: {
-      color: colors[index % colors.length],
+      color: parsed.nodeColors?.[name] ?? colors[index % colors.length],
     },
   }));
 
@@ -526,7 +587,12 @@ function buildSankeyOption(
         nodeGap: 12,
         nodeWidth: 20,
         data: nodes,
-        links: parsed.links ?? [],
+        links: (parsed.links ?? []).map(link => ({
+          source: link.source,
+          target: link.target,
+          value: link.value,
+          ...(link.color && { lineStyle: { color: link.color } }),
+        })),
         lineStyle: {
           color: 'gradient',
           curveness: 0.5,

package/src/er/parser.ts

@@ -29,6 +29,9 @@ const TABLE_DECL_RE = /^([a-zA-Z_]\w*)(?:\s+\(([^)]+)\))?\s*$/;
 // Column: name: type [constraints]  or  name [constraints]  or  name: type  or  name
 const COLUMN_RE = /^(\w+)(?:\s*:\s*(\w[\w()]*(?:\s*\[\])?))?(?:\s+\[([^\]]+)\])?\s*$/;
 
+// Indented relationship: 1-* target  or  1-label-* target
+const INDENT_REL_RE = /^([1*?])-(?:(.+)-)?([1*?])\s+([a-zA-Z_]\w*)\s*$/;
+
 // Constraint keywords
 const CONSTRAINT_MAP: Record<string, ERConstraint> = {
   pk: 'pk',
@@ -224,8 +227,27 @@ export function parseERDiagram(
       if (!/\s/.test(key)) continue;
     }
 
-    // Indented lines = columns of current table
+    // Indented lines = columns or relationships of current table
     if (indent > 0 && currentTable) {
+      // Try indented relationship first: 1-* target  or  1-label-* target
+      const indentRel = trimmed.match(INDENT_REL_RE);
+      if (indentRel) {
+        const fromCard = parseCardSide(indentRel[1]);
+        const toCard = parseCardSide(indentRel[3]);
+        if (fromCard && toCard) {
+          const targetName = indentRel[4];
+          getOrCreateTable(targetName, lineNumber);
+          result.relationships.push({
+            source: currentTable.id,
+            target: tableId(targetName),
+            cardinality: { from: fromCard, to: toCard },
+            ...(indentRel[2]?.trim() && { label: indentRel[2].trim() }),
+            lineNumber,
+          });
+        }
+        continue;
+      }
+
       const colMatch = trimmed.match(COLUMN_RE);
       if (colMatch) {
         const colName = colMatch[1];
@@ -332,6 +354,10 @@ export function looksLikeERDiagram(content: string): boolean {
       if (/\[(pk|fk)\]/i.test(trimmed)) {
         hasConstraint = true;
       }
+      // Indented relationship is a strong ER signal
+      if (INDENT_REL_RE.test(trimmed)) {
+        hasRelationship = true;
+      }
     } else {
       // Check for table-like declaration
       if (TABLE_DECL_RE.test(trimmed)) {
@@ -347,8 +373,8 @@ export function looksLikeERDiagram(content: string): boolean {
   // [pk]/[fk] constraint is a strong enough signal
   if (hasConstraint && hasTableDecl) return true;
 
-  // Relationship with table declarations and constraints
-  if (hasRelationship && hasTableDecl && hasConstraint) return true;
+  // Relationship with table declarations is sufficient
+  if (hasRelationship && hasTableDecl) return true;
 
   return false;
 }

package/src/er/renderer.ts

@@ -6,6 +6,7 @@ import * as d3Selection from 'd3-selection';
 import * as d3Shape from 'd3-shape';
 import { FONT_FAMILY } from '../fonts';
 import type { PaletteColors } from '../palettes';
+import { mix } from '../palettes/color-utils';
 import { getSeriesColors } from '../palettes';
 import type { ParsedERDiagram, ERConstraint } from './types';
 import type { ERLayoutResult, ERLayoutNode, ERLayoutEdge } from './layout';
@@ -27,21 +28,6 @@ const MEMBER_LINE_HEIGHT = 18;
 const COMPARTMENT_PADDING_Y = 8;
 const MEMBER_PADDING_X = 10;
 
-// ============================================================
-// Color helpers
-// ============================================================
-
-function mix(a: string, b: string, pct: number): string {
-  const parse = (h: string) => {
-    const r = h.replace('#', '');
-    const f = r.length === 3 ? r[0]+r[0]+r[1]+r[1]+r[2]+r[2] : r;
-    return [parseInt(f.substring(0,2),16), parseInt(f.substring(2,4),16), parseInt(f.substring(4,6),16)];
-  };
-  const [ar,ag,ab] = parse(a), [br,bg,bb] = parse(b), t = pct/100;
-  const c = (x: number, y: number) => Math.round(x*t + y*(1-t)).toString(16).padStart(2,'0');
-  return `#${c(ar,br)}${c(ag,bg)}${c(ab,bb)}`;
-}
-
 // ============================================================
 // Constraint icons (text glyphs for resvg compat)
 // ============================================================

package/src/graph/flowchart-parser.ts

@@ -6,7 +6,6 @@ import type {
   ParsedGraph,
   GraphNode,
   GraphEdge,
-  GraphGroup,
   GraphShape,
   GraphDirection,
 } from './types';
@@ -195,9 +194,9 @@ function parseArrowToken(token: string, palette?: PaletteColors): ArrowInfo {
 }
 
 // ============================================================
-// Group heading pattern
+// Legacy group heading (deprecated — emit error)
 // ============================================================
-const GROUP_HEADING_RE = /^##\s+(.+?)(?:\(([^)]+)\))?\s*$/;
+const LEGACY_GROUP_RE = /^##\s+/;
 
 // ============================================================
 // Main parser
@@ -227,8 +226,6 @@ export function parseFlowchart(
 
   const nodeMap = new Map<string, GraphNode>();
   const indentStack: { nodeId: string; indent: number }[] = [];
-  let currentGroup: GraphGroup | null = null;
-  const groups: GraphGroup[] = [];
   let contentStarted = false;
 
   function getOrCreateNode(ref: NodeRef, lineNumber: number): GraphNode {
@@ -241,16 +238,10 @@ export function parseFlowchart(
       shape: ref.shape,
       lineNumber,
       ...(ref.color && { color: ref.color }),
-      ...(currentGroup && { group: currentGroup.id }),
     };
     nodeMap.set(ref.id, node);
     result.nodes.push(node);
 
-    // Add to current group
-    if (currentGroup && !currentGroup.nodeIds.includes(ref.id)) {
-      currentGroup.nodeIds.push(ref.id);
-    }
-
     return node;
   }
 
@@ -387,23 +378,11 @@ export function parseFlowchart(
     // Skip comments
     if (trimmed.startsWith('//')) continue;
 
-    // Group headings
-    const groupMatch = trimmed.match(GROUP_HEADING_RE);
-    if (groupMatch) {
-      const groupLabel = groupMatch[1].trim();
-      const groupColorName = groupMatch[2]?.trim();
-      const groupColor = groupColorName
-        ? resolveColor(groupColorName, palette)
-        : undefined;
-
-      currentGroup = {
-        id: `group:${groupLabel.toLowerCase()}`,
-        label: groupLabel,
-        nodeIds: [],
-        lineNumber,
-        ...(groupColor && { color: groupColor }),
-      };
-      groups.push(currentGroup);
+    // Legacy ## group headings — no longer supported
+    if (LEGACY_GROUP_RE.test(trimmed)) {
+      result.diagnostics.push(
+        makeDgmoError(lineNumber, '## group syntax is not supported in flowcharts. Remove the ## line.', 'error')
+      );
       continue;
     }
 
@@ -447,8 +426,6 @@ export function parseFlowchart(
     processContentLine(trimmed, lineNumber, indent);
   }
 
-  if (groups.length > 0) result.groups = groups;
-
   // Validation: no nodes found
   if (result.nodes.length === 0 && !result.error) {
     const diag = makeDgmoError(1, 'No nodes found. Add flowchart content with shape syntax like [Process] or (Start).');

package/src/graph/flowchart-renderer.ts

@@ -6,8 +6,9 @@ import * as d3Selection from 'd3-selection';
 import * as d3Shape from 'd3-shape';
 import { FONT_FAMILY } from '../fonts';
 import type { PaletteColors } from '../palettes';
+import { mix } from '../palettes/color-utils';
 import type { ParsedGraph, GraphShape } from './types';
-import type { LayoutResult, LayoutNode, LayoutEdge, LayoutGroup } from './layout';
+import type { LayoutResult, LayoutNode, LayoutEdge } from './layout';
 import { parseFlowchart } from './flowchart-parser';
 import { layoutGraph } from './layout';
 
@@ -19,7 +20,6 @@ const DIAGRAM_PADDING = 20;
 const MAX_SCALE = 3;
 const NODE_FONT_SIZE = 13;
 const EDGE_LABEL_FONT_SIZE = 11;
-const GROUP_LABEL_FONT_SIZE = 11;
 const EDGE_STROKE_WIDTH = 1.5;
 const NODE_STROKE_WIDTH = 1.5;
 const ARROWHEAD_W = 10;
@@ -27,23 +27,11 @@ const ARROWHEAD_H = 7;
 const IO_SKEW = 15;
 const SUBROUTINE_INSET = 8;
 const DOC_WAVE_HEIGHT = 10;
-const GROUP_EXTRA_PADDING = 12;
 
 // ============================================================
-// Color helpers (inline mix to avoid cross-module import issues)
+// Color helpers
 // ============================================================
 
-function mix(a: string, b: string, pct: number): string {
-  const parse = (h: string) => {
-    const r = h.replace('#', '');
-    const f = r.length === 3 ? r[0]+r[0]+r[1]+r[1]+r[2]+r[2] : r;
-    return [parseInt(f.substring(0,2),16), parseInt(f.substring(2,4),16), parseInt(f.substring(4,6),16)];
-  };
-  const [ar,ag,ab] = parse(a), [br,bg,bb] = parse(b), t = pct/100;
-  const c = (x: number, y: number) => Math.round(x*t + y*(1-t)).toString(16).padStart(2,'0');
-  return `#${c(ar,br)}${c(ag,bg)}${c(ab,bb)}`;
-}
-
 function shapeDefaultColor(shape: GraphShape, palette: PaletteColors, isEndTerminal?: boolean, colorOff?: boolean): string {
   if (colorOff) return palette.textMuted;
   switch (shape) {
@@ -53,6 +41,7 @@ function shapeDefaultColor(shape: GraphShape, palette: PaletteColors, isEndTermi
     case 'io':         return palette.colors.purple;
     case 'subroutine': return palette.colors.teal;
     case 'document':   return palette.colors.orange;
+    default:           return palette.colors.blue;
   }
 }
 
@@ -337,48 +326,58 @@ export function renderFlowchart(
     .append('g')
     .attr('transform', `translate(${offsetX}, ${offsetY}) scale(${scale})`);
 
-  // Render groups (background layer)
-  for (const group of layout.groups) {
-    if (group.width === 0 && group.height === 0) continue;
-    const gx = group.x - GROUP_EXTRA_PADDING;
-    const gy = group.y - GROUP_EXTRA_PADDING - GROUP_LABEL_FONT_SIZE - 4;
-    const gw = group.width + GROUP_EXTRA_PADDING * 2;
-    const gh = group.height + GROUP_EXTRA_PADDING * 2 + GROUP_LABEL_FONT_SIZE + 4;
-
-    const fillColor = group.color
-      ? mix(group.color, isDark ? palette.surface : palette.bg, 10)
-      : isDark
-        ? palette.surface
-        : mix(palette.border, palette.bg, 30);
-    const strokeColor = group.color ?? palette.textMuted;
-
-    contentG
-      .append('rect')
-      .attr('x', gx)
-      .attr('y', gy)
-      .attr('width', gw)
-      .attr('height', gh)
-      .attr('rx', 6)
-      .attr('fill', fillColor)
-      .attr('stroke', strokeColor)
-      .attr('stroke-width', 1)
-      .attr('stroke-opacity', 0.5)
-      .attr('class', 'fc-group');
-
-    contentG
-      .append('text')
-      .attr('x', gx + 8)
-      .attr('y', gy + GROUP_LABEL_FONT_SIZE + 4)
-      .attr('fill', strokeColor)
-      .attr('font-size', GROUP_LABEL_FONT_SIZE)
-      .attr('font-weight', 'bold')
-      .attr('opacity', 0.7)
-      .attr('class', 'fc-group-label')
-      .text(group.label);
+  // Compute edge label positions with perpendicular offset to hug their path,
+  // then resolve remaining collisions.
+  const LABEL_CHAR_W = 7;
+  const LABEL_PAD = 8;
+  const LABEL_H = 16;
+  const PERP_OFFSET = 10;
+
+  interface LabelPos { x: number; y: number; w: number; h: number; edgeIdx: number }
+  const labelPositions: LabelPos[] = [];
+
+  for (let ei = 0; ei < layout.edges.length; ei++) {
+    const edge = layout.edges[ei];
+    if (!edge.label || edge.points.length < 2) continue;
+    const midIdx = Math.floor(edge.points.length / 2);
+    const midPt = edge.points[midIdx];
+    const bgW = edge.label.length * LABEL_CHAR_W + LABEL_PAD;
+
+    const prev = edge.points[Math.max(0, midIdx - 1)];
+    const next = edge.points[Math.min(edge.points.length - 1, midIdx + 1)];
+    const dx = next.x - prev.x;
+    const dy = next.y - prev.y;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    let lx = midPt.x;
+    let ly = midPt.y;
+    if (len > 0) {
+      lx += (-dy / len) * PERP_OFFSET;
+      ly += (dx / len) * PERP_OFFSET;
+    }
+
+    labelPositions.push({ x: lx, y: ly, w: bgW, h: LABEL_H, edgeIdx: ei });
+  }
+
+  // Resolve remaining label collisions.
+  labelPositions.sort((a, b) => a.y - b.y);
+  for (let i = 0; i < labelPositions.length; i++) {
+    for (let j = i + 1; j < labelPositions.length; j++) {
+      const a = labelPositions[i];
+      const b = labelPositions[j];
+      const overlapX = Math.abs(a.x - b.x) < (a.w + b.w) / 2;
+      const overlapY = Math.abs(a.y - b.y) < (a.h + b.h) / 2;
+      if (overlapX && overlapY) {
+        b.y = a.y + (a.h + b.h) / 2 + 2;
+      }
+    }
   }
 
+  const labelPosMap = new Map<number, LabelPos>();
+  for (const lp of labelPositions) labelPosMap.set(lp.edgeIdx, lp);
+
   // Render edges (middle layer)
-  for (const edge of layout.edges) {
+  for (let ei = 0; ei < layout.edges.length; ei++) {
+    const edge = layout.edges[ei];
     if (edge.points.length < 2) continue;
     const edgeG = contentG
       .append('g')
@@ -402,21 +401,15 @@ export function renderFlowchart(
         .attr('class', 'fc-edge');
     }
 
-    // Edge label at midpoint
-    if (edge.label) {
-      const midIdx = Math.floor(edge.points.length / 2);
-      const midPt = edge.points[midIdx];
-
-      // Background rect for legibility
-      const labelLen = edge.label.length;
-      const bgW = labelLen * 7 + 8;
-      const bgH = 16;
+    // Edge label with collision-resolved position
+    const lp = labelPosMap.get(ei);
+    if (edge.label && lp) {
       edgeG
         .append('rect')
-        .attr('x', midPt.x - bgW / 2)
-        .attr('y', midPt.y - bgH / 2 - 1)
-        .attr('width', bgW)
-        .attr('height', bgH)
+        .attr('x', lp.x - lp.w / 2)
+        .attr('y', lp.y - lp.h / 2 - 1)
+        .attr('width', lp.w)
+        .attr('height', lp.h)
         .attr('rx', 3)
         .attr('fill', palette.bg)
         .attr('opacity', 0.85)
@@ -424,8 +417,8 @@ export function renderFlowchart(
 
       edgeG
         .append('text')
-        .attr('x', midPt.x)
-        .attr('y', midPt.y + 4)
+        .attr('x', lp.x)
+        .attr('y', lp.y + 4)
         .attr('text-anchor', 'middle')
         .attr('fill', edgeColor)
         .attr('font-size', EDGE_LABEL_FONT_SIZE)