@diagrammo/dgmo 0.8.4 → 0.8.5

package/docs/language-reference.md

@@ -1143,20 +1143,27 @@ Thousands commas supported.
 
 ## 16. Visualizations
 
-### 16.1 Slope Charts (Colon REQUIRED for data)
+### 16.1 Slope Charts
 
 ```
 slope Fleet Strength
 
-1715 1725
+period 1715 1725
 
-Blackbeard: 40 4
-Roberts: 12 52
+Blackbeard 40 4
+Roberts 12 52
 ```
 
-- Period labels on their own line, commas optional
-- Data rows: `Label: value1 value2` — colon required, commas between values optional
-- Thousands commas supported in values
+- Period directive required: `period Label1 Label2` (one-line) or indented block for multi-token labels:
+  ```
+  period
+    Before COVID
+    After COVID
+  ```
+- Data rows: `Label value1 value2` — space-separated, no colons, no commas between values
+- Thousands commas within values supported (e.g., `1,000`)
+- Color annotations: `Label (color) value1 value2`
+- Minimum 2 periods required
 
 ### 16.2 Wordcloud
 
@@ -1239,7 +1246,6 @@ Navigator 0.85, 0.8
 | Class field types | class | `+ name: string` |
 | Class method returns | class | `+ sail(): void` |
 | Function expressions | function | `f(x): x^2 + 1` |
-| Slope data rows | slope | `Blackbeard: 40 4` |
 | Hide tag values | initiative-status | `hide phase:Planning` |
 
 ### Colons OPTIONAL
@@ -1265,13 +1271,15 @@ Navigator 0.85, 0.8
 | Section dividers | sequence | `== Phase ==` |
 | Comments | all | `// comment` |
 | Wordcloud data | wordcloud | `swordsmanship 95` |
+| Slope data rows | slope | `Blackbeard 40 4` |
+| Slope period directive | slope | `period 1715 1725` |
 | Venn intersections | venn | `sw + nav Sea Raiders` |
 
 ### The Rule
 
 **Colons appear in two contexts:**
 1. **Value assignment** — `key: value` in pipe metadata, indented tag/metadata assignment (org, c4), and hide directives
-2. **Type/expression separation** — where labels can contain spaces and a delimiter is needed (function expressions, slope data, class members)
+2. **Type/expression separation** — where labels can contain spaces and a delimiter is needed (function expressions, class members)
 
 **Exception**: Known-schema properties (infra node properties, ER columns) remain space-separated even though they are indented. The colon rule applies to open-ended metadata, not fixed property schemas.
 

package/gallery/fixtures/slope.dgmo

@@ -1,8 +1,9 @@
 slope Programming Language Popularity
 
-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
+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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",
@@ -30,6 +30,16 @@
         "types": "./dist/editor.d.cts",
         "default": "./dist/editor.cjs"
       }
+    },
+    "./highlight": {
+      "import": {
+        "types": "./dist/highlight.d.ts",
+        "default": "./dist/highlight.js"
+      },
+      "require": {
+        "types": "./dist/highlight.d.cts",
+        "default": "./dist/highlight.cjs"
+      }
     }
   },
   "files": [
@@ -116,10 +126,20 @@
     "@lezer/lr": "^1.4.8"
   },
   "peerDependenciesMeta": {
-    "@codemirror/language": { "optional": true },
-    "@codemirror/state": { "optional": true },
-    "@lezer/common": { "optional": true },
-    "@lezer/highlight": { "optional": true },
-    "@lezer/lr": { "optional": true }
+    "@codemirror/language": {
+      "optional": true
+    },
+    "@codemirror/state": {
+      "optional": true
+    },
+    "@lezer/common": {
+      "optional": true
+    },
+    "@lezer/highlight": {
+      "optional": true
+    },
+    "@lezer/lr": {
+      "optional": true
+    }
   }
 }

package/src/cli.ts

@@ -486,6 +486,7 @@ Full reference: call \`get_language_reference\` MCP tool or visit diagrammo.app/
 function printHelp(): void {
   console.log(`Usage: dgmo <input> [options]
        cat input.dgmo | dgmo [options]
+       dgmo cat <file>     Display file with syntax highlighting
 
 Render a .dgmo file to PNG (default) or SVG.
 
@@ -534,6 +535,8 @@ function parseArgs(argv: string[]): {
   copy: boolean;
   json: boolean;
   chartTypes: boolean;
+  cat: boolean;
+  noColor: boolean;
   installClaudeSkill: boolean;
   installClaudeCodeIntegration: boolean;
   installCodexIntegration: boolean;
@@ -553,6 +556,8 @@ function parseArgs(argv: string[]): {
     copy: false,
     json: false,
     chartTypes: false,
+    cat: false,
+    noColor: false,
     installClaudeSkill: false,
     installClaudeCodeIntegration: false,
     installCodexIntegration: false,
@@ -572,7 +577,13 @@ function parseArgs(argv: string[]): {
   while (i < args.length) {
     const arg = args[i];
 
-    if (arg === '--help' || arg === '-h') {
+    if (arg === 'cat' && !result.cat && !result.input) {
+      result.cat = true;
+      i++;
+    } else if (arg === '--no-color') {
+      result.noColor = true;
+      i++;
+    } else if (arg === '--help' || arg === '-h') {
       result.help = true;
       i++;
     } else if (arg === '--version' || arg === '-v') {
@@ -746,6 +757,37 @@ async function main(): Promise<void> {
     return;
   }
 
+  if (opts.cat) {
+    const useColor =
+      !opts.noColor && !process.env.NO_COLOR && process.stdout.isTTY === true;
+
+    let catContent: string;
+    if (opts.input && opts.input !== '-') {
+      const inputPath = resolve(opts.input);
+      try {
+        catContent = readFileSync(inputPath, 'utf-8');
+      } catch {
+        console.error(`Error: Cannot read file "${inputPath}"`);
+        process.exit(1);
+      }
+    } else {
+      // Read from stdin
+      try {
+        catContent = readFileSync(0, 'utf-8');
+      } catch {
+        console.error('Error: No input file specified');
+        console.error('Usage: dgmo cat <file>');
+        process.exit(1);
+      }
+    }
+
+    const { highlightDgmo, renderAnsi } =
+      await import('./editor/highlight-api');
+    const tokens = highlightDgmo(catContent);
+    process.stdout.write(renderAnsi(tokens, useColor));
+    return;
+  }
+
   if (opts.installClaudeCodeIntegration) {
     const claudeDir = join(homedir(), '.claude');
     if (!existsSync(claudeDir)) {

package/src/d3.ts

@@ -509,6 +509,7 @@ export function parseVisualization(
   let timelineEraBlockIndent = 0;
   let inTimelineMarkerBlock = false;
   let timelineMarkerBlockIndent = 0;
+  let inSlopePeriodBlock = false;
   const timelineAliasMap = new Map<string, string>();
   const VALID_D3_TYPES = new Set([
     'slope',
@@ -1099,6 +1100,164 @@ export function parseVisualization(
       }
     }
 
+    // ── Slope chart: period directive + right-scan data rows ──
+    if (result.type === 'slope') {
+      // Period block: indented lines inside `period` block
+      // (blank lines are pre-filtered at loop top, so only non-indented lines close the block)
+      if (inSlopePeriodBlock) {
+        if (indent > 0) {
+          result.periods.push(line);
+          continue;
+        }
+        // Non-indented line → close block, fall through to process normally
+        inSlopePeriodBlock = false;
+      }
+
+      // Period directive: `period Label1 Label2` or bare `period` (block open)
+      // Only accept before data rows start (F4: prevent keyword shadowing labels)
+      if (result.data.length === 0) {
+        const periodMatch = line.match(/^period\b(.*)$/i);
+        if (periodMatch) {
+          if (result.periods.length > 0 && !inSlopePeriodBlock) {
+            // F5: warn on duplicate period directives
+            warn(
+              lineNumber,
+              `Duplicate 'period' directive — periods are already defined`
+            );
+          }
+          const rest = periodMatch[1].trim();
+          if (rest) {
+            // One-line: `period 1715 1725`
+            const periodLabels = rest.split(/\s+/);
+            result.periods.push(...periodLabels);
+          } else {
+            // Block open: bare `period`
+            inSlopePeriodBlock = true;
+          }
+          continue;
+        }
+      }
+
+      // Migration error: bare period line (old syntax — comma-separated, no keyword)
+      // F1: Only fire when ALL comma-separated tokens are short (≤20 chars) and non-empty
+      if (
+        result.periods.length === 0 &&
+        line.includes(',') &&
+        !line.includes(':')
+      ) {
+        const tokens = line
+          .split(',')
+          .map((t) => t.trim())
+          .filter(Boolean);
+        const looksLikePeriods =
+          tokens.length >= 2 && tokens.every((t) => t.length <= 20);
+        if (looksLikePeriods) {
+          return fail(
+            lineNumber,
+            `Period lines require the 'period' keyword — use 'period ${tokens.join(' ')}'`
+          );
+        }
+      }
+
+      // Migration error: old colon syntax in data rows
+      // F2: Only fire when content after colon is predominantly numeric (old "Label: val1, val2" pattern)
+      if (line.includes(':')) {
+        const colonPos = line.indexOf(':');
+        const afterColon = line.substring(colonPos + 1).trim();
+        const numericTokens = afterColon
+          .split(/[,\s]+/)
+          .filter((v) => /^-?\d/.test(v));
+        // Only trigger if most tokens after the colon are numeric (old data pattern)
+        if (numericTokens.length >= 1) {
+          const allTokens = afterColon.split(/[,\s]+/).filter(Boolean);
+          if (numericTokens.length >= allTokens.length * 0.5) {
+            const label = line.substring(0, colonPos).trim();
+            return fail(
+              lineNumber,
+              `Colons are no longer used in slope data rows — use '${label} ${numericTokens.join(' ')}'`
+            );
+          }
+        }
+      }
+
+      // Right-scan data row parsing (requires periods to be known)
+      if (result.periods.length >= 2) {
+        const P = result.periods.length;
+        const tokens = line.split(/\s+/);
+        const values: number[] = [];
+
+        // Scan from right, capped at P values
+        let rightIdx = tokens.length - 1;
+        while (rightIdx >= 0 && values.length < P) {
+          const raw = tokens[rightIdx].replace(/,/g, '');
+          const num = parseFloat(raw);
+          if (!isNaN(num) && /^-?\d/.test(raw)) {
+            values.unshift(num);
+            rightIdx--;
+          } else {
+            break;
+          }
+        }
+
+        if (values.length < P) {
+          warn(
+            lineNumber,
+            `Data row has ${values.length} numeric value(s) but ${P} period(s) are defined — expected ${P} values`
+          );
+          continue;
+        }
+
+        // Remaining left tokens = label
+        const labelTokens = tokens.slice(0, rightIdx + 1);
+        const joinedLabel = labelTokens.join(' ');
+
+        if (!joinedLabel) {
+          warn(
+            lineNumber,
+            `Data row has no label — add a label before the numeric values`
+          );
+          continue;
+        }
+
+        // Color annotation: `Label (color)` → extract color
+        const colorMatch = joinedLabel.match(/^(.+?)\(([^)]+)\)\s*$/);
+        const labelPart = colorMatch ? colorMatch[1].trim() : joinedLabel;
+        const colorPart = colorMatch
+          ? resolveColor(colorMatch[2].trim(), palette)
+          : null;
+
+        if (!labelPart) {
+          warn(
+            lineNumber,
+            `Data row has no label — add a label before the numeric values`
+          );
+          continue;
+        }
+
+        // F3: Warn on purely numeric labels — likely a mistake
+        if (/^\d[\d,.]*$/.test(labelPart)) {
+          warn(
+            lineNumber,
+            `Label '${labelPart}' looks numeric — this may indicate too many values or a missing label`
+          );
+        }
+
+        result.data.push({
+          label: labelPart,
+          values,
+          color: colorPart,
+          lineNumber,
+        });
+        continue;
+      }
+
+      // If we get here in a slope chart, it's an unrecognized line
+      if (firstLineParsed) {
+        warn(lineNumber, `Unexpected line: '${line}'.`);
+      }
+      continue;
+    }
+
     // ── Colon-separated metadata / options (legacy + data lines) ──
     const colonIndex = line.indexOf(':');
 
@@ -1222,23 +1381,6 @@ export function parseVisualization(
       continue;
     }
 
-    // Period line: comma-separated labels with no colon before first comma
-    // e.g., "2020, 2024" or "Q1 2023, Q2 2023, Q3 2023"
-    if (
-      result.periods.length === 0 &&
-      line.includes(',') &&
-      !line.includes(':')
-    ) {
-      const periods = line
-        .split(',')
-        .map((p) => p.trim())
-        .filter(Boolean);
-      if (periods.length >= 2) {
-        result.periods = periods;
-        continue;
-      }
-    }
-
     // Catch-all: nothing matched this line
     // Skip on first line — chart type suggestion is handled post-loop
     if (firstLineParsed) {
@@ -1408,14 +1550,14 @@ export function parseVisualization(
   if (result.periods.length < 2) {
     return fail(
       1,
-      'Missing or invalid periods line. Provide at least 2 comma-separated period labels (e.g., "2020, 2024")'
+      "Missing 'period' directive. Add 'period 2020 2024' before data rows (minimum 2 periods required)"
     );
   }
 
   if (result.data.length === 0) {
     warn(
       1,
-      'No data lines found. Add data as "Label: value1, value2" (e.g., "Apple: 25, 35")'
+      "No data lines found. Add data as 'Label value1 value2' (e.g., 'Blackbeard 40 4')"
     );
   }