@diagrammo/dgmo 0.15.1 → 0.17.0

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--  ..>  ->
@@ -258,7 +259,7 @@ export function parseClassDiagram(
     // First line: bare chart type + optional title (new syntax)
     if (!contentStarted && indent === 0 && i === 0) {
       const firstLine = parseFirstLine(trimmed);
-      if (firstLine && firstLine.chartType === 'class') {
+      if (firstLine?.chartType === 'class') {
         if (firstLine.title) {
           result.title = firstLine.title;
           result.titleLineNumber = lineNumber;

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)
 
@@ -190,8 +190,8 @@ title: Auth Flow
 
 // Participants auto-inferred, or declare explicitly:
 User is an actor
-API is a service
 DB is a database
+Cache is a cache
 
 User -Login-> API
 API -Find user-> DB
@@ -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
 
@@ -1157,7 +1157,7 @@ async function main(): Promise<void> {
     }
 
     const existingDgmo = config.mcpServers?.['dgmo'];
-    if (existingDgmo && existingDgmo.command === 'dgmo-mcp') {
+    if (existingDgmo?.command === 'dgmo-mcp') {
       console.log(`✓ dgmo MCP server already configured in ${configPath}`);
     } else {
       if (existingDgmo) {

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
@@ -590,20 +595,7 @@ export const CHART_TYPES: ReadonlyArray<{ name: string; description: string }> =
  * C4_IS_A_RE).
  */
 export const ENTITY_TYPES = new Map<string, string[]>([
-  [
-    'sequence',
-    [
-      'service',
-      'database',
-      'actor',
-      'queue',
-      'cache',
-      'gateway',
-      'external',
-      'networking',
-      'frontend',
-    ],
-  ],
+  ['sequence', ['actor', 'database', 'queue', 'cache']],
   [
     'c4',
     ['person', 'system', 'container', 'component', 'external', 'database'],
@@ -968,10 +960,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;

package/src/cycle/parser.ts

@@ -7,6 +7,7 @@ import {
   measureIndent,
   parseFirstLine,
   parsePipeMetadata,
+  peelTrailingColorName,
   tryParseSharedOption,
 } from '../utils/parsing';
 import type { ParsedCycle, CycleNode, CycleEdge } from './types';
@@ -102,7 +103,7 @@ export function parseCycle(content: string): ParsedCycle {
     // ── First line: chart type declaration ──
     if (!headerParsed) {
       const firstLineResult = parseFirstLine(trimmed);
-      if (firstLineResult && firstLineResult.chartType === 'cycle') {
+      if (firstLineResult?.chartType === 'cycle') {
         result.title = firstLineResult.title ?? '';
         result.titleLineNumber = lineNum;
         headerParsed = true;
@@ -149,6 +150,7 @@ export function parseCycle(content: string): ParsedCycle {
       }
 
       // Parse node: Label | color: blue, span: 3, description: text
+      // OR shortcut form (color only): `Label color` (universal §1.5)
       const pipeIdx = trimmed.indexOf('|');
       let label: string;
       let metadata: Record<string, string> = {};
@@ -166,6 +168,18 @@ export function parseCycle(content: string): ParsedCycle {
         continue;
       }
 
+      // Universal trailing-token shortcut: if no `| color:` was set explicitly
+      // and the label ends in a recognized color word, treat that word as the
+      // color and strip it from the label.
+      if (!metadata['color']) {
+        const { label: stripped, colorName: shortcutColor } =
+          peelTrailingColorName(label);
+        if (shortcutColor) {
+          metadata['color'] = shortcutColor;
+          label = stripped;
+        }
+      }
+
       // Extract known keys from metadata
       const color = metadata['color'];
       const spanStr = metadata['span'];

package/src/cycle/renderer.ts

@@ -46,6 +46,7 @@ export interface CycleRenderOptions {
   controlsExpanded?: boolean;
   onToggleDescriptions?: (active: boolean) => void;
   onToggleControlsExpand?: () => void;
+  exportMode?: boolean;
 }
 
 /**
@@ -144,7 +145,7 @@ export function renderCycle(
     const legendConfig: LegendConfig = {
       groups: [],
       position: { placement: 'top-center', titleRelation: 'below-title' },
-      mode: 'fixed',
+      mode: renderOptions?.exportMode ? 'export' : 'preview',
       controlsGroup,
     };
     const legendState: LegendState = {
@@ -519,7 +520,8 @@ export function renderCycleForExport(
   palette: PaletteColors,
   isDark: boolean,
   exportDims?: D3ExportDimensions,
-  viewState?: CompactViewState
+  viewState?: CompactViewState,
+  exportMode?: boolean
 ): void {
   renderCycle(
     container,
@@ -528,7 +530,8 @@ export function renderCycleForExport(
     isDark,
     undefined,
     exportDims,
-    viewState
+    viewState,
+    { exportMode }
   );
 }