@diagrammo/dgmo 0.7.3 → 0.8.0

package/package.json

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

package/src/c4/layout.ts

@@ -4,7 +4,8 @@
 
 import dagre from '@dagrejs/dagre';
 import type { ParsedC4, C4Element, C4Relationship, C4ArrowType, C4Shape, C4DeploymentNode } from './types';
-import type { OrgTagGroup } from '../org/parser';
+import type { TagGroup } from '../utils/tag-groups';
+import { LEGEND_PILL_FONT_SIZE, LEGEND_ENTRY_FONT_SIZE, measureLegendText } from '../utils/legend-constants';
 
 // ============================================================
 // Types
@@ -94,12 +95,8 @@ const GROUP_BOUNDARY_PAD = 24;
 
 // Legend constants (match org)
 const LEGEND_HEIGHT = 28;
-const LEGEND_PILL_FONT_SIZE = 11;
-const LEGEND_PILL_FONT_W = LEGEND_PILL_FONT_SIZE * 0.6;
 const LEGEND_PILL_PAD = 16;
 const LEGEND_DOT_R = 4;
-const LEGEND_ENTRY_FONT_SIZE = 10;
-const LEGEND_ENTRY_FONT_W = LEGEND_ENTRY_FONT_SIZE * 0.6;
 const LEGEND_ENTRY_DOT_GAP = 4;
 const LEGEND_ENTRY_TRAIL = 8;
 const LEGEND_CAPSULE_PAD = 4;
@@ -530,7 +527,7 @@ export function rollUpContextRelationships(parsed: ParsedC4): ContextRelationshi
 
 function resolveNodeColor(
   el: C4Element,
-  tagGroups: OrgTagGroup[],
+  tagGroups: TagGroup[],
   activeGroupName: string | null,
   ancestors?: C4Element[]
 ): string | undefined {
@@ -661,7 +658,7 @@ export function computeC4NodeDimensions(
 // Legend Helpers
 // ============================================================
 
-function computeLegendGroups(tagGroups: OrgTagGroup[]): C4LegendGroup[] {
+function computeLegendGroups(tagGroups: TagGroup[]): C4LegendGroup[] {
   const result: C4LegendGroup[] = [];
 
   for (const group of tagGroups) {
@@ -672,13 +669,13 @@ function computeLegendGroups(tagGroups: OrgTagGroup[]): C4LegendGroup[] {
     if (entries.length === 0) continue;
 
     // Compute pill width: group name + entries
-    const nameW = group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD * 2;
+    const nameW = measureLegendText(group.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD * 2;
     let capsuleW = LEGEND_CAPSULE_PAD;
     for (const e of entries) {
       capsuleW +=
         LEGEND_DOT_R * 2 +
         LEGEND_ENTRY_DOT_GAP +
-        e.value.length * LEGEND_ENTRY_FONT_W +
+        measureLegendText(e.value, LEGEND_ENTRY_FONT_SIZE) +
         LEGEND_ENTRY_TRAIL;
     }
     capsuleW += LEGEND_CAPSULE_PAD;

package/src/c4/parser.ts

@@ -12,9 +12,8 @@ import {
   extractColor,
   parsePipeMetadata,
   MULTIPLE_PIPE_WARNING,
-  CHART_TYPE_RE,
-  TITLE_RE,
-  OPTION_RE,
+  parseFirstLine,
+  OPTION_NOCOLON_RE,
 } from '../utils/parsing';
 import type {
   ParsedC4,
@@ -39,23 +38,26 @@ const ELEMENT_RE = /^(person|system|container|component)\s+(.+)$/i;
 /** Matches `is a <shape>` in the element name portion */
 const IS_A_RE = /\s+is\s+a(?:n)?\s+(\w+)\s*$/i;
 
+/** Matches `Name is a <type>` declarations (new preferred syntax) */
+const C4_IS_A_RE = /^([^:]+?)\s+is\s+an?\s+(person|system|container|component|external|database)\b(.*)$/i;
+
 /** Matches relationship arrows: `->`, `~>`, `<->`, `<~>` */
-const RELATIONSHIP_RE = /^(<?-?>|<?~?>)\s+(.+)$/;
+const RELATIONSHIP_RE = /^(<?-?>|<?~?>)\s*(.+)$/;
 
 /** Labeled arrow relationships: -label->, ~label~>, <-label->, <~label~> */
-const C4_LABELED_SYNC_RE = /^-(.+)->\s+(.+)$/;
-const C4_LABELED_ASYNC_RE = /^~(.+)~>\s+(.+)$/;
-const C4_LABELED_BIDI_SYNC_RE = /^<-(.+)->\s+(.+)$/;
-const C4_LABELED_BIDI_ASYNC_RE = /^<~(.+)~>\s+(.+)$/;
+const C4_LABELED_SYNC_RE = /^-(.+)->\s*(.+)$/;
+const C4_LABELED_ASYNC_RE = /^~(.+)~>\s*(.+)$/;
+const C4_LABELED_BIDI_SYNC_RE = /^<-(.+)->\s*(.+)$/;
+const C4_LABELED_BIDI_ASYNC_RE = /^<~(.+)~>\s*(.+)$/;
 
-/** Matches section headers: `containers:`, `components:`, `deployment:` */
-const SECTION_HEADER_RE = /^(containers|components|deployment)\s*:\s*$/i;
+/** Matches section headers: `containers`, `components`, `deployment` (bare keyword) */
+const SECTION_HEADER_RE = /^(containers|components|deployment)\s*$/i;
 
 /** Matches `container X` references inside deployment nodes */
 const CONTAINER_REF_RE = /^container\s+(.+)$/i;
 
-/** Matches indented metadata: `key: value` */
-const METADATA_RE = /^([^:]+):\s*(.+)$/;
+/** Matches indented metadata: `key value` (space-separated, no colon) */
+const METADATA_RE = /^([a-z][a-z0-9-]*)\s+(.+)$/i;
 
 // ============================================================
 // Helpers
@@ -78,6 +80,12 @@ const VALID_SHAPES = new Set<string>([
   'external',
 ]);
 
+/** Known top-level option keys for C4 diagrams. */
+const KNOWN_C4_OPTIONS = new Set<string>([
+  'layout',
+  'direction',
+]);
+
 const ALL_CHART_TYPES = [
   'c4',
   'org',
@@ -143,35 +151,6 @@ function parseArrowType(arrow: string): C4ArrowType | null {
   }
 }
 
-/** Parse relationship label and optional [technology] annotation. */
-function parseRelationshipBody(
-  body: string,
-): { target: string; label?: string; technology?: string } {
-  // Format: `Target: label [tech]` or `Target: label` or `Target`
-  const colonIdx = body.indexOf(':');
-  let target: string;
-  let rest: string;
-
-  if (colonIdx > 0) {
-    target = body.substring(0, colonIdx).trim();
-    rest = body.substring(colonIdx + 1).trim();
-  } else {
-    target = body.trim();
-    rest = '';
-  }
-
-  if (!rest) return { target };
-
-  // Extract [technology] from end of rest
-  const techMatch = rest.match(/\[([^\]]+)\]\s*$/);
-  if (techMatch) {
-    const label = rest.substring(0, techMatch.index!).trim() || undefined;
-    return { target, label, technology: techMatch[1].trim() };
-  }
-
-  return { target, label: rest };
-}
-
 
 // ============================================================
 // Stack entry types
@@ -280,28 +259,21 @@ export function parseC4(
 
     // --- Header phase ---
 
-    // chart: type
-    if (!contentStarted) {
-      const chartMatch = trimmed.match(CHART_TYPE_RE);
-      if (chartMatch) {
-        const chartType = chartMatch[1].trim().toLowerCase();
-        if (chartType !== 'c4') {
-          let msg = `Expected chart type "c4", got "${chartType}"`;
-          const hint = suggest(chartType, ALL_CHART_TYPES);
+    // First line: `c4` or `c4 My Title`
+    if (!contentStarted && !sawChartType) {
+      const firstLine = parseFirstLine(trimmed);
+      if (firstLine) {
+        if (firstLine.chartType !== 'c4') {
+          let msg = `Expected chart type "c4", got "${firstLine.chartType}"`;
+          const hint = suggest(firstLine.chartType, ALL_CHART_TYPES);
           if (hint) msg += `. ${hint}`;
           return fail(lineNumber, msg);
         }
         sawChartType = true;
-        continue;
-      }
-    }
-
-    // title: value
-    if (!contentStarted) {
-      const titleMatch = trimmed.match(TITLE_RE);
-      if (titleMatch) {
-        result.title = titleMatch[1].trim();
-        result.titleLineNumber = lineNumber;
+        if (firstLine.title) {
+          result.title = firstLine.title;
+          result.titleLineNumber = lineNumber;
+        }
         continue;
       }
     }
@@ -315,7 +287,8 @@ export function parseC4(
         continue;
       }
       if (tagBlockMatch.deprecated) {
-        pushError(lineNumber, `'## ${tagBlockMatch.name}' is deprecated for tag groups — use 'tag: ${tagBlockMatch.name}' instead`, 'warning');
+        pushError(lineNumber, `'## ${tagBlockMatch.name}' is no longer supported — use 'tag: ${tagBlockMatch.name}' instead`);
+        continue;
       }
       currentTagGroup = {
         name: tagBlockMatch.name,
@@ -330,27 +303,23 @@ export function parseC4(
       continue;
     }
 
-    // Generic header options
+    // Generic header options (space-separated: `key value`)
     if (!contentStarted && !currentTagGroup && measureIndent(line) === 0) {
-      const optMatch = trimmed.match(OPTION_RE);
+      const optMatch = trimmed.match(OPTION_NOCOLON_RE);
       if (optMatch) {
         const key = optMatch[1].trim().toLowerCase();
-        if (key !== 'chart' && key !== 'title') {
+        if (KNOWN_C4_OPTIONS.has(key)) {
           result.options[key] = optMatch[2].trim();
           continue;
         }
       }
     }
 
-    // Tag group entries
+    // Tag group entries — first entry is the default (no `default` keyword)
     if (currentTagGroup && !contentStarted) {
       const indent = measureIndent(line);
       if (indent > 0) {
-        const isDefault = /\bdefault\s*$/.test(trimmed);
-        const entryText = isDefault
-          ? trimmed.replace(/\s+default\s*$/, '').trim()
-          : trimmed;
-        const { label, color } = extractColor(entryText, palette);
+        const { label, color } = extractColor(trimmed, palette);
         if (!color) {
           pushError(
             lineNumber,
@@ -358,7 +327,8 @@ export function parseC4(
           );
           continue;
         }
-        if (isDefault) {
+        // First entry becomes the default
+        if (currentTagGroup.entries.length === 0) {
           currentTagGroup.defaultValue = label;
         }
         currentTagGroup.entries.push({
@@ -376,7 +346,7 @@ export function parseC4(
     currentTagGroup = null;
 
     if (!sawChartType) {
-      return fail(lineNumber, 'Missing "chart: c4" header');
+      return fail(lineNumber, 'Missing "c4" header');
     }
 
     const indent = measureIndent(line);
@@ -391,7 +361,7 @@ export function parseC4(
       }
 
       // Check for top-level non-deployment content (section ended)
-      if (indent === 0 && ELEMENT_RE.test(trimmed)) {
+      if (indent === 0 && (C4_IS_A_RE.test(trimmed) || ELEMENT_RE.test(trimmed))) {
         inDeployment = false;
         // Fall through to element parsing below
       } else {
@@ -444,7 +414,7 @@ export function parseC4(
         continue;
       }
 
-      // containers: / components: must be inside an element
+      // containers / components must be inside an element
       const parentEntry = findParentElement(indent, stack);
       if (parentEntry) {
         parentEntry.element.sectionHeader =
@@ -459,7 +429,7 @@ export function parseC4(
       } else {
         pushError(
           lineNumber,
-          `"${sectionType}:" must be inside an element`,
+          `"${sectionType}" must be inside an element`,
         );
       }
       continue;
@@ -516,6 +486,14 @@ export function parseC4(
         const targetBody = m[2].trim();
         if (!rawLabel) break; // empty label — fall through to plain arrow
 
+        // Reject bidirectional arrows
+        if (arrowType === 'bidirectional' || arrowType === 'bidirectional-async') {
+          const source = findParentElement(indent, stack)?.element.name ?? '?';
+          pushError(lineNumber, `Bidirectional arrows are no longer supported. Replace with two separate arrows:\n  -${rawLabel}-> ${targetBody}\n  ${targetBody} -${rawLabel}-> ${source}`);
+          labeledHandled = true;
+          break;
+        }
+
         // Extract [technology] from end of label
         let label: string | undefined = rawLabel;
         let technology: string | undefined;
@@ -525,8 +503,25 @@ export function parseC4(
           technology = techMatch[1].trim();
         }
 
+        // Extract pipe metadata from target body (e.g. "Database | tech: SQL")
+        let target = targetBody;
+        const pipeIdx = targetBody.indexOf('|');
+        if (pipeIdx !== -1) {
+          target = targetBody.substring(0, pipeIdx).trim();
+          const metaPart = targetBody.substring(pipeIdx + 1).trim();
+          // parsePipeMetadata expects segments split by |; first segment is pre-pipe
+          const meta = parsePipeMetadata(['', metaPart], aliasMap);
+          // tech/technology on pipe overrides [tech] in label
+          if (meta.tech) {
+            technology = meta.tech;
+          }
+          if (meta.technology) {
+            technology = meta.technology;
+          }
+        }
+
         const rel: C4Relationship = {
-          target: targetBody,
+          target,
           label,
           technology,
           arrowType,
@@ -545,18 +540,24 @@ export function parseC4(
       if (labeledHandled) continue;
     }
 
-    // ── Relationships ───────────────────────────────────────
+    // ── Relationships (plain arrows: ->, ~>) ─────────────────
     const relMatch = trimmed.match(RELATIONSHIP_RE);
     if (relMatch) {
       const arrowType = parseArrowType(relMatch[1]);
       if (arrowType) {
-        const { target, label, technology } = parseRelationshipBody(
-          relMatch[2],
-        );
+        // Reject bidirectional arrows
+        if (arrowType === 'bidirectional' || arrowType === 'bidirectional-async') {
+          const arrow = relMatch[1];
+          const target = relMatch[2].trim();
+          const source = findParentElement(indent, stack)?.element.name ?? '?';
+          pushError(lineNumber, `'${arrow}' bidirectional arrows are no longer supported. Replace with two separate arrows:\n  -> ${target}\n  ${target} -> ${source}`);
+          continue;
+        }
+
+        // Plain arrow: entire body is the target (no colon label, no technology)
+        const target = relMatch[2].trim();
         const rel: C4Relationship = {
           target,
-          label,
-          technology,
           arrowType,
           lineNumber,
         };
@@ -573,7 +574,106 @@ export function parseC4(
       }
     }
 
-    // ── Element declarations ────────────────────────────────
+    // ── "Name is a type" declarations (preferred syntax) ────
+    const isATypeMatch = trimmed.match(C4_IS_A_RE);
+    if (isATypeMatch) {
+      let namePart = isATypeMatch[1].trim();
+      const rawType = isATypeMatch[2].toLowerCase();
+      const remainder = isATypeMatch[3];
+
+      // Map external/database to shape overrides with default element type
+      let elementType: C4ElementType;
+      let explicitShape: C4Shape | null = null;
+      if (rawType === 'external') {
+        elementType = 'system';
+        explicitShape = 'external';
+      } else if (rawType === 'database') {
+        elementType = 'container';
+        explicitShape = 'database';
+      } else {
+        elementType = rawType as C4ElementType;
+      }
+
+      // Parse pipe metadata from remainder
+      const remainderTrimmed = remainder.trim();
+      let segments: string[];
+      if (remainderTrimmed.startsWith('|')) {
+        // remainder has pipe metadata: "| tech: PostgreSQL, team: Data"
+        segments = ['', ...remainderTrimmed.substring(1).split('|').map((s) => s.trim())];
+      } else {
+        segments = [remainderTrimmed];
+      }
+
+      // Check for additional `is a <shape>` in the name (e.g., already stripped by C4_IS_A_RE won't happen,
+      // but handle remainder like "is a cylinder" after type)
+      const remainderIsA = remainderTrimmed.match(/^\s*is\s+a(?:n)?\s+(\w+)\s*(.*)$/i);
+      if (remainderIsA) {
+        const shapeName = remainderIsA[1].toLowerCase();
+        if (VALID_SHAPES.has(shapeName)) {
+          explicitShape = shapeName as C4Shape;
+        } else {
+          pushError(
+            lineNumber,
+            `Unknown shape "${remainderIsA[1]}". Valid shapes: ${[...VALID_SHAPES].join(', ')}`,
+          );
+        }
+        // Re-parse remainder after shape
+        const afterShape = remainderIsA[2].trim();
+        if (afterShape.startsWith('|')) {
+          segments = ['', ...afterShape.substring(1).split('|').map((s) => s.trim())];
+        } else {
+          segments = [afterShape];
+        }
+      }
+
+      // Also check for `is a <shape>` within the name part itself
+      const nameIsAMatch = namePart.match(IS_A_RE);
+      if (nameIsAMatch) {
+        const shapeName = nameIsAMatch[1].toLowerCase();
+        if (VALID_SHAPES.has(shapeName)) {
+          explicitShape = shapeName as C4Shape;
+        } else {
+          pushError(
+            lineNumber,
+            `Unknown shape "${nameIsAMatch[1]}". Valid shapes: ${[...VALID_SHAPES].join(', ')}`,
+          );
+        }
+        namePart = namePart.substring(0, nameIsAMatch.index!).trim();
+      }
+
+      const metadata = parsePipeMetadata(segments, aliasMap, () => pushError(lineNumber, MULTIPLE_PIPE_WARNING, 'warning'));
+
+      const shape =
+        explicitShape ??
+        inferC4Shape(namePart, metadata.tech ?? metadata.technology);
+
+      const element: C4Element = {
+        name: namePart,
+        type: elementType,
+        shape,
+        metadata,
+        children: [],
+        groups: [],
+        relationships: [],
+        lineNumber,
+      };
+
+      // Check for duplicate name
+      const existingLine = knownNames.get(namePart.toLowerCase());
+      if (existingLine !== undefined) {
+        pushError(
+          lineNumber,
+          `Duplicate element name "${namePart}" (first defined on line ${existingLine})`,
+        );
+      } else {
+        knownNames.set(namePart.toLowerCase(), lineNumber);
+      }
+
+      attachElement(element, indent, stack, result);
+      continue;
+    }
+
+    // ── Element declarations (deprecated prefix syntax) ─────
     const elementMatch = trimmed.match(ELEMENT_RE);
     if (elementMatch) {
       const elementType = elementMatch[1].toLowerCase() as C4ElementType;
@@ -599,6 +699,12 @@ export function parseC4(
         namePart = namePart.substring(0, isAMatch.index!).trim();
       }
 
+      // Emit deprecation error with migration hint
+      pushError(
+        lineNumber,
+        `'${elementMatch[1]} ${namePart}' prefix syntax is no longer supported — use '${namePart} is a ${elementType}' instead`,
+      );
+
       const metadata = parsePipeMetadata(segments, aliasMap, () => pushError(lineNumber, MULTIPLE_PIPE_WARNING, 'warning'));
 
       // Determine shape: explicit > inference
@@ -641,7 +747,7 @@ export function parseC4(
       if (parentEntry) {
         const rawKey = metadataMatch[1].trim().toLowerCase();
 
-        // Special case: `import: file.dgmo`
+        // Special case: `import file.dgmo`
         if (rawKey === 'import') {
           parentEntry.element.importPath = metadataMatch[2].trim();
           continue;

package/src/c4/renderer.ts

@@ -15,16 +15,16 @@ import { layoutC4Context, layoutC4Containers, layoutC4Components, layoutC4Deploy
 import {
   LEGEND_HEIGHT,
   LEGEND_PILL_FONT_SIZE,
-  LEGEND_PILL_FONT_W,
   LEGEND_PILL_PAD,
   LEGEND_DOT_R,
   LEGEND_ENTRY_FONT_SIZE,
-  LEGEND_ENTRY_FONT_W,
   LEGEND_ENTRY_DOT_GAP,
   LEGEND_ENTRY_TRAIL,
   LEGEND_CAPSULE_PAD,
   LEGEND_GROUP_GAP,
+  measureLegendText,
 } from '../utils/legend-constants';
+import { TITLE_FONT_SIZE, TITLE_FONT_WEIGHT } from '../utils/title-constants';
 
 // ============================================================
 // Constants
@@ -33,7 +33,6 @@ import {
 const DIAGRAM_PADDING = 20;
 const MAX_SCALE = 3;
 const TITLE_HEIGHT = 30;
-const TITLE_FONT_SIZE = 20;
 const TYPE_FONT_SIZE = 10;
 const NAME_FONT_SIZE = 14;
 const DESC_FONT_SIZE = 11;
@@ -307,8 +306,8 @@ export function renderC4Context(
       .attr('y', 30)
       .attr('text-anchor', 'middle')
       .attr('fill', palette.text)
-      .attr('font-size', `${TITLE_FONT_SIZE}px`)
-      .attr('font-weight', '700')
+      .attr('font-size', TITLE_FONT_SIZE)
+      .attr('font-weight', TITLE_FONT_WEIGHT)
       .style('cursor', onClickItem && parsed.titleLineNumber ? 'pointer' : 'default')
       .text(parsed.title);
 
@@ -1143,7 +1142,7 @@ function renderLegend(
     ? layout.legend.filter((g) => g.name.toLowerCase() === (activeTagGroup ?? '').toLowerCase())
     : layout.legend;
 
-  const pillWidthOf = (g: C4LegendGroup) => g.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+  const pillWidthOf = (g: C4LegendGroup) => measureLegendText(g.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
   const effectiveW = (g: C4LegendGroup) => activeTagGroup != null ? g.width : pillWidthOf(g);
 
   // In fixed mode, compute centered x-positions
@@ -1250,7 +1249,7 @@ function renderLegend(
           .attr('fill', palette.textMuted)
           .text(entry.value);
 
-        entryX = textX + entry.value.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+        entryX = textX + measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
       }
     }
   }
@@ -1347,8 +1346,8 @@ export function renderC4Containers(
       .attr('y', 30)
       .attr('text-anchor', 'middle')
       .attr('fill', palette.text)
-      .attr('font-size', `${TITLE_FONT_SIZE}px`)
-      .attr('font-weight', '700')
+      .attr('font-size', TITLE_FONT_SIZE)
+      .attr('font-weight', TITLE_FONT_WEIGHT)
       .style('cursor', onClickItem && parsed.titleLineNumber ? 'pointer' : 'default')
       .text(parsed.title);