@diagrammo/dgmo 0.32.1 → 0.34.0

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

@@ -22,6 +22,8 @@ import {
   type BLLayoutEdge,
 } from './layout';
 import { layeredCandidates } from './layout-layered';
+import { groupedTierCandidates } from './layout-grouped';
+import { measureEdgeLabel, EDGE_LABEL_FONT_SIZE } from './label-placement';
 
 type Pt = { x: number; y: number };
 
@@ -916,9 +918,14 @@ export async function layoutBoxesAndLinesSearch(
      *  indicator. Omit it (CLI/export) and the search runs straight through with
      *  no added latency. */
     onProgress?: (done: number, total: number, phase: string) => void;
+    /** Last-resort label legibility: reserve dagre label space for every labeled
+     *  edge so the layout opens a gap wide enough for the (wrapped) label. Only
+     *  set by layout.ts when steps 1–2 left a label overlapping a node box. */
+    reserveEdgeLabels?: boolean;
   }
 ): Promise<BLLayoutResult> {
   const hideDescriptions = opts?.hideDescriptions ?? false;
+  const reserveEdgeLabels = opts?.reserveEdgeLabels ?? false;
   const onProgress = opts?.onProgress;
   // Yield to a macrotask (lets the browser repaint between heavy placements);
   // no-op when there's no progress observer so non-interactive callers pay
@@ -1322,8 +1329,16 @@ export async function layoutBoxesAndLinesSearch(
     for (const e of ord(parsed.edges)) {
       const s = srcRep(e.source);
       const t = tgtRep(e.target);
-      if (s !== t && g.hasNode(s) && g.hasNode(t))
-        g.setEdge(s, t, {}, edgeKey(e));
+      if (s !== t && g.hasNode(s) && g.hasNode(t)) {
+        // Last-resort label legibility: reserve a virtual label node on the edge
+        // so dagre widens the rank gap to fit the (wrapped) label.
+        let edgeLabel: object = {};
+        if (reserveEdgeLabels && e.label) {
+          const m = measureEdgeLabel(e.label, EDGE_LABEL_FONT_SIZE);
+          edgeLabel = { width: m.width, height: m.height, labelpos: 'c' };
+        }
+        g.setEdge(s, t, edgeLabel, edgeKey(e));
+      }
     }
     dagre.layout(g);
 
@@ -1528,6 +1543,21 @@ export async function layoutBoxesAndLinesSearch(
     /* ignore */
   }
 
+  // Tier-banded grouped candidates. The dagre path treats `[Group]` containers
+  // as compound clusters with no tier ORDER and no cycle-aware routing, so
+  // tiered architecture diagrams collide bands side-by-side and balloon on
+  // back-edges. This generator orders the groups into disjoint rank bands and
+  // routes against-tier edges around the periphery. Additive — kept only on a
+  // strict badness win. Skipped when any group is collapsed (the generator
+  // models fully-expanded groups only).
+  if (parsed.groups.length > 0 && collapsedGroupLabels.size === 0) {
+    try {
+      layered = layered.concat(groupedTierCandidates(parsed, sizes));
+    } catch {
+      /* ignore */
+    }
+  }
+
   // Stage 1: rank the dagre pool with the cheap straight-segment counter — a
   // cheap proxy to pick which candidates are worth the expensive exact scoring.
   // Widen REFINE_K a little since the proxy only sees crossings, not O/P.
@@ -1536,7 +1566,8 @@ export async function layoutBoxesAndLinesSearch(
   // for both operands on every comparison (O(C log C) calls vs C). The score is a
   // pure function of the layout, so the resulting order is identical.
   const fastKey = new Map<BLLayoutResult, number>();
-  for (const lay of pool) fastKey.set(lay, objective(lay, countCrossingsFast(lay)));
+  for (const lay of pool)
+    fastKey.set(lay, objective(lay, countCrossingsFast(lay)));
   pool.sort((a, b) => fastKey.get(a)! - fastKey.get(b)!);
   const refineK = Math.min(REFINE_K, pool.length);
 

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

@@ -9,6 +9,7 @@
 
 import type { ParsedBoxesAndLines, BLNode, BLGroup } from './types';
 import { measureText, wrapTextToWidth } from '../utils/text-measure';
+import { placeEdgeLabels } from './label-placement';
 import {
   resolveNotes,
   buildPlacedNotes,
@@ -58,8 +59,14 @@ export interface BLLayoutEdge {
   readonly bidirectional: boolean;
   readonly lineNumber: number;
   readonly points: ReadonlyArray<{ readonly x: number; readonly y: number }>;
+  /** Centre of the label box (set by label-placement). */
   readonly labelX?: number;
   readonly labelY?: number;
+  /** Wrapped label box dimensions + lines (set by label-placement; the renderer
+   *  draws the halo + tspans straight from these). */
+  readonly labelWidth?: number;
+  readonly labelHeight?: number;
+  readonly labelLines?: readonly string[];
   readonly yOffset: number;
   readonly parallelCount: number;
   readonly metadata: Readonly<Record<string, string>>;
@@ -205,7 +212,7 @@ export async function layoutBoxesAndLines(
   }
 ): Promise<BLLayoutResult> {
   const { layoutBoxesAndLinesSearch } = await import('./layout-search');
-  const searched = await layoutBoxesAndLinesSearch(parsed, collapseInfo, {
+  const searchOpts = {
     ...(layoutOptions?.hideDescriptions !== undefined && {
       hideDescriptions: layoutOptions.hideDescriptions,
     }),
@@ -215,14 +222,31 @@ export async function layoutBoxesAndLines(
     ...(layoutOptions?.onProgress !== undefined && {
       onProgress: layoutOptions.onProgress,
     }),
-  });
-  // Engine-agnostic post-processing: fan parallel edges, then float notes
-  // (and shift the canvas to fit them).
-  return attachNotes(
-    applyParallelEdgeOffsets(searched),
+  };
+  const searched = await layoutBoxesAndLinesSearch(
     parsed,
-    layoutOptions?.collapsedNotes
+    collapseInfo,
+    searchOpts
   );
+
+  // Edge-label legibility (priority ladder): wrap + reposition labels on the
+  // chosen layout. If any label still can't clear a node box, escalate ONCE to a
+  // label-aware relayout that reserves dagre label space so a gap opens — and
+  // keep it only if it actually resolves more labels.
+  let placed = placeEdgeLabels(applyParallelEdgeOffsets(searched));
+  if (placed.unresolved.length > 0) {
+    const relaid = await layoutBoxesAndLinesSearch(parsed, collapseInfo, {
+      ...searchOpts,
+      reserveEdgeLabels: true,
+    });
+    const relaidPlaced = placeEdgeLabels(applyParallelEdgeOffsets(relaid));
+    if (relaidPlaced.unresolved.length < placed.unresolved.length)
+      placed = relaidPlaced;
+  }
+
+  // Engine-agnostic post-processing: float notes (and shift the canvas to fit
+  // them) on the label-placed layout.
+  return attachNotes(placed.layout, parsed, layoutOptions?.collapsedNotes);
 }
 
 /**
@@ -312,6 +336,7 @@ function attachNotes(
         points: e.points.map((pt) => ({ x: pt.x + shiftX, y: pt.y + shiftY })),
         ...(e.labelX !== undefined && { labelX: e.labelX + shiftX }),
         ...(e.labelY !== undefined && { labelY: e.labelY + shiftY }),
+        // labelWidth/labelHeight/labelLines are shift-invariant — carried via spread.
       }))
     : layout.edges;
   const finalGroups = shifted

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

@@ -21,6 +21,7 @@ import {
   stripDefaultModifier,
   finalizeAutoTagColors,
   AUTO_TAG_COLOR_SENTINEL,
+  tagAttrKey,
 } from '../utils/tag-groups';
 import type { TagGroup } from '../utils/tag-groups';
 import type { Writable } from '../utils/brand';
@@ -399,12 +400,12 @@ export function parseBoxesAndLines(
       if (tagBlockMatch.alias) {
         metaAliasMap.set(
           normalizeName(tagBlockMatch.alias),
-          tagBlockMatch.name.toLowerCase()
+          tagAttrKey(tagBlockMatch.name)
         );
       }
       metaAliasMap.set(
         normalizeName(tagBlockMatch.name),
-        tagBlockMatch.name.toLowerCase()
+        tagAttrKey(tagBlockMatch.name)
       );
       if (tagBlockMatch.inlineValues) {
         for (const rawVal of tagBlockMatch.inlineValues) {

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

@@ -78,7 +78,6 @@ const GROUP_LABEL_ZONE = 32;
 const RAMP_FLOOR = 15;
 const VALUE_FONT_SIZE = 11;
 
-type D3G = d3Selection.Selection<SVGGElement, unknown, null, undefined>;
 type D3Svg = d3Selection.Selection<SVGSVGElement, unknown, null, undefined>;
 
 // ── Edge path generators ───────────────────────────────────
@@ -352,78 +351,6 @@ function ensureArrowMarkers(
   }
 }
 
-// ── Edge label placement ───────────────────────────────────
-
-/** Point at the half-way arc length along an edge polyline — the geometric
- *  centre of the connector, so a label sits in the gap BETWEEN the two nodes
- *  (ELK's own label anchor drifts toward the target and ends up clipped under
- *  it). Falls back gracefully for degenerate point lists. */
-function edgePolylineMidpoint(
-  points: ReadonlyArray<{ readonly x: number; readonly y: number }>
-): { x: number; y: number } {
-  if (points.length === 0) return { x: 0, y: 0 };
-  if (points.length === 1) return { x: points[0]!.x, y: points[0]!.y };
-  let total = 0;
-  const segLen: number[] = [];
-  for (let k = 1; k < points.length; k++) {
-    const len = Math.hypot(
-      points[k]!.x - points[k - 1]!.x,
-      points[k]!.y - points[k - 1]!.y
-    );
-    segLen.push(len);
-    total += len;
-  }
-  let half = total / 2;
-  for (let k = 1; k < points.length; k++) {
-    const len = segLen[k - 1]!;
-    if (half <= len || k === points.length - 1) {
-      const t = len === 0 ? 0 : Math.min(1, half / len);
-      return {
-        x: points[k - 1]!.x + (points[k]!.x - points[k - 1]!.x) * t,
-        y: points[k - 1]!.y + (points[k]!.y - points[k - 1]!.y) * t,
-      };
-    }
-    half -= len;
-  }
-  const last = points[points.length - 1]!;
-  return { x: last.x, y: last.y };
-}
-
-// ── Edge label overlap resolution ──────────────────────────
-
-function resolveEdgeLabelOverlaps(
-  labels: { x: number; y: number; width: number; height: number }[]
-): void {
-  const MAX_PASSES = 8;
-  const PAD = 4;
-  for (let pass = 0; pass < MAX_PASSES; pass++) {
-    let moved = false;
-    for (let i = 0; i < labels.length; i++) {
-      for (let j = i + 1; j < labels.length; j++) {
-        // In-bounds by loop guard.
-        const a = labels[i]!;
-        const b = labels[j]!;
-        const dx = Math.abs(a.x - b.x);
-        const dy = Math.abs(a.y - b.y);
-        const overlapX = (a.width + b.width) / 2 + PAD - dx;
-        const overlapY = (a.height + b.height) / 2 + PAD - dy;
-        if (overlapX > 0 && overlapY > 0) {
-          const shift = overlapY / 2 + 1;
-          if (a.y < b.y) {
-            a.y -= shift;
-            b.y += shift;
-          } else {
-            a.y += shift;
-            b.y -= shift;
-          }
-          moved = true;
-        }
-      }
-    }
-    if (!moved) break;
-  }
-}
-
 // ── Main render function ───────────────────────────────────
 
 interface BLRenderOptions {
@@ -847,18 +774,8 @@ export function renderBoxesAndLines(
   }
 
   // ── Render edges ───────────────────────────────────────
-  // Collect label positions for overlap resolution
-  const labelPositions: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    idx: number;
-  }[] = [];
-
-  // Store edge group elements for label pass
-  const edgeGroups = new Map<number, D3G>();
-
+  // Edge labels are placed in layout (label-placement.ts) and drawn AFTER the
+  // node loop (see the bl-edge-labels layer) so boxes never clip them.
   for (let i = 0; i < layout.edges.length; i++) {
     // In-bounds by loop guard.
     const le = layout.edges[i]!;
@@ -885,7 +802,6 @@ export function renderBoxesAndLines(
           .append('g')
           .attr('class', 'bl-edge-group')
           .attr('data-line-number', String(le.lineNumber));
-        edgeGroups.set(i, edgeG as unknown as D3G);
 
         const markerId = `bl-arrow-${color.replace('#', '')}`;
         const cx = nodeLayout.x;
@@ -950,7 +866,6 @@ export function renderBoxesAndLines(
       .append('g')
       .attr('class', 'bl-edge-group')
       .attr('data-line-number', String(le.lineNumber));
-    edgeGroups.set(i, edgeG as unknown as D3G);
 
     const markerId = `bl-arrow-${color.replace('#', '')}`;
     const gen = le.straight
@@ -971,58 +886,6 @@ export function renderBoxesAndLines(
       const revId = `bl-arrow-rev-${color.replace('#', '')}`;
       path.attr('marker-start', `url(#${revId})`);
     }
-
-    // Edge label — centred on the connector's polyline midpoint (the gap
-    // between the two nodes), NOT ELK's target-biased anchor. For parallel
-    // edges, nudge above/below so each line's label clears the line.
-    if (le.label && le.points.length > 0) {
-      const lw = measureText(le.label, sEdgeLabelFontSize);
-      const labelH = sEdgeLabelFontSize + 6;
-      const mid = edgePolylineMidpoint(le.points);
-      let ly = mid.y;
-      if (le.parallelCount > 1 && le.yOffset !== 0) {
-        ly += (le.yOffset < 0 ? -labelH : labelH) * 0.5;
-      }
-      labelPositions.push({
-        x: mid.x,
-        y: ly,
-        width: lw + 8,
-        height: labelH,
-        idx: i,
-      });
-    }
-  }
-
-  // Resolve overlaps
-  resolveEdgeLabelOverlaps(labelPositions);
-
-  // Render edge labels into their edge groups
-  for (const lp of labelPositions) {
-    // In-bounds: lp.idx was set from a valid index into layout.edges above.
-    const le = layout.edges[lp.idx]!;
-    if (!le.label) continue;
-
-    const edgeG = edgeGroups.get(lp.idx);
-    const target = edgeG ?? diagramG;
-
-    target
-      .append('rect')
-      .attr('x', lp.x - lp.width / 2)
-      .attr('y', lp.y - lp.height / 2)
-      .attr('width', lp.width)
-      .attr('height', lp.height)
-      .attr('rx', 3)
-      .attr('fill', palette.bg)
-      .attr('opacity', 0.85);
-
-    target
-      .append('text')
-      .attr('x', lp.x)
-      .attr('y', lp.y + sEdgeLabelFontSize / 3)
-      .attr('text-anchor', 'middle')
-      .attr('font-size', sEdgeLabelFontSize)
-      .attr('fill', palette.textMuted)
-      .text(le.label);
   }
 
   // ── Render nodes ───────────────────────────────────────
@@ -1396,6 +1259,71 @@ export function renderBoxesAndLines(
     }
   }
 
+  // ── Render edge labels ─────────────────────────────────
+  // Drawn AFTER nodes (and groups) so the halo + text always paint on top and
+  // are never clipped by a box. Positions/wrapping come from label-placement
+  // (layout); this is a pure consumer. Labels stay in their own layer rather
+  // than inside each edge group, but carry data-line-number so line-hover/click
+  // still highlights the matching label.
+  const labelLayer = diagramG.append('g').attr('class', 'bl-edge-labels');
+  const labelLineHeight = sEdgeLabelFontSize * 1.3;
+  for (const le of layout.edges) {
+    if (!le.labelLines || le.labelLines.length === 0) continue;
+    if (le.labelX === undefined || le.labelY === undefined) continue;
+    const lx = le.labelX;
+    const ly = le.labelY;
+
+    // Honour the same tag-value hiding as the edges themselves.
+    if (hidden.size > 0) {
+      let isHidden = false;
+      for (const [groupKey, hiddenVals] of hidden) {
+        const val = le.metadata[groupKey];
+        if (val && hiddenVals.has(val.toLowerCase())) {
+          isHidden = true;
+          break;
+        }
+      }
+      if (isHidden) continue;
+    }
+
+    const lw = le.labelWidth ?? 0;
+    const lh = le.labelHeight ?? sEdgeLabelFontSize + 6;
+    const lines = le.labelLines;
+    const labelG = labelLayer
+      .append('g')
+      .attr('class', 'bl-edge-label')
+      .attr('data-line-number', String(le.lineNumber));
+
+    labelG
+      .append('rect')
+      .attr('x', lx - lw / 2)
+      .attr('y', ly - lh / 2)
+      .attr('width', lw)
+      .attr('height', lh)
+      .attr('rx', 3)
+      .attr('fill', palette.bg)
+      // No border; semi-transparent so the line stays faintly visible behind the
+      // label while the (full-opacity) text on top stays crisp.
+      .attr('opacity', 0.72);
+
+    const text = labelG
+      .append('text')
+      .attr('x', lx)
+      .attr('text-anchor', 'middle')
+      .attr('font-family', FONT_FAMILY)
+      .attr('font-size', sEdgeLabelFontSize)
+      .attr('fill', palette.textMuted);
+    const firstY =
+      ly - ((lines.length - 1) / 2) * labelLineHeight + sEdgeLabelFontSize / 3;
+    lines.forEach((line, k) => {
+      text
+        .append('tspan')
+        .attr('x', lx)
+        .attr('y', firstY + k * labelLineHeight)
+        .text(line);
+    });
+  }
+
   // ── Render legend ──────────────────────────────────────
   const hasDescriptions = parsed.nodes.some(
     (n) => n.description && n.description.length > 0

package/src/c4/layout.ts

@@ -2,6 +2,7 @@
 // C4 Context Diagram Layout Engine (dagre)
 // ============================================================
 
+import { tagAttrKey } from '../utils/tag-groups';
 import dagre from '@dagrejs/dagre';
 import type {
   ParsedC4,
@@ -619,7 +620,7 @@ function resolveNodeColor(
     (g) => g.name.toLowerCase() === activeGroupName.toLowerCase()
   );
   if (!group) return undefined;
-  const key = group.name.toLowerCase();
+  const key = tagAttrKey(group.name);
   // Walk inheritance chain: element → ancestors (container → system)
   let metaValue: string | undefined = el.metadata[key];
   if (!metaValue && ancestors) {

package/src/c4/parser.ts

@@ -24,6 +24,7 @@ import {
   validateTagGroupNames,
   finalizeAutoTagColors,
   AUTO_TAG_COLOR_SENTINEL,
+  tagAttrKey,
 } from '../utils/tag-groups';
 import { inferParticipantType } from '../sequence/participant-inference';
 import {
@@ -416,12 +417,12 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
       if (tagBlockMatch.alias) {
         metaAliasMap.set(
           normalizeName(tagBlockMatch.alias),
-          tagBlockMatch.name.toLowerCase()
+          tagAttrKey(tagBlockMatch.name)
         );
       }
       metaAliasMap.set(
         normalizeName(tagBlockMatch.name),
-        tagBlockMatch.name.toLowerCase()
+        tagAttrKey(tagBlockMatch.name)
       );
       result.tagGroups.push(currentTagGroup);
       continue;

package/src/c4/renderer.ts

@@ -2,6 +2,7 @@
 // C4 Context Diagram SVG Renderer
 // ============================================================
 
+import { tagAttrKey } from '../utils/tag-groups';
 import * as d3Selection from 'd3-selection';
 import * as d3Shape from 'd3-shape';
 import { FONT_FAMILY } from '../fonts';
@@ -432,7 +433,7 @@ export function renderC4Context(
       .attr('data-node-id', node.id);
 
     if (activeTagGroup) {
-      const tagKey = activeTagGroup.toLowerCase();
+      const tagKey = tagAttrKey(activeTagGroup);
       const tagValue = node.metadata[tagKey];
       if (tagValue) {
         nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());
@@ -1517,7 +1518,7 @@ export function renderC4Containers(
       .attr('data-node-id', node.id);
 
     if (activeTagGroup) {
-      const tagKey = activeTagGroup.toLowerCase();
+      const tagKey = tagAttrKey(activeTagGroup);
       const tagValue = node.metadata[tagKey];
       if (tagValue) {
         nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());

package/src/cli.ts

@@ -26,6 +26,8 @@ import {
 } from './migrate';
 import { migrateEmbedded } from './migrate/embedded';
 import { renderBanner } from './cli-banner';
+import { searchMapLocations } from './map/completion';
+import { loadMapData } from './map/load-data';
 
 // Derived from the palette registry so new palettes are auto-included.
 const PALETTES = getAvailablePalettes().map((p) => p.id);
@@ -470,6 +472,7 @@ function printHelp(): void {
        cat input.dgmo | dgmo [options]
        dgmo cat <file>          Display file with syntax highlighting
        dgmo migrate <path>      Convert legacy "|" metadata to §1.4 grammar
+       dgmo map search <query>  Find the map place token (city or IATA code)
 
 Render a .dgmo file to PNG (default) or SVG.
 
@@ -859,6 +862,66 @@ async function runMigrateCommand(args: string[]): Promise<void> {
   }
 }
 
+// `dgmo map search <query>` — discover the exact place token the map resolver
+// expects (city name or bundled IATA airport code), so authors never guess
+// (e.g. "New York" → `New York City`; "kennedy" → `JFK`). Searches cities +
+// the bundled airport set; `--json` for machine output, `--limit N` to widen.
+async function runMapCommand(args: string[]): Promise<void> {
+  const sub = args[0];
+  const json = args.includes('--json');
+  const limFlag = args.indexOf('--limit');
+  const limit =
+    limFlag >= 0 ? Math.max(1, Number(args[limFlag + 1]) || 20) : 20;
+  // The query is the positional args (allow unquoted multi-word: `... New York`).
+  const query = args
+    .slice(1)
+    .filter(
+      (a, i, arr) =>
+        a !== '--json' && a !== '--limit' && arr[i - 1] !== '--limit'
+    )
+    .join(' ')
+    .trim();
+
+  if (sub !== 'search' || !query) {
+    console.log('Usage: dgmo map search <query> [--json] [--limit N]');
+    console.log(
+      '  Find the place token the map resolver expects (city or IATA airport code).'
+    );
+    console.log('  Examples:');
+    console.log(
+      '    dgmo map search "new york"     # → New York City (+ JFK/LGA/EWR airports)'
+    );
+    console.log('    dgmo map search kennedy        # → JFK by airport name');
+    console.log('    dgmo map search heathrow --json');
+    if (sub === 'search' && !query) process.exitCode = 1;
+    return;
+  }
+
+  const data = await loadMapData();
+  const results = searchMapLocations(query, data.gazetteer, {
+    limit,
+    ...(data.airports && { airports: data.airports }),
+  });
+
+  if (json) {
+    process.stdout.write(JSON.stringify({ query, results }, null, 2) + '\n');
+    return;
+  }
+  if (!results.length) {
+    console.log(
+      `No cities or airports match "${query}". Use coordinates: poi Name as <lat,lng>`
+    );
+    return;
+  }
+  console.log(
+    `Places matching "${query}" — use the token column in your DGMO:`
+  );
+  for (const r of results) {
+    const tag = r.kind === 'airport' ? '✈' : '•';
+    console.log(`  ${tag} ${r.token.padEnd(22)} ${r.detail}`);
+  }
+}
+
 async function main(): Promise<void> {
   // Subcommand dispatch — `dgmo migrate` is parsed independently from
   // the rendering flags so its surface doesn't pollute `parseArgs`.
@@ -867,6 +930,11 @@ async function main(): Promise<void> {
     return;
   }
 
+  if (process.argv[2] === 'map') {
+    await runMapCommand(process.argv.slice(3));
+    return;
+  }
+
   const opts = parseArgs(process.argv);
 
   if (opts.help) {

package/src/er/parser.ts

@@ -31,6 +31,7 @@ import {
   stripDefaultModifier,
   finalizeAutoTagColors,
   AUTO_TAG_COLOR_SENTINEL,
+  tagAttrKey,
 } from '../utils/tag-groups';
 import type { TagGroup } from '../utils/tag-groups';
 import { tryCollectNote, resolveNotes, type DiagramNote } from '../utils/notes';
@@ -608,7 +609,7 @@ export function parseERDiagram(
     // Inject defaults for tables without explicit tags
     for (const group of result.tagGroups) {
       if (!group.defaultValue) continue;
-      const key = group.name.toLowerCase();
+      const key = tagAttrKey(group.name);
       for (const table of result.tables) {
         if (!table.metadata[key]) {
           const mutableMeta = tableMetadataMap.get(table.id);

package/src/er/renderer.ts

@@ -2,6 +2,7 @@
 // ER Diagram SVG Renderer
 // ============================================================
 
+import { tagAttrKey } from '../utils/tag-groups';
 import * as d3Selection from 'd3-selection';
 import * as d3Shape from 'd3-shape';
 import { FONT_FAMILY } from '../fonts';
@@ -455,7 +456,7 @@ export function renderERDiagram(
 
     // Set data-tag-* attributes for legend hover
     if (activeTagGroup) {
-      const tagKey = activeTagGroup.toLowerCase();
+      const tagKey = tagAttrKey(activeTagGroup);
       const tagValue = node.metadata[tagKey];
       if (tagValue) {
         nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());

package/src/gantt/parser.ts

@@ -25,6 +25,7 @@ import {
   emitTagLegacyDiagnostic,
   stripDefaultModifier,
   validateTagGroupNames,
+  tagAttrKey,
 } from '../utils/tag-groups';
 import {
   measureIndent,
@@ -814,13 +815,10 @@ export function parseGantt(
       if (tagMatch.alias) {
         metaAliasMap.set(
           normalizeName(tagMatch.alias),
-          tagMatch.name.toLowerCase()
+          tagAttrKey(tagMatch.name)
         );
       }
-      metaAliasMap.set(
-        normalizeName(tagMatch.name),
-        tagMatch.name.toLowerCase()
-      );
+      metaAliasMap.set(normalizeName(tagMatch.name), tagAttrKey(tagMatch.name));
       continue;
     }