@diagrammo/dgmo 0.2.27 → 0.2.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.2.27",
+  "version": "0.2.28",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",
@@ -24,7 +24,12 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "docs",
+    ".claude/skills",
+    ".github/copilot-instructions.md",
+    ".cursorrules",
+    ".windsurfrules"
   ],
   "sideEffects": false,
   "scripts": {
@@ -33,7 +38,8 @@
     "dev": "tsup --watch",
     "test": "vitest run",
     "test:watch": "vitest",
-    "gallery": "pnpm build && node scripts/generate-gallery.mjs"
+    "gallery": "pnpm build && node scripts/generate-gallery.mjs",
+    "check:duplication": "jscpd ./src"
   },
   "dependencies": {
     "@dagrejs/dagre": "^2.0.4",
@@ -59,6 +65,7 @@
     "@types/d3-shape": "^3.1.7",
     "@types/dagre": "^0.7.53",
     "@types/jsdom": "^21.1.7",
+    "jscpd": "^4.0.8",
     "tsup": "^8.5.1",
     "typescript": "^5.7.3",
     "vitest": "^3.0.0"

package/src/c4/parser.ts

@@ -2,12 +2,20 @@
 // C4 Architecture Diagram — Parser
 // ============================================================
 
-import { resolveColor } from '../colors';
 import type { PaletteColors } from '../palettes';
 import type { DgmoError } from '../diagnostics';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
-import type { OrgTagGroup } from '../org/parser';
+import type { TagGroup } from '../utils/tag-groups';
+import { matchTagBlockHeading } from '../utils/tag-groups';
 import { inferParticipantType } from '../sequence/participant-inference';
+import {
+  measureIndent,
+  extractColor,
+  parsePipeMetadata,
+  CHART_TYPE_RE,
+  TITLE_RE,
+  OPTION_RE,
+} from '../utils/parsing';
 import type {
   ParsedC4,
   C4Element,
@@ -23,12 +31,6 @@ import type {
 // Regex patterns
 // ============================================================
 
-const CHART_TYPE_RE = /^chart\s*:\s*(.+)/i;
-const TITLE_RE = /^title\s*:\s*(.+)/i;
-const OPTION_RE = /^([a-z][a-z0-9-]*)\s*:\s*(.+)$/i;
-const GROUP_HEADING_RE =
-  /^##\s+(.+?)(?:\s+alias\s+(\w+))?(?:\s*\(([^)]+)\))?\s*$/;
-const COLOR_SUFFIX_RE = /\(([^)]+)\)\s*$/;
 const CONTAINER_RE = /^\[([^\]]+)\]$/;
 
 /** Matches element declarations: `person Name`, `system Name | k: v` */
@@ -40,6 +42,12 @@ const IS_A_RE = /\s+is\s+a(?:n)?\s+(\w+)\s*$/i;
 /** Matches relationship arrows: `->`, `~>`, `<->`, `<~>` */
 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+(.+)$/;
+
 /** Matches section headers: `containers:`, `components:`, `deployment:` */
 const SECTION_HEADER_RE = /^(containers|components|deployment)\s*:\s*$/i;
 
@@ -53,28 +61,6 @@ const METADATA_RE = /^([^:]+):\s*(.+)$/;
 // Helpers
 // ============================================================
 
-function measureIndent(line: string): number {
-  let indent = 0;
-  for (const ch of line) {
-    if (ch === ' ') indent++;
-    else if (ch === '\t') indent += 4;
-    else break;
-  }
-  return indent;
-}
-
-function extractColor(
-  label: string,
-  palette?: PaletteColors,
-): { label: string; color?: string } {
-  const m = label.match(COLOR_SUFFIX_RE);
-  if (!m) return { label };
-  const colorName = m[1].trim();
-  return {
-    label: label.substring(0, m.index!).trim(),
-    color: resolveColor(colorName, palette),
-  };
-}
 
 const VALID_ELEMENT_TYPES = new Set<string>([
   'person',
@@ -186,27 +172,6 @@ function parseRelationshipBody(
   return { target, label: rest };
 }
 
-/** Parse pipe-delimited metadata from segments after the first (name) segment. */
-function parsePipeMetadata(
-  segments: string[],
-  aliasMap: Map<string, string>,
-): Record<string, string> {
-  const metadata: Record<string, string> = {};
-  for (let j = 1; j < segments.length; j++) {
-    for (const part of segments[j].split(',')) {
-      const trimmedPart = part.trim();
-      if (!trimmedPart) continue;
-      const colonIdx = trimmedPart.indexOf(':');
-      if (colonIdx > 0) {
-        const rawKey = trimmedPart.substring(0, colonIdx).trim().toLowerCase();
-        const key = aliasMap.get(rawKey) ?? rawKey;
-        const value = trimmedPart.substring(colonIdx + 1).trim();
-        metadata[key] = value;
-      }
-    }
-  }
-  return metadata;
-}
 
 // ============================================================
 // Stack entry types
@@ -287,7 +252,7 @@ export function parseC4(
   let inDeployment = false;
 
   // Tag group parsing state
-  let currentTagGroup: OrgTagGroup | null = null;
+  let currentTagGroup: TagGroup | null = null;
   const aliasMap = new Map<string, string>();
 
   // Name uniqueness tracking
@@ -341,40 +306,42 @@ export function parseC4(
       }
     }
 
-    // Generic header options
-    if (!contentStarted && !currentTagGroup && measureIndent(line) === 0) {
-      const optMatch = trimmed.match(OPTION_RE);
-      if (optMatch && !trimmed.startsWith('##')) {
-        const key = optMatch[1].trim().toLowerCase();
-        if (key !== 'chart' && key !== 'title') {
-          result.options[key] = optMatch[2].trim();
-          continue;
-        }
-      }
-    }
-
-    // ## Tag group heading
-    const groupMatch = trimmed.match(GROUP_HEADING_RE);
-    if (groupMatch) {
+    // Tag group heading — `tag: Name` (new) or `## Name` (deprecated)
+    // Must be checked BEFORE OPTION_RE to prevent `tag: Rank` being swallowed as option
+    const tagBlockMatch = matchTagBlockHeading(trimmed);
+    if (tagBlockMatch) {
       if (contentStarted) {
-        pushError(lineNumber, 'Tag groups (##) must appear before content');
+        pushError(lineNumber, 'Tag groups must appear before content');
         continue;
       }
-      const groupName = groupMatch[1].trim();
-      const alias = groupMatch[2] || undefined;
+      if (tagBlockMatch.deprecated) {
+        pushError(lineNumber, `'## ${tagBlockMatch.name}' is deprecated for tag groups — use 'tag: ${tagBlockMatch.name}' instead`, 'warning');
+      }
       currentTagGroup = {
-        name: groupName,
-        alias,
+        name: tagBlockMatch.name,
+        alias: tagBlockMatch.alias,
         entries: [],
         lineNumber,
       };
-      if (alias) {
-        aliasMap.set(alias.toLowerCase(), groupName.toLowerCase());
+      if (tagBlockMatch.alias) {
+        aliasMap.set(tagBlockMatch.alias.toLowerCase(), tagBlockMatch.name.toLowerCase());
       }
       result.tagGroups.push(currentTagGroup);
       continue;
     }
 
+    // Generic header options
+    if (!contentStarted && !currentTagGroup && measureIndent(line) === 0) {
+      const optMatch = trimmed.match(OPTION_RE);
+      if (optMatch) {
+        const key = optMatch[1].trim().toLowerCase();
+        if (key !== 'chart' && key !== 'title') {
+          result.options[key] = optMatch[2].trim();
+          continue;
+        }
+      }
+    }
+
     // Tag group entries
     if (currentTagGroup && !contentStarted) {
       const indent = measureIndent(line);
@@ -529,6 +496,55 @@ export function parseC4(
       continue;
     }
 
+    // ── Labeled arrow relationships: -label->, ~label~>, <-label->, <~label~> ──
+    // Must be checked BEFORE plain RELATIONSHIP_RE to avoid partial matches
+    {
+      const labeledPatterns: {
+        re: RegExp;
+        arrowType: C4ArrowType;
+      }[] = [
+        { re: C4_LABELED_BIDI_SYNC_RE, arrowType: 'bidirectional' },
+        { re: C4_LABELED_BIDI_ASYNC_RE, arrowType: 'bidirectional-async' },
+        { re: C4_LABELED_SYNC_RE, arrowType: 'sync' },
+        { re: C4_LABELED_ASYNC_RE, arrowType: 'async' },
+      ];
+      let labeledHandled = false;
+      for (const { re, arrowType } of labeledPatterns) {
+        const m = trimmed.match(re);
+        if (!m) continue;
+        const rawLabel = m[1].trim();
+        const targetBody = m[2].trim();
+        if (!rawLabel) break; // empty label — fall through to plain arrow
+
+        // Extract [technology] from end of label
+        let label: string | undefined = rawLabel;
+        let technology: string | undefined;
+        const techMatch = rawLabel.match(/\[([^\]]+)\]\s*$/);
+        if (techMatch) {
+          label = rawLabel.substring(0, techMatch.index!).trim() || undefined;
+          technology = techMatch[1].trim();
+        }
+
+        const rel: C4Relationship = {
+          target: targetBody,
+          label,
+          technology,
+          arrowType,
+          lineNumber,
+        };
+
+        const parentEntry = findParentElement(indent, stack);
+        if (parentEntry) {
+          parentEntry.element.relationships.push(rel);
+        } else {
+          result.relationships.push(rel);
+        }
+        labeledHandled = true;
+        break;
+      }
+      if (labeledHandled) continue;
+    }
+
     // ── Relationships ───────────────────────────────────────
     const relMatch = trimmed.match(RELATIONSHIP_RE);
     if (relMatch) {

package/src/c4/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 { renderInlineText } from '../utils/inline-markdown';
 import type { ParsedC4 } from './types';
 import type { C4Shape } from './types';
 import type { C4LayoutResult, C4LayoutNode, C4LayoutEdge, C4LayoutBoundary } from './layout';
@@ -546,20 +547,20 @@ export function renderC4Context(
 
     yPos += DIVIDER_GAP;
 
-    // Description (wrapping, muted)
+    // Description (wrapping, muted, inline markdown)
     if (node.description) {
       const contentWidth = w - CARD_H_PAD * 2;
       const lines = wrapText(node.description, contentWidth, DESC_CHAR_WIDTH);
       for (const line of lines) {
-        nodeG
+        const textEl = nodeG
           .append('text')
           .attr('x', 0)
           .attr('y', yPos + DESC_FONT_SIZE / 2)
           .attr('text-anchor', 'middle')
           .attr('dominant-baseline', 'central')
           .attr('fill', palette.textMuted)
-          .attr('font-size', DESC_FONT_SIZE)
-          .text(line);
+          .attr('font-size', DESC_FONT_SIZE);
+        renderInlineText(textEl, line, palette, DESC_FONT_SIZE);
         yPos += DESC_LINE_HEIGHT;
       }
     }
@@ -1617,20 +1618,20 @@ export function renderC4Containers(
     if (node.type === 'container') {
       // Container cards: description above divider, metadata below
 
-      // Description (above divider)
+      // Description (above divider, inline markdown)
       if (node.description) {
         const contentWidth = w - CARD_H_PAD * 2;
         const lines = wrapText(node.description, contentWidth, DESC_CHAR_WIDTH);
         for (const line of lines) {
-          nodeG
+          const textEl = nodeG
             .append('text')
             .attr('x', 0)
             .attr('y', yPos + DESC_FONT_SIZE / 2)
             .attr('text-anchor', 'middle')
             .attr('dominant-baseline', 'central')
             .attr('fill', palette.textMuted)
-            .attr('font-size', DESC_FONT_SIZE)
-            .text(line);
+            .attr('font-size', DESC_FONT_SIZE);
+          renderInlineText(textEl, line, palette, DESC_FONT_SIZE);
           yPos += DESC_LINE_HEIGHT;
         }
       }
@@ -1696,20 +1697,20 @@ export function renderC4Containers(
 
       yPos += DIVIDER_GAP;
 
-      // Description
+      // Description (inline markdown)
       if (node.description) {
         const contentWidth = w - CARD_H_PAD * 2;
         const lines = wrapText(node.description, contentWidth, DESC_CHAR_WIDTH);
         for (const line of lines) {
-          nodeG
+          const textEl = nodeG
             .append('text')
             .attr('x', 0)
             .attr('y', yPos + DESC_FONT_SIZE / 2)
             .attr('text-anchor', 'middle')
             .attr('dominant-baseline', 'central')
             .attr('fill', palette.textMuted)
-            .attr('font-size', DESC_FONT_SIZE)
-            .text(line);
+            .attr('font-size', DESC_FONT_SIZE);
+          renderInlineText(textEl, line, palette, DESC_FONT_SIZE);
           yPos += DESC_LINE_HEIGHT;
         }
       }

package/src/c4/types.ts

@@ -2,11 +2,13 @@
 // C4 Architecture Diagram — Types
 // ============================================================
 
-import type { OrgTagGroup, OrgTagEntry } from '../org/parser';
+import type { TagGroup, TagEntry } from '../utils/tag-groups';
 import type { DgmoError } from '../diagnostics';
 
-// Re-export tag types for convenience
-export type { OrgTagGroup as C4TagGroup, OrgTagEntry as C4TagEntry };
+/** @deprecated Use `TagEntry` from `utils/tag-groups` */
+export type C4TagEntry = TagEntry;
+/** @deprecated Use `TagGroup` from `utils/tag-groups` */
+export type C4TagGroup = TagGroup;
 
 // ── String unions ────────────────────────────────────────────
 
@@ -77,7 +79,7 @@ export interface ParsedC4 {
   title: string | null;
   titleLineNumber: number | null;
   options: Record<string, string>;
-  tagGroups: OrgTagGroup[];
+  tagGroups: TagGroup[];
   elements: C4Element[];
   relationships: C4Relationship[];
   deployment: C4DeploymentNode[];

package/src/chart.ts

@@ -37,7 +37,7 @@ export interface ParsedChart {
   labels?: 'name' | 'value' | 'percent' | 'full';
   data: ChartDataPoint[];
   diagnostics: DgmoError[];
-  error?: string;
+  error: string | null;
 }
 
 // ============================================================
@@ -90,6 +90,7 @@ export function parseChart(
     type: 'bar',
     data: [],
     diagnostics: [],
+    error: null,
   };
 
   const fail = (line: number, message: string): ParsedChart => {
@@ -110,7 +111,7 @@ export function parseChart(
     if (/^#{2,}\s+/.test(trimmed)) continue;
 
     // Skip comments
-    if (trimmed.startsWith('#') || trimmed.startsWith('//')) continue;
+    if (trimmed.startsWith('//')) continue;
 
     // Parse key: value pairs
     const colonIndex = trimmed.indexOf(':');

package/src/class/parser.ts

@@ -1,6 +1,7 @@
 import { resolveColor } from '../colors';
 import type { PaletteColors } from '../palettes';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
+import { measureIndent } from '../utils/parsing';
 import type {
   ParsedClassDiagram,
   ClassNode,
@@ -15,16 +16,6 @@ import type {
 // Helpers
 // ============================================================
 
-function measureIndent(line: string): number {
-  let indent = 0;
-  for (const ch of line) {
-    if (ch === ' ') indent++;
-    else if (ch === '\t') indent += 4;
-    else break;
-  }
-  return indent;
-}
-
 function classId(name: string): string {
   return name.toLowerCase().trim();
 }
@@ -172,6 +163,7 @@ export function parseClassDiagram(
     relationships: [],
     options: {},
     diagnostics: [],
+    error: null,
   };
 
   const fail = (line: number, message: string): ParsedClassDiagram => {

package/src/class/types.ts

@@ -51,5 +51,5 @@ export interface ParsedClassDiagram {
   relationships: ClassRelationship[];
   options: Record<string, string>;
   diagnostics: DgmoError[];
-  error?: string;
+  error: string | null;
 }