@diagrammo/dgmo 0.7.3 → 0.8.0

package/src/chart.ts

@@ -25,6 +25,7 @@ export interface ChartEra {
   end: string;          // exact category label, e.g. "'81"
   label: string;        // display name, e.g. "Carter"
   color: string | null; // resolved CSS color, or null → palette default
+  lineNumber: number;
 }
 
 import type { DgmoError } from './diagnostics';
@@ -34,9 +35,13 @@ export interface ParsedChart {
   title?: string;
   titleLineNumber?: number;
   series?: string;
+  seriesLineNumber?: number;
   xlabel?: string;
+  xlabelLineNumber?: number;
   ylabel?: string;
+  ylabelLineNumber?: number;
   seriesNames?: string[];
+  seriesNameLineNumbers?: number[];
   seriesNameColors?: (string | undefined)[];
   orientation?: 'horizontal' | 'vertical';
   color?: string;
@@ -55,7 +60,7 @@ export interface ParsedChart {
 import { resolveColor } from './colors';
 import type { PaletteColors } from './palettes';
 import { makeDgmoError, formatDgmoError, suggest } from './diagnostics';
-import { extractColor, parseSeriesNames } from './utils/parsing';
+import { extractColor, normalizeDirection, normalizeGroupedNumber, parseFirstLine, parseSeriesNames } from './utils/parsing';
 
 // ============================================================
 // Parser
@@ -76,18 +81,23 @@ const TYPE_ALIASES: Record<string, ChartType> = {
   'multi-line': 'line',
 };
 
+/** Known option keywords for the simple chart parser. */
+const KNOWN_OPTIONS = new Set([
+  'chart', 'title', 'series', 'xlabel', 'ylabel', 'label', 'labels',
+  'orientation', 'direction', 'color',
+]);
+
 /**
  * Parses the simple chart text format into a structured object.
  *
- * Format:
+ * Format (colon-free):
  * ```
- * chart: bar
- * title: My Chart
- * series: Revenue
+ * bar My Chart
+ * series Revenue
  *
- * Jan: 120
- * Feb: 200
- * Mar: 150
+ * Jan 120
+ * Feb 200
+ * Mar 150
  * ```
  */
 export function parseChart(
@@ -96,6 +106,7 @@ export function parseChart(
 ): ParsedChart {
   const lines = content.split('\n');
   const parsedEras: ChartEra[] = [];
+  const rawEras: { start: string; afterArrow: string; color: string | null; lineNumber: number }[] = [];
   const result: ParsedChart = {
     type: 'bar',
     data: [],
@@ -111,6 +122,8 @@ export function parseChart(
     return result;
   };
 
+  let firstLineParsed = false;
+
   for (let i = 0; i < lines.length; i++) {
     const trimmed = lines[i].trim();
     const lineNumber = i + 1;
@@ -127,115 +140,198 @@ export function parseChart(
     // Skip comments
     if (trimmed.startsWith('//')) continue;
 
-    // Era line: must be matched before colon-split (era '77 -> '81: Carter has colons inside)
-    const eraMatch = trimmed.match(/^era\s+(.+?)\s*->\s*(.+?)\s*:\s*(.+?)(?:\s*\(([^)]+)\))?\s*$/);
-    if (eraMatch) {
-      parsedEras.push({
-        start: eraMatch[1].trim(),
-        end: eraMatch[2].trim(),
-        label: eraMatch[3].trim(),
-        color: eraMatch[4] ? resolveColor(eraMatch[4].trim(), palette) : null,
-      });
-      continue;
-    }
-
-    // Parse key: value pairs
-    const colonIndex = trimmed.indexOf(':');
-    if (colonIndex === -1) continue;
-
-    const key = trimmed.substring(0, colonIndex).trim().toLowerCase();
-    const value = trimmed.substring(colonIndex + 1).trim();
-
-    // Handle metadata
-    if (key === 'chart') {
-      const raw = value.toLowerCase();
-      const chartType = (TYPE_ALIASES[raw] ?? raw) as ChartType;
-      if (VALID_TYPES.has(chartType)) {
-        result.type = chartType;
-      } else {
-        let msg = `Unsupported chart type: ${value}. Supported types: ${[...VALID_TYPES].join(', ')}.`;
-        const hint = suggest(raw, [...VALID_TYPES]);
+    // First non-empty, non-comment line: chart type + optional title
+    if (!firstLineParsed) {
+      firstLineParsed = true;
+      const firstLine = parseFirstLine(trimmed);
+      if (firstLine) {
+        const raw = firstLine.chartType.toLowerCase();
+        const chartType = (TYPE_ALIASES[raw] ?? raw) as ChartType;
+        if (VALID_TYPES.has(chartType)) {
+          result.type = chartType;
+          if (firstLine.title) {
+            result.title = firstLine.title;
+            result.titleLineNumber = lineNumber;
+          }
+          continue;
+        } else {
+          let msg = `Unsupported chart type: ${firstLine.chartType}. Supported types: ${[...VALID_TYPES].join(', ')}.`;
+          const hint = suggest(raw, [...VALID_TYPES]);
+          if (hint) msg += ` ${hint}`;
+          return fail(lineNumber, msg);
+        }
+      }
+      // If the first line is a single word (no spaces, no colon, no numbers),
+      // treat it as an unrecognized chart type rather than falling through
+      if (!trimmed.includes(' ') && !trimmed.includes(':') && !/\d/.test(trimmed)) {
+        let msg = `Unsupported chart type: ${trimmed}. Supported types: ${[...VALID_TYPES].join(', ')}.`;
+        const hint = suggest(trimmed.toLowerCase(), [...VALID_TYPES]);
         if (hint) msg += ` ${hint}`;
         return fail(lineNumber, msg);
       }
-      continue;
+      // Fall through — first line might be a data row or option
     }
 
-    if (key === 'title') {
-      result.title = value;
-      result.titleLineNumber = lineNumber;
+    // Era line: era Day 1 -> Day 3 Rough Seas (blue) — colon-free
+    const eraMatch = trimmed.match(/^era\s+(.+?)\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) {
+        rawEras.push({
+          start: eraMatch[1].trim(),
+          afterArrow,
+          color: eraMatch[3] ? resolveColor(eraMatch[3].trim(), palette) : null,
+          lineNumber,
+        });
+      }
       continue;
     }
 
-    if (key === 'xlabel') {
-      result.xlabel = value;
-      continue;
-    }
+    // Extract first token to check for known options
+    const spaceIdx = trimmed.indexOf(' ');
+    const firstToken = (spaceIdx >= 0 ? trimmed.substring(0, spaceIdx) : trimmed).toLowerCase();
+
+    // Known option with a value
+    if (KNOWN_OPTIONS.has(firstToken) && spaceIdx >= 0) {
+      const value = trimmed.substring(spaceIdx + 1).trim();
+
+      if (firstToken === 'chart') {
+        const raw = value.toLowerCase();
+        const chartType = (TYPE_ALIASES[raw] ?? raw) as ChartType;
+        if (VALID_TYPES.has(chartType)) {
+          result.type = chartType;
+        } else {
+          let msg = `Unsupported chart type: ${value}. Supported types: ${[...VALID_TYPES].join(', ')}.`;
+          const hint = suggest(raw, [...VALID_TYPES]);
+          if (hint) msg += ` ${hint}`;
+          return fail(lineNumber, msg);
+        }
+        continue;
+      }
 
-    if (key === 'ylabel') {
-      result.ylabel = value;
-      continue;
-    }
+      if (firstToken === 'title') {
+        result.title = value;
+        result.titleLineNumber = lineNumber;
+        continue;
+      }
 
-    if (key === 'label') {
-      result.label = value;
-      continue;
-    }
+      if (firstToken === 'xlabel') {
+        result.xlabel = value;
+        result.xlabelLineNumber = lineNumber;
+        continue;
+      }
 
-    if (key === 'labels') {
-      const v = value.toLowerCase();
-      if (v === 'name' || v === 'value' || v === 'percent' || v === 'full') {
-        result.labels = v;
+      if (firstToken === 'ylabel') {
+        result.ylabel = value;
+        result.ylabelLineNumber = lineNumber;
+        continue;
       }
-      continue;
-    }
 
-    if (key === 'orientation') {
-      // Only bar and bar-stacked support orientation (axis swapping)
-      if (result.type === 'bar' || result.type === 'bar-stacked') {
+      if (firstToken === 'label') {
+        result.label = value;
+        continue;
+      }
+
+      if (firstToken === 'labels') {
         const v = value.toLowerCase();
-        if (v === 'horizontal' || v === 'vertical') {
-          result.orientation = v;
+        if (v === 'name' || v === 'value' || v === 'percent' || v === 'full') {
+          result.labels = v;
         }
+        continue;
       }
-      continue;
-    }
 
-    if (key === 'color') {
-      result.color = resolveColor(value.trim(), palette);
-      continue;
+      if (firstToken === 'orientation' || firstToken === 'direction') {
+        // Only bar and bar-stacked support orientation (axis swapping)
+        if (result.type === 'bar' || result.type === 'bar-stacked') {
+          const vLower = value.toLowerCase();
+          if (vLower === 'horizontal' || vLower === 'vertical') {
+            result.orientation = vLower;
+          } else {
+            const dir = normalizeDirection(value);
+            if (dir === 'LR') result.orientation = 'horizontal';
+            else if (dir === 'TB') result.orientation = 'vertical';
+          }
+        }
+        continue;
+      }
+
+      if (firstToken === 'color') {
+        result.color = resolveColor(value.trim(), palette) ?? undefined;
+        continue;
+      }
+
+      if (firstToken === 'series') {
+        const parsed = parseSeriesNames(value, lines, i, palette);
+        i = parsed.newIndex;
+        result.series = parsed.series;
+        result.seriesLineNumber = lineNumber;
+        if (parsed.names.length > 1) {
+          result.seriesNames = parsed.names;
+          result.seriesNameLineNumbers = parsed.nameLineNumbers;
+        }
+        if (parsed.nameColors.some(Boolean)) result.seriesNameColors = parsed.nameColors;
+        continue;
+      }
     }
 
-    if (key === 'series') {
-      const parsed = parseSeriesNames(value, lines, i, palette);
+    // Bare "series" keyword with no value — collect indented names
+    if (firstToken === 'series' && spaceIdx === -1) {
+      const parsed = parseSeriesNames('', lines, i, palette);
       i = parsed.newIndex;
       result.series = parsed.series;
+      result.seriesLineNumber = lineNumber;
       if (parsed.names.length > 1) {
         result.seriesNames = parsed.names;
+        result.seriesNameLineNumbers = parsed.nameLineNumbers;
       }
       if (parsed.nameColors.some(Boolean)) result.seriesNameColors = parsed.nameColors;
       continue;
     }
 
-    // Data point: Label: value  or  Label: v1, v2, ...
-    const parts = value.split(',').map((s) => s.trim());
-    const numValue = parseFloat(parts[0]);
-    if (!isNaN(numValue)) {
-      const { label: rawLabel, color: pointColor } = extractColor(trimmed.substring(0, colonIndex).trim(), palette);
-      const extra = parts
-        .slice(1)
-        .map((s) => parseFloat(s))
-        .filter((n) => !isNaN(n));
+    // Data row: parse from the right — rightmost numeric token(s) = value(s), everything left = label
+    // Supports comma-separated multi-values: "Jan 100, 200, 300"
+    // Supports comma-grouped numbers: "Revenue 1,200, 1,500" → [1200, 1500]
+    const dataValues = parseDataRowValues(trimmed);
+    if (dataValues) {
+      const { label: rawLabel, color: pointColor } = extractColor(dataValues.label, palette);
+      const [first, ...rest] = dataValues.values;
       result.data.push({
         label: rawLabel,
-        value: numValue,
-        ...(extra.length > 0 && { extraValues: extra }),
+        value: first,
+        ...(rest.length > 0 && { extraValues: rest }),
         ...(pointColor && { color: pointColor }),
         lineNumber,
       });
     }
   }
 
+  // Resolve raw eras against known data labels (longest-prefix match for multi-word labels)
+  const knownLabels = new Set(result.data.map((d) => d.label));
+  for (const raw of rawEras) {
+    // Find the longest prefix of afterArrow that matches a known label
+    const words = raw.afterArrow.split(' ');
+    let end = '';
+    let label = '';
+    let matched = false;
+    for (let w = words.length - 1; w >= 1; w--) {
+      const candidateEnd = words.slice(0, w).join(' ');
+      if (knownLabels.has(candidateEnd)) {
+        end = candidateEnd;
+        label = words.slice(w).join(' ');
+        matched = true;
+        break;
+      }
+    }
+    if (!matched) {
+      // Fallback: first token = end, rest = label
+      end = words[0];
+      label = words.slice(1).join(' ');
+    }
+    parsedEras.push({ start: raw.start, end, label, color: raw.color, lineNumber: raw.lineNumber });
+  }
+
   // Eras are only valid for line, multi-line (aliased to 'line'), and area chart types
   if (result.type !== 'line' && result.type !== 'area') {
     result.eras = undefined;
@@ -253,11 +349,11 @@ export function parseChart(
   };
 
   if (!result.error && result.data.length === 0) {
-    warn(1, 'No data points found. Add data in format: Label: 123');
+    warn(1, 'No data points found. Add data in format: Label 123');
   }
 
   if (!result.error && result.type === 'bar-stacked' && !result.seriesNames) {
-    setChartError(1, 'Chart type "bar-stacked" requires multiple series names. Use: series: Name1, Name2, Name3');
+    setChartError(1, 'Chart type "bar-stacked" requires multiple series names. Use: series Name1, Name2, Name3');
   }
 
   if (!result.error && result.seriesNames) {
@@ -277,3 +373,120 @@ export function parseChart(
 
   return result;
 }
+
+// ============================================================
+// Data Row Parser
+// ============================================================
+
+/**
+ * Parse a data row line: everything before the last numeric token(s) is the label,
+ * numeric tokens at the end are the values. Supports comma-separated multi-values
+ * and comma-grouped numbers (e.g., "1,087").
+ *
+ * Examples:
+ *   "Jan 120"           → { label: "Jan", values: [120] }
+ *   "North America 250" → { label: "North America", values: [250] }
+ *   "Region 5 300"      → { label: "Region 5", values: [300] }
+ *   "Q1 10, 20, 30"     → { label: "Q1", values: [10, 20, 30] }
+ *   "Revenue 1,200"     → { label: "Revenue", values: [1200] }
+ *
+ * Returns null if the line has no numeric value at the end.
+ */
+export function parseDataRowValues(
+  line: string,
+): { label: string; values: number[] } | null {
+  // First, normalize comma-grouped numbers: replace patterns like "1,087" with "1087"
+  // We need to be careful: commas also separate multi-values.
+  // Strategy: tokenize by commas, normalize grouped numbers, then re-parse.
+
+  // Split by comma to get segments
+  const segments = line.split(',');
+
+  // Normalize each segment: if a segment (trimmed) matches grouped number pattern,
+  // merge it with the previous segment
+  const normalized: string[] = [];
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i].trim();
+    // Check if this segment is a continuation of a grouped number
+    // A continuation looks like exactly 3 digits and follows a segment ending in digits.
+    // Grouped numbers have NO space around the comma (e.g., "1,087"), so skip if
+    // the raw segment has leading whitespace (e.g., ", 350" is a value separator).
+    if (i > 0 && /^\d{3}$/.test(seg) && !/^\s/.test(segments[i])) {
+      const prevSeg = normalized[normalized.length - 1].trimEnd();
+      // Check if previous segment ends with a number (1-3 digits at the end of the last token)
+      if (/\d{1,3}$/.test(prevSeg)) {
+        // Check if the combined token would be a valid grouped number
+        // Extract the trailing number from prev
+        const prevMatch = prevSeg.match(/(\d{1,3})$/);
+        if (prevMatch) {
+          // Tentatively merge and validate
+          const mergedTail = prevMatch[1] + ',' + seg;
+          // Build full token by looking at what's left in normalized
+          // Simple approach: just merge
+          normalized[normalized.length - 1] = prevSeg + seg;
+          continue;
+        }
+      }
+    }
+    normalized.push(segments[i]);
+  }
+
+  const rebuilt = normalized.join(',');
+
+  // Now check for comma-separated values at the end
+  // Strategy: find where the label ends and values begin
+  // Values are comma-separated numeric tokens at the end of the line
+
+  // Try splitting by comma first — if the line has commas, the last comma-separated tokens
+  // that are all numeric form the values
+  const commaParts = rebuilt.split(',');
+  if (commaParts.length > 1) {
+    // Find how many trailing comma-separated parts are numeric
+    let numericCount = 0;
+    for (let j = commaParts.length - 1; j >= 0; j--) {
+      const part = commaParts[j].trim();
+      if (part && !isNaN(parseFloat(part)) && isFinite(Number(part))) {
+        numericCount++;
+      } else {
+        break;
+      }
+    }
+    if (numericCount > 0) {
+      // Pure numeric trailing comma-parts are extra values.
+      // Everything before them (joined by comma) contains "label firstValue".
+      const splitAt = commaParts.length - numericCount;
+      const extraValueParts = commaParts.slice(splitAt);
+      const firstPart = commaParts.slice(0, splitAt).join(',').trim();
+
+      // Split firstPart from the right: last space-separated token must be numeric
+      const lastSpaceIdx = firstPart.lastIndexOf(' ');
+      if (lastSpaceIdx >= 0) {
+        const possibleFirstVal = firstPart.substring(lastSpaceIdx + 1).trim();
+        if (possibleFirstVal && !isNaN(parseFloat(possibleFirstVal)) && isFinite(Number(possibleFirstVal))) {
+          const label = firstPart.substring(0, lastSpaceIdx).trim();
+          if (label) {
+            const values = [parseFloat(possibleFirstVal)];
+            for (const p of extraValueParts) {
+              values.push(parseFloat(p.trim()));
+            }
+            return { label, values };
+          }
+        }
+      }
+    }
+  }
+
+  // No commas or comma parsing didn't work — split by spaces from right
+  // Last space-separated token that is numeric = the value
+  const lastSpaceIdx = rebuilt.lastIndexOf(' ');
+  if (lastSpaceIdx < 0) return null;
+
+  const possibleValue = rebuilt.substring(lastSpaceIdx + 1).trim();
+  const num = parseFloat(possibleValue);
+  if (isNaN(num) || !isFinite(Number(possibleValue))) return null;
+
+  const label = rebuilt.substring(0, lastSpaceIdx).trim();
+  if (!label) return null;
+
+  return { label, values: [num] };
+}

package/src/class/parser.ts

@@ -1,7 +1,7 @@
 import { resolveColor } from '../colors';
 import type { PaletteColors } from '../palettes';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
-import { measureIndent } from '../utils/parsing';
+import { measureIndent, parseFirstLine, OPTION_NOCOLON_RE } from '../utils/parsing';
 import type {
   ParsedClassDiagram,
   ClassNode,
@@ -23,15 +23,19 @@ function classId(name: string): string {
 // Regex patterns
 // ============================================================
 
-// Class declaration: ClassName [extends|implements ParentClass] [modifier] (color)
+// Class declaration: [modifier] ClassName [extends|implements ParentClass] (color)
+// Supports both:
+//   New: `abstract Animal` or `interface Serializable`
+//   Old: `Animal [abstract]` (bracketed suffix, kept for transition)
 const CLASS_DECL_RE =
-  /^([A-Z][A-Za-z0-9_]*)(?:\s+(extends|implements)\s+([A-Z][A-Za-z0-9_]*))?(?:\s+\[(abstract|interface|enum)\])?(?:\s+\(([^)]+)\))?\s*$/;
+  /^(?:(abstract|interface|enum)\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
+// ClassName --|> TargetClass label  (new: space-separated)
+// ClassName --|> TargetClass : label  (old: colon-separated, kept for transition)
 // Arrows: --|>  ..|>  *--  o--  ..>  ->
 const REL_ARROW_RE =
-  /^([A-Z][A-Za-z0-9_]*)\s+(--\|>|\.\.\|>|\*--|o--|\.\.\>|->)\s+([A-Z][A-Za-z0-9_]*)(?:\s*:\s*(.+))?$/;
+  /^([A-Z][A-Za-z0-9_]*)\s*(--\|>|\.\.\|>|\*--|o--|\.\.\>|->)\s*([A-Z][A-Za-z0-9_]*)(?:\s+:?\s*(.+))?$/;
 
 // Member line patterns
 const VISIBILITY_RE = /^([+\-#])\s*/;
@@ -195,34 +199,30 @@ export function parseClassDiagram(
     // Skip comments
     if (trimmed.startsWith('//')) continue;
 
-    // Metadata directives (before content) — only simple keys (no spaces)
-    if (!contentStarted && indent === 0 && /^[a-z][a-z0-9-]*\s*:/i.test(trimmed)) {
-      const colonIdx = trimmed.indexOf(':');
-      const key = trimmed.substring(0, colonIdx).trim().toLowerCase();
-      const value = trimmed.substring(colonIdx + 1).trim();
-
-      // Only recognize known metadata keys
-      if (key === 'chart') {
-        if (value.toLowerCase() !== 'class') {
-          const allTypes = ['class', 'flowchart', 'sequence', 'er', 'org', 'bar', 'line', 'pie', 'scatter', 'sankey', 'venn', 'timeline', 'arc', 'slope'];
-          let msg = `Expected chart type "class", got "${value}"`;
-          const hint = suggest(value.toLowerCase(), allTypes);
-          if (hint) msg += `. ${hint}`;
-          return fail(lineNumber, msg);
+    // 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.title) {
+          result.title = firstLine.title;
+          result.titleLineNumber = lineNumber;
         }
         continue;
       }
+    }
 
-      if (key === 'title') {
-        result.title = value;
-        result.titleLineNumber = lineNumber;
-        continue;
-      }
-
-      // Store diagram-level options (e.g., color: off)
-      if (!/\s/.test(key)) {
-        result.options[key] = value;
-        continue;
+    // Space-separated options before content (new syntax): `color off`
+    // Only match lines starting with a lowercase token (options), not uppercase (class names)
+    if (!contentStarted && indent === 0 && /^[a-z]/.test(trimmed)) {
+      const optMatch = trimmed.match(OPTION_NOCOLON_RE);
+      if (optMatch) {
+        const key = optMatch[1].toLowerCase();
+        const value = optMatch[2].trim();
+        // Don't swallow lines that look like class modifier keywords
+        if (key !== 'abstract' && key !== 'interface' && key !== 'enum') {
+          result.options[key] = value;
+          continue;
+        }
       }
     }
 
@@ -268,11 +268,13 @@ export function parseClassDiagram(
     // Try class declaration
     const classDecl = trimmed.match(CLASS_DECL_RE);
     if (classDecl) {
-      const name = classDecl[1];
-      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 prefixModifier = classDecl[1] as ClassModifier | undefined;
+      const name = classDecl[2];
+      const relKeyword = classDecl[3] as 'extends' | 'implements' | undefined;
+      const parentName = classDecl[4];
+      const bracketModifier = classDecl[5] as ClassModifier | undefined;
+      const modifier = prefixModifier ?? bracketModifier;
+      const colorName = classDecl[6]?.trim();
       const color = colorName ? resolveColor(colorName, palette) : undefined;
 
       const node = getOrCreateClass(name, lineNumber);
@@ -344,11 +346,18 @@ export function looksLikeClassDiagram(content: string): boolean {
 
     // Skip metadata
     if (/^(chart|title)\s*:/i.test(trimmed)) continue;
+    // Skip new-style first line (bare chart type)
+    if (/^class(\s|$)/i.test(trimmed)) continue;
 
     const indent = measureIndent(line);
 
     if (indent === 0) {
-      // Check for modifier pattern: ClassName [abstract|interface|enum]
+      // Check for bare modifier keyword: `abstract ClassName`, `interface ClassName`, `enum ClassName`
+      if (/^(abstract|interface|enum)\s+[A-Z][A-Za-z0-9_]*/i.test(trimmed)) {
+        hasModifier = true;
+        hasClassDecl = true;
+      }
+      // Check for old modifier pattern: ClassName [abstract|interface|enum]
       if (/^[A-Z][A-Za-z0-9_]*\s+\[(abstract|interface|enum)\]/i.test(trimmed)) {
         hasModifier = true;
         hasClassDecl = true;
@@ -399,11 +408,19 @@ export function extractSymbols(docText: string): DiagramSymbols {
   let inMetadata = true;
   for (const rawLine of docText.split('\n')) {
     const line = rawLine.trim();
-    if (inMetadata && /^[a-z-]+\s*:/i.test(line)) continue;
+    // Skip old-style colon metadata and new-style first line / space-separated options
+    if (inMetadata && (/^[a-z-]+\s*:/i.test(line) || /^class(\s|$)/i.test(line))) continue;
+    if (inMetadata && /^[a-z]/.test(line) && OPTION_NOCOLON_RE.test(line)) {
+      const key = line.match(OPTION_NOCOLON_RE)![1].toLowerCase();
+      if (key !== 'abstract' && key !== 'interface' && key !== 'enum') continue;
+    }
     inMetadata = false;
     if (line.length === 0 || /^\s/.test(rawLine)) continue;
     const m = CLASS_DECL_RE.exec(line);
-    if (m && !entities.includes(m[1]!)) entities.push(m[1]!);
+    if (m) {
+      const name = m[2]!; // group 2 is the class name in the new regex
+      if (!entities.includes(name)) entities.push(name);
+    }
   }
   return {
     kind: 'class',