@diagrammo/dgmo 0.2.27 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.2.27",
+  "version": "0.3.0",
   "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",
@@ -44,11 +50,11 @@
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.2.0",
-    "echarts": "^5.6.0",
+    "echarts": "^6.0.0",
     "lz-string": "^1.5.0"
   },
   "optionalDependencies": {
-    "jsdom": "^26.0.0"
+    "jsdom": "^28.1.0"
   },
   "devDependencies": {
     "@types/d3-array": "^3.2.1",
@@ -57,10 +63,11 @@
     "@types/d3-scale": "^4.0.8",
     "@types/d3-selection": "^3.0.11",
     "@types/d3-shape": "^3.1.7",
-    "@types/dagre": "^0.7.53",
-    "@types/jsdom": "^21.1.7",
+    "@types/dagre": "^0.7.54",
+    "@types/jsdom": "^28.0.0",
+    "jscpd": "^4.0.8",
     "tsup": "^8.5.1",
     "typescript": "^5.7.3",
-    "vitest": "^3.0.0"
+    "vitest": "^4.0.18"
   }
 }

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/layout.ts

@@ -87,7 +87,7 @@ function computeNodeDimensions(node: ClassNode): {
   const headerHeight = HEADER_BASE + (node.modifier ? MODIFIER_BADGE : 0);
 
   // Fields compartment
-  let fieldsHeight = 0;
+  let fieldsHeight: number;
   if (isEnum) {
     // Enum values go in fields compartment
     const enumValues = node.members; // all members are enum values
@@ -96,6 +96,8 @@ function computeNodeDimensions(node: ClassNode): {
         COMPARTMENT_PADDING_Y * 2 +
         enumValues.length * MEMBER_LINE_HEIGHT +
         SEPARATOR_HEIGHT;
+    } else {
+      fieldsHeight = SEPARATOR_HEIGHT + COMPARTMENT_PADDING_Y;
     }
   } else {
     if (fields.length > 0) {
@@ -103,24 +105,27 @@ function computeNodeDimensions(node: ClassNode): {
         COMPARTMENT_PADDING_Y * 2 +
         fields.length * MEMBER_LINE_HEIGHT +
         SEPARATOR_HEIGHT;
+    } else {
+      // UML: always show attributes compartment
+      fieldsHeight = SEPARATOR_HEIGHT + COMPARTMENT_PADDING_Y;
     }
   }
 
   // Methods compartment (not for enums)
   let methodsHeight = 0;
-  if (!isEnum && methods.length > 0) {
-    methodsHeight =
-      COMPARTMENT_PADDING_Y * 2 +
-      methods.length * MEMBER_LINE_HEIGHT +
-      SEPARATOR_HEIGHT;
+  if (!isEnum) {
+    if (methods.length > 0) {
+      methodsHeight =
+        COMPARTMENT_PADDING_Y * 2 +
+        methods.length * MEMBER_LINE_HEIGHT +
+        SEPARATOR_HEIGHT;
+    } else {
+      // UML: always show methods compartment
+      methodsHeight = SEPARATOR_HEIGHT + COMPARTMENT_PADDING_Y;
+    }
   }
 
-  // If no members at all, add minimal padding
-  const height =
-    headerHeight +
-    fieldsHeight +
-    methodsHeight +
-    (fieldsHeight === 0 && methodsHeight === 0 ? 4 : 0);
+  const height = headerHeight + fieldsHeight + methodsHeight;
 
   return { width, height, headerHeight, fieldsHeight, methodsHeight };
 }

package/src/class/parser.ts

@@ -1,11 +1,11 @@
 import { resolveColor } from '../colors';
 import type { PaletteColors } from '../palettes';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
+import { measureIndent } from '../utils/parsing';
 import type {
   ParsedClassDiagram,
   ClassNode,
   ClassMember,
-  ClassRelationship,
   ClassModifier,
   MemberVisibility,
   RelationshipType,
@@ -15,16 +15,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();
 }
@@ -33,14 +23,9 @@ function classId(name: string): string {
 // Regex patterns
 // ============================================================
 
-// Class declaration: ClassName [modifier] (color)
+// Class declaration: ClassName [extends|implements ParentClass] [modifier] (color)
 const CLASS_DECL_RE =
-  /^([A-Z][A-Za-z0-9_]*)(?:\s+\[(abstract|interface|enum)\])?(?:\s+\(([^)]+)\))?\s*$/;
-
-// Relationship — keyword syntax:
-// ClassName extends|implements|contains|has|uses TargetClass : label
-const REL_KEYWORD_RE =
-  /^([A-Z][A-Za-z0-9_]*)\s+(extends|implements|contains|has|uses)\s+([A-Z][A-Za-z0-9_]*)(?:\s*:\s*(.+))?$/;
+  /^([A-Z][A-Za-z0-9_]*)(?:\s+(extends|implements)\s+([A-Z][A-Za-z0-9_]*))?(?:\s+\[(abstract|interface|enum)\])?(?:\s+\(([^)]+)\))?\s*$/;
 
 // Relationship — arrow syntax:
 // ClassName --|> TargetClass : label
@@ -54,14 +39,6 @@ const STATIC_SUFFIX_RE = /\{static\}\s*$/;
 const METHOD_RE = /^(.+?)\(([^)]*)\)(?:\s*:\s*(.+))?$/;
 const FIELD_RE = /^(.+?)\s*:\s*(.+)$/;
 
-const KEYWORD_TO_TYPE: Record<string, RelationshipType> = {
-  extends: 'extends',
-  implements: 'implements',
-  contains: 'composes',
-  has: 'aggregates',
-  uses: 'depends',
-};
-
 const ARROW_TO_TYPE: Record<string, RelationshipType> = {
   '--|>': 'extends',
   '..|>': 'implements',
@@ -172,6 +149,7 @@ export function parseClassDiagram(
     relationships: [],
     options: {},
     diagnostics: [],
+    error: null,
   };
 
   const fail = (line: number, message: string): ParsedClassDiagram => {
@@ -265,28 +243,6 @@ export function parseClassDiagram(
     currentClass = null;
     contentStarted = true;
 
-    // Try relationship — keyword syntax
-    const relKeyword = trimmed.match(REL_KEYWORD_RE);
-    if (relKeyword) {
-      const sourceName = relKeyword[1];
-      const keyword = relKeyword[2].toLowerCase();
-      const targetName = relKeyword[3];
-      const label = relKeyword[4]?.trim();
-
-      // Ensure both classes exist
-      getOrCreateClass(sourceName, lineNumber);
-      getOrCreateClass(targetName, lineNumber);
-
-      result.relationships.push({
-        source: classId(sourceName),
-        target: classId(targetName),
-        type: KEYWORD_TO_TYPE[keyword],
-        ...(label && { label }),
-        lineNumber,
-      });
-      continue;
-    }
-
     // Try relationship — arrow syntax
     const relArrow = trimmed.match(REL_ARROW_RE);
     if (relArrow) {
@@ -313,8 +269,10 @@ export function parseClassDiagram(
     const classDecl = trimmed.match(CLASS_DECL_RE);
     if (classDecl) {
       const name = classDecl[1];
-      const modifier = classDecl[2] as ClassModifier | undefined;
-      const colorName = classDecl[3]?.trim();
+      const relKeyword = classDecl[2] as 'extends' | 'implements' | undefined;
+      const parentName = classDecl[3];
+      const modifier = classDecl[4] as ClassModifier | undefined;
+      const colorName = classDecl[5]?.trim();
       const color = colorName ? resolveColor(colorName, palette) : undefined;
 
       const node = getOrCreateClass(name, lineNumber);
@@ -323,6 +281,17 @@ export function parseClassDiagram(
       // Update line number to the declaration line (may have been created by relationship)
       node.lineNumber = lineNumber;
 
+      // Inline extends/implements creates a relationship
+      if (relKeyword && parentName) {
+        getOrCreateClass(parentName, lineNumber);
+        result.relationships.push({
+          source: classId(name),
+          target: classId(parentName),
+          type: relKeyword as RelationshipType,
+          lineNumber,
+        });
+      }
+
       currentClass = node;
       continue;
     }
@@ -384,9 +353,10 @@ export function looksLikeClassDiagram(content: string): boolean {
         hasModifier = true;
         hasClassDecl = true;
       }
-      // Check for relationship keywords
-      if (REL_KEYWORD_RE.test(trimmed)) {
+      // Check for inline extends/implements in class declaration
+      if (/^[A-Z][A-Za-z0-9_]*\s+(extends|implements)\s+[A-Z]/.test(trimmed)) {
         hasRelationship = true;
+        hasClassDecl = true;
       }
       // Check for relationship arrows
       if (REL_ARROW_RE.test(trimmed)) {