@diagrammo/dgmo 0.15.1 → 0.16.0

package/gallery/fixtures/kanban.dgmo

@@ -1,27 +1,27 @@
 kanban Plunder Sprint 7
 
 tag Priority
-  Low(green)
-  Urgent(red)
-  High(orange)
+  Low green
+  Urgent red
+  High orange
 
 tag Crew as c
-  Blackbeard(red)
-  Anne Bonny(purple)
-  Calico Jack(teal)
+  Blackbeard red
+  Anne Bonny purple
+  Calico Jack teal
 
-[Awaiting Orders](red)
+[Awaiting Orders] red
   Recruit gunners at Tortuga | priority: High, c: Calico Jack
   Chart new trade route | priority: Urgent, c: Anne Bonny
     Scout the Windward Passage
     Avoid Royal Navy patrols
   Resupply rum and powder | priority: Low, c: Calico Jack
 
-[Underway](orange) | wip: 2
+[Underway] orange | wip: 2
   Forge letters of marque | priority: High, c: Anne Bonny
   Raid merchant convoy | priority: Urgent, c: Blackbeard
     Three ships spotted off Nassau
 
-[Done](green)
+[Done] green
   Bribe the harbour master | priority: High, c: Anne Bonny
   Repair hull damage | priority: Low, c: Blackbeard

package/gallery/fixtures/line.dgmo

@@ -2,8 +2,8 @@ line Daily Active Users (Q1 2025)
 x-label Week
 y-label Users (thousands)
 
-era Week 1 -> Week 6 Phase 1 (blue)
-era Week 6 -> Week 12 Phase 2 (green)
+era Week 1 -> Week 6 Phase 1 blue
+era Week 6 -> Week 12 Phase 2 green
 
 Week 1 12.4
 Week 2 13.1

package/gallery/fixtures/multi-line.dgmo

@@ -3,9 +3,9 @@ x-label Quarter
 y-label Amount ($M)
 
 series
-  Revenue (blue)
-  Operating Cost (red)
-  Net Profit (green)
+  Revenue blue
+  Operating Cost red
+  Net Profit green
 
 Q1 2023 4.2 3.1 1.1
 Q2 2023 4.8 3.3 1.5

package/gallery/fixtures/org-full.dgmo

@@ -1,14 +1,14 @@
 org Acme Corp
 
 tag Location
-  NY(blue)
-  LA(yellow)
-  CO(green)
-  Remote(purple)
+  NY blue
+  LA yellow
+  CO green
+  Remote purple
 
 tag Status
-  FTE(green)
-  Contractor(orange)
+  FTE green
+  Contractor orange
 
 Jane Smith
   role: CEO

package/gallery/fixtures/quadrant.dgmo

@@ -8,8 +8,8 @@ top-right Major Projects
 bottom-left Fill-ins
 bottom-right Avoid
 
-Dark Mode (blue) 0.25 0.85
-API v2 (red) 0.8 0.9
+Dark Mode blue 0.25 0.85
+API v2 red 0.8 0.9
 Fix Typos 0.1 0.15
 SSO Integration 0.75 0.7
 Export CSV 0.3 0.6

package/gallery/fixtures/sankey.dgmo

@@ -1,22 +1,22 @@
 sankey Website Traffic Flow
 
 // Source channels — colored by type
-Organic Search (green)
+Organic Search green
   Landing Page 450
-Paid Ads (orange)
+Paid Ads orange
   Landing Page 280
-Social Media (blue)
+Social Media blue
   Landing Page 180
-Email (purple)
+Email purple
   Landing Page 120
-Direct (teal)
+Direct teal
   Landing Page 90
 
 // Engagement & Conversion
 Landing Page
   Sign Up 340
   Browse Products 520
-  Bounce 260 (red)
+  Bounce 260 red
 
 Sign Up
   Free Trial 240
@@ -24,8 +24,8 @@ Sign Up
 
 Browse Products
   Add to Cart 310
-  Exit 210 (red)
+  Exit 210 red
 
 Add to Cart
-  Purchase (green) 220
-  Abandon 90 (red)
+  Purchase green 220
+  Abandon 90 red

package/gallery/fixtures/scatter.dgmo

@@ -2,20 +2,20 @@ scatter Startup Funding vs Revenue
 x-label Funding ($M)
 y-label Annual Revenue ($M)
 
-[SaaS](blue)
+[SaaS] blue
   Acme Cloud 12 8.5
   DataSync 5.2 3.1
   CloudOps 25 18.4
   PlatformX 8 5.7
   NexGen 3.5 1.2
 
-[Fintech](green)
+[Fintech] green
   PayFlow 45 32
   LendTech 18 12.5
   CoinBase+ 60 41
   QuickPay 9 6.8
 
-[HealthTech](red)
+[HealthTech] red
   MediScan 15 7.2
   HealthAI 22 14.1
   CareLink 7 3.8

package/gallery/fixtures/sequence-tags-protocols.dgmo

@@ -2,16 +2,16 @@ sequence Order Fulfillment — Protocols & Ownership
 active-tag Protocol
 
 tag Protocol as p
-  REST(blue)
-  gRPC(green)
-  Async(orange)
-  SQL(purple)
+  REST blue
+  gRPC green
+  Async orange
+  SQL purple
 
 tag Owner as o
-  Checkout(teal)
-  Fulfillment(orange)
-  Payments(red)
-  Data(blue)
+  Checkout teal
+  Fulfillment orange
+  Payments red
+  Data blue
 
 Buyer is an actor
 CheckoutSvc is a service | o: Checkout

package/gallery/fixtures/sequence-tags.dgmo

@@ -2,15 +2,15 @@ sequence API Gateway — Infrastructure Concerns
 active-tag Concern
 
 tag Concern as c
-  Caching(blue)
-  Auth(green)
-  RateLimiting(orange)
-  BusinessLogic(purple) default
+  Caching blue
+  Auth green
+  RateLimiting orange
+  BusinessLogic purple default
 
 tag Team as t
-  Platform(teal)
-  Product(orange)
-  Security(red)
+  Platform teal
+  Product orange
+  Security red
 
 Mobile is an actor
 Gateway is a gateway | t: Platform

package/gallery/fixtures/sitemap-full.dgmo

@@ -2,15 +2,15 @@ sitemap Grand Slam Tickets
 direction-tb
 
 tag Auth
-  Public(green)
-  Required(blue)
-  Admin(red)
+  Public green
+  Required blue
+  Admin red
 
 tag Type
-  Landing(purple)
-  Form(orange)
-  Content(cyan)
-  Transactional(yellow)
+  Landing purple
+  Form orange
+  Content cyan
+  Transactional yellow
 
 Home
   Auth: Public

package/gallery/fixtures/slope.dgmo

@@ -2,8 +2,8 @@ slope Programming Language Popularity
 
 period 2020 2022 2025
 
-Python (blue) 3 1 1
-JavaScript (yellow) 1 2 2
-TypeScript (cyan) 7 4 3
-Rust (orange) 18 12 5
-Go (green) 10 8 7
+Python blue 3 1 1
+JavaScript yellow 1 2 2
+TypeScript cyan 7 4 3
+Rust orange 18 12 5
+Go green 10 8 7

package/gallery/fixtures/spr-eras.dgmo

@@ -1,15 +1,15 @@
 line U.S. Strategic Petroleum Reserve
 y-label Million Barrels
 
-era '77 -> '81 Carter (blue)
-era '81 -> '89 Reagan (red)
-era '89 -> '93 Bush (red)
-era '93 -> '01 Clinton (blue)
-era '01 -> '09 Bush (red)
-era '09 -> '17 Obama (blue)
-era '17 -> '21 Trump (red)
-era '21 -> '25 Biden (blue)
-era '25 -> '25 Trump (red)
+era '77 -> '81 Carter blue
+era '81 -> '89 Reagan red
+era '89 -> '93 Bush red
+era '93 -> '01 Clinton blue
+era '01 -> '09 Bush red
+era '09 -> '17 Obama blue
+era '17 -> '21 Trump red
+era '21 -> '25 Biden blue
+era '25 -> '25 Trump red
 
 '77 7
 '78 67

package/gallery/fixtures/timeline.dgmo

@@ -2,9 +2,9 @@ timeline Product Roadmap 2024-2025
 sort tag:Team
 
 tag Team as t
-  Engineering(blue)
-  Design(purple)
-  Product(green)
+  Engineering blue
+  Design purple
+  Product green
 
 era 2024-01 -> 2024-06 Phase 1 - Foundation
 era 2024-07 -> 2024-12 Phase 2 - Growth

package/gallery/fixtures/venn.dgmo

@@ -1,8 +1,8 @@
 venn Full-Stack Developer Skills
 
-Frontend(blue) as fe
-Backend(green) as be
-DevOps(orange) as de
+Frontend blue as fe
+Backend green as be
+DevOps orange as de
 
 fe + be Web Systems
 be + de Platform Ops

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "repository": {

package/src/advanced.ts

@@ -28,7 +28,6 @@ export type { DgmoError, DgmoSeverity } from './diagnostics';
 export {
   parseInArrowLabel,
   validateLabelCharacters,
-  matchColorParens,
   ARROW_DIAGNOSTIC_CODES,
 } from './utils/arrows';
 export type { ParseInArrowLabelResult } from './utils/arrows';

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

@@ -309,6 +309,7 @@ interface BLRenderOptions {
   controlsExpanded?: boolean;
   onToggleDescriptions?: (active: boolean) => void;
   onToggleControlsExpand?: () => void;
+  exportMode?: boolean;
 }
 
 export function renderBoxesAndLines(
@@ -328,6 +329,7 @@ export function renderBoxesAndLines(
     controlsExpanded,
     onToggleDescriptions,
     onToggleControlsExpand,
+    exportMode = false,
   } = options ?? {};
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -974,7 +976,7 @@ export function renderBoxesAndLines(
     const legendConfig: LegendConfig = {
       groups: parsed.tagGroups,
       position: { placement: 'top-center', titleRelation: 'below-title' },
-      mode: 'fixed',
+      mode: exportMode ? 'export' : 'preview',
       controlsGroup,
     };
     const legendState: LegendState = {
@@ -1017,11 +1019,13 @@ export function renderBoxesAndLinesForExport(
     exportDims?: { width: number; height: number };
     activeTagGroup?: string | null;
     hiddenTagValues?: Map<string, Set<string>>;
+    exportMode?: boolean;
   }
 ): void {
   renderBoxesAndLines(container, parsed, layout, palette, isDark, {
     exportDims: options?.exportDims,
     activeTagGroup: options?.activeTagGroup,
     hiddenTagValues: options?.hiddenTagValues,
+    exportMode: options?.exportMode,
   });
 }

package/src/c4/parser.ts

@@ -350,7 +350,7 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
         if (!color) {
           pushError(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }

package/src/c4/renderer.ts

@@ -232,7 +232,8 @@ export function renderC4Context(
   isDark: boolean,
   onClickItem?: (lineNumber: number) => void,
   exportDims?: { width?: number; height?: number },
-  activeTagGroup?: string | null
+  activeTagGroup?: string | null,
+  exportMode?: boolean
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -636,7 +637,8 @@ export function renderC4Context(
       palette,
       isDark,
       activeTagGroup,
-      fixedLegend ? width : null
+      fixedLegend ? width : null,
+      exportMode
     );
   }
 }
@@ -1259,7 +1261,8 @@ function renderLegend(
   palette: PaletteColors,
   isDark: boolean,
   activeTagGroup?: string | null,
-  fixedWidth?: number | null
+  fixedWidth?: number | null,
+  exportMode?: boolean
 ): void {
   const groups = layout.legend.map((g) => ({
     name: g.name,
@@ -1268,7 +1271,7 @@ function renderLegend(
   const legendConfig: LegendConfig = {
     groups,
     position: { placement: 'top-center', titleRelation: 'below-title' },
-    mode: 'fixed',
+    mode: exportMode ? 'export' : 'preview',
   };
   const legendState: LegendState = { activeGroup: activeTagGroup ?? null };
   const containerWidth = fixedWidth ?? layout.width;
@@ -1300,7 +1303,8 @@ export function renderC4Containers(
   isDark: boolean,
   onClickItem?: (lineNumber: number) => void,
   exportDims?: { width?: number; height?: number },
-  activeTagGroup?: string | null
+  activeTagGroup?: string | null,
+  exportMode?: boolean
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -1805,7 +1809,8 @@ export function renderC4Containers(
       palette,
       isDark,
       activeTagGroup,
-      fixedLegend ? width : null
+      fixedLegend ? width : null,
+      exportMode
     );
   }
 }
@@ -1933,7 +1938,8 @@ export function renderC4Deployment(
   isDark: boolean,
   onClickItem?: (lineNumber: number) => void,
   exportDims?: { width?: number; height?: number },
-  activeTagGroup?: string | null
+  activeTagGroup?: string | null,
+  exportMode?: boolean
 ): void {
   renderC4Containers(
     container,
@@ -1943,7 +1949,8 @@ export function renderC4Deployment(
     isDark,
     onClickItem,
     exportDims,
-    activeTagGroup
+    activeTagGroup,
+    exportMode
   );
 }
 

package/src/chart.ts

@@ -63,7 +63,7 @@ export interface ParsedChart {
 // Colors
 // ============================================================
 
-import { resolveColorWithDiagnostic } from './colors';
+import { resolveColorWithDiagnostic, RECOGNIZED_COLOR_NAMES } from './colors';
 import type { PaletteColors } from './palettes';
 import { makeDgmoError, formatDgmoError, suggest } from './diagnostics';
 import {
@@ -212,21 +212,30 @@ export function parseChart(
       // Fall through — first line might be a data row or option
     }
 
-    // Era line: era Day 1 -> Day 3 Rough Seas (blue) — colon-free
-    const eraMatch = trimmed.match(
-      /^era\s+(.+?)\s*->\s*(.+?)(?:\s*\(([^)]+)\))?\s*$/
-    );
+    // Era line (§1.5 trailing-token):
+    //   `era Day 1 -> Day 3 Rough Seas`        (no color)
+    //   `era Day 1 -> Day 3 Rough Seas blue`   (trailing color word)
+    // Color (if any) is the last whitespace-delimited token of the label.
+    const eraMatch = trimmed.match(/^era\s+(.+?)\s*->\s*(.+?)\s*$/);
     if (eraMatch) {
-      // Store start and raw afterArrow — resolved against data labels after parsing
       const afterArrow = eraMatch[2].trim();
       const spaceIdx = afterArrow.indexOf(' ');
       if (spaceIdx >= 0) {
+        // Peel trailing-token color off the after-arrow label region.
+        const lastSpaceIdx = afterArrow.lastIndexOf(' ');
+        const trailing = afterArrow.substring(lastSpaceIdx + 1);
+        const hasColor = RECOGNIZED_COLOR_NAMES.includes(
+          trailing as (typeof RECOGNIZED_COLOR_NAMES)[number]
+        );
+        const labelPart = hasColor
+          ? afterArrow.substring(0, lastSpaceIdx).trimEnd()
+          : afterArrow;
         rawEras.push({
           start: eraMatch[1].trim(),
-          afterArrow,
-          color: eraMatch[3]
+          afterArrow: labelPart,
+          color: hasColor
             ? (resolveColorWithDiagnostic(
-                eraMatch[3].trim(),
+                trailing,
                 lineNumber,
                 result.diagnostics,
                 palette

package/src/class/parser.ts

@@ -35,10 +35,11 @@ function classId(name: string): string {
 // Regex patterns
 // ============================================================
 
-// Class declaration: [modifier] ClassName [extends Parent] [implements Interface] (color)
-// Multi-word names allowed (`Customer Service`); quote with `"name"` if name
-// contains reserved chars. ClassName must start with uppercase to keep the
-// convention. Captures (positional):
+// Class declaration: [modifier] ClassName [extends Parent] [implements Interface] [color] [as alias]
+// Color is the universal §1.5 trailing-token form (a bare lowercase palette
+// color word after structural slots). Multi-word names allowed
+// (`Customer Service`); quote with `"name"` if name contains reserved chars.
+// ClassName must start with uppercase. Captures (positional):
 //   1: modifier (abstract|interface|enum) | undefined
 //   2: quotedClassName | undefined
 //   3: bareClassName | undefined
@@ -47,10 +48,10 @@ function classId(name: string): string {
 //   6: quotedImplements | undefined
 //   7: bareImplements | undefined
 //   8: legacy bracket modifier | undefined
-//   9: color | undefined
+//   9: color (trailing token; recognized palette word) | undefined
 //  10: alias literal (TD-18) | undefined
 const CLASS_DECL_RE =
-  /^(?:(abstract|interface|enum)\s+)?(?:"([^"]+)"|([A-Z][^":]*?))(?:\s+extends\s+(?:"([^"]+)"|([A-Z][^":]*?)))?(?:\s+implements\s+(?:"([^"]+)"|([A-Z][^":]*?)))?(?:\s+\[(abstract|interface|enum)\])?(?:\s+\(([^)]+)\))?(?:\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11}))?\s*$/;
+  /^(?:(abstract|interface|enum)\s+)?(?:"([^"]+)"|([A-Z][^":]*?))(?:\s+extends\s+(?:"([^"]+)"|([A-Z][^":]*?)))?(?:\s+implements\s+(?:"([^"]+)"|([A-Z][^":]*?)))?(?:\s+\[(abstract|interface|enum)\])?(?:\s+(red|orange|yellow|green|blue|purple|teal|cyan|gray|black|white))?(?:\s+as\s+([A-Za-z][A-Za-z0-9_]{0,11}))?\s*$/;
 
 // Relationship — arrow syntax (indented under source class).
 // Arrows: --|>  ..|>  *--  o--  ..>  ->

package/src/class/renderer.ts

@@ -192,7 +192,8 @@ export function renderClassDiagram(
   isDark: boolean,
   onClickItem?: (lineNumber: number) => void,
   exportDims?: { width?: number; height?: number },
-  legendActive?: boolean | null
+  legendActive?: boolean | null,
+  exportMode?: boolean
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -376,7 +377,7 @@ export function renderClassDiagram(
     const legendConfig: LegendConfig = {
       groups: legendGroups,
       position: { placement: 'top-center', titleRelation: 'below-title' },
-      mode: 'fixed',
+      mode: exportMode ? 'export' : 'preview',
     };
     const legendState: LegendState = {
       activeGroup: isLegendExpanded ? LEGEND_GROUP_NAME : null,
@@ -697,10 +698,20 @@ export function renderClassDiagramForExport(
     legendReserve;
 
   return runInExportContainer(exportWidth, exportHeight, (container) => {
-    renderClassDiagram(container, parsed, layout, palette, isDark, undefined, {
-      width: exportWidth,
-      height: exportHeight,
-    });
+    renderClassDiagram(
+      container,
+      parsed,
+      layout,
+      palette,
+      isDark,
+      undefined,
+      {
+        width: exportWidth,
+        height: exportHeight,
+      },
+      true, // legendActive for export
+      true // exportMode
+    );
     return extractExportSvg(container, theme);
   });
 }

package/src/cli.ts

@@ -179,8 +179,8 @@ palette: catppuccin    // override palette
 // This is a comment (only // syntax — not #)
 \`\`\`
 
-Inline colors on most elements: append \`(colorname)\` — e.g. \`North(red): 850\`, \`[Process(blue)]\`.
-Named colors: \`red\`, \`orange\`, \`yellow\`, \`green\`, \`blue\`, \`purple\`, \`teal\`, \`cyan\`, \`gray\`.
+Inline colors on most elements: append the color name as the trailing token — e.g. \`North red 850\`, \`[Process] blue\`. To use a color word as a literal label, capitalize it (\`Red\` stays as the word Red).
+Named colors: \`red\`, \`orange\`, \`yellow\`, \`green\`, \`blue\`, \`purple\`, \`teal\`, \`cyan\`, \`gray\`, \`black\`, \`white\`.
 
 ### sequence (most commonly used)
 
@@ -234,7 +234,7 @@ North: 850
 South: 620
 
 // line (multi-series)
-series: Sales(red), Costs(blue)
+series: Sales red, Costs blue
 Q1: 100, 50
 Q2: 120, 55
 
@@ -295,7 +295,7 @@ API
 async A -> B: msg  ❌  use A ~msg~> B
 A <- B             ❌  left-pointing arrows removed — use B -> A
 parallel else      ❌  not supported — use separate parallel blocks
-== Foo(#ff0000) == ❌  hex colors not supported — use named colors: == Foo(red) ==
+== Foo #ff0000 == ❌  hex colors not supported — use named colors: == Foo red ==
 A -routes to /api-> B  ❌  -> inside a label is ambiguous — rephrase the label
 end                ❌  not needed — indentation closes blocks in sequence diagrams
 \`\`\`
@@ -427,8 +427,8 @@ bar, line, multi-line, area, pie, doughnut, radar, polar-area, bar-stacked, scat
 
 - First line: chart type keyword (e.g. \`sequence\`, \`flowchart\`, \`bar\`), optionally followed by a title (\`bar Revenue\`)
 - \`// comment\` — only \`//\` comments (not \`#\`)
-- \`(colorname)\` — inline colors on data series, tag values, kanban columns: \`Label(red) 100\`
-- \`series A(red), B(blue)\` — multi-series with colors
+- Trailing color name — inline colors on data series, tag values, kanban columns: \`Label red 100\`
+- \`series A red, B blue\` — multi-series with colors
 
 ## Rendering via CLI
 

package/src/completion.ts

@@ -17,6 +17,11 @@ import { extractSymbols as extractInfraSymbols } from './infra/parser';
 import { extractSymbols as extractClassSymbols } from './class/parser';
 import { extractPertSymbols } from './pert/parser';
 import { parseFirstLine, ALL_CHART_TYPES } from './utils/parsing';
+import { RECOGNIZED_COLOR_NAMES } from './colors';
+
+const RECOGNIZED_COLOR_SET: ReadonlySet<string> = new Set(
+  RECOGNIZED_COLOR_NAMES
+);
 // Read chart-type descriptions directly from the source-of-truth data
 // module instead of via dgmo-router.ts. dgmo-router imports every
 // parser, and the parsers (Class/ER/Infra/Pert/Flowchart) type-only
@@ -968,10 +973,15 @@ export function extractTagDeclarations(docText: string): Map<string, string[]> {
       (raw[0] === ' ' || raw[0] === '\t')
     ) {
       if (trimmed && !trimmed.startsWith('//')) {
-        // Strip color annotation: Frontend(blue) → Frontend
-        const colorIdx = trimmed.indexOf('(');
+        // Strip trailing-token color (§1.5): `Frontend blue` → `Frontend`.
+        // Whitespace-split; if the last token is a recognized color word,
+        // drop it; otherwise the whole trimmed string is the value.
+        const lastSpaceIdx = trimmed.lastIndexOf(' ');
         const value =
-          colorIdx > 0 ? trimmed.substring(0, colorIdx).trim() : trimmed;
+          lastSpaceIdx > 0 &&
+          RECOGNIZED_COLOR_SET.has(trimmed.substring(lastSpaceIdx + 1))
+            ? trimmed.substring(0, lastSpaceIdx).trim()
+            : trimmed;
         if (value) currentValues.push(value);
       }
       continue;