@diagrammo/dgmo 0.8.1 → 0.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",

package/src/c4/parser.ts

@@ -11,7 +11,7 @@ import {
   measureIndent,
   extractColor,
   parsePipeMetadata,
-  MULTIPLE_PIPE_WARNING,
+  MULTIPLE_PIPE_ERROR,
   parseFirstLine,
   OPTION_NOCOLON_RE,
 } from '../utils/parsing';
@@ -56,8 +56,8 @@ const SECTION_HEADER_RE = /^(containers|components|deployment)\s*$/i;
 /** Matches `container X` references inside deployment nodes */
 const CONTAINER_REF_RE = /^container\s+(.+)$/i;
 
-/** Matches indented metadata: `key value` (space-separated, no colon) */
-const METADATA_RE = /^([a-z][a-z0-9-]*)\s+(.+)$/i;
+/** Matches indented metadata: `key: value` (colon-separated) */
+const METADATA_RE = /^([a-z][a-z0-9-]*):\s+(.+)$/i;
 
 // ============================================================
 // Helpers
@@ -83,7 +83,11 @@ const VALID_SHAPES = new Set<string>([
 /** Known top-level option keys for C4 diagrams. */
 const KNOWN_C4_OPTIONS = new Set<string>([
   'layout',
-  'direction',
+]);
+
+/** Known C4 boolean options (bare keyword = on). */
+const KNOWN_C4_BOOLEANS = new Set<string>([
+  'direction-tb',
 ]);
 
 const ALL_CHART_TYPES = [
@@ -286,10 +290,6 @@ export function parseC4(
         pushError(lineNumber, 'Tag groups must appear before content');
         continue;
       }
-      if (tagBlockMatch.deprecated) {
-        pushError(lineNumber, `'## ${tagBlockMatch.name}' is no longer supported — use 'tag: ${tagBlockMatch.name}' instead`);
-        continue;
-      }
       currentTagGroup = {
         name: tagBlockMatch.name,
         alias: tagBlockMatch.alias,
@@ -303,8 +303,14 @@ export function parseC4(
       continue;
     }
 
-    // Generic header options (space-separated: `key value`)
+    // Generic header options (space-separated: `key value` or bare boolean)
     if (!contentStarted && !currentTagGroup && measureIndent(line) === 0) {
+      // Bare boolean options
+      if (KNOWN_C4_BOOLEANS.has(trimmed.toLowerCase())) {
+        result.options[trimmed.toLowerCase()] = 'on';
+        continue;
+      }
+
       const optMatch = trimmed.match(OPTION_NOCOLON_RE);
       if (optMatch) {
         const key = optMatch[1].trim().toLowerCase();
@@ -382,7 +388,7 @@ export function parseC4(
         // Otherwise it's a deployment node (possibly with pipe metadata)
         const segments = trimmed.split('|').map((s) => s.trim());
         const nodeName = segments[0];
-        const metadata = parsePipeMetadata(segments, aliasMap, () => pushError(lineNumber, MULTIPLE_PIPE_WARNING, 'warning'));
+        const metadata = parsePipeMetadata(segments, aliasMap, () => pushError(lineNumber, MULTIPLE_PIPE_ERROR));
         const shape = inferC4Shape(nodeName, metadata.tech ?? metadata.technology);
 
         const dNode: C4DeploymentNode = {
@@ -641,7 +647,7 @@ export function parseC4(
         namePart = namePart.substring(0, nameIsAMatch.index!).trim();
       }
 
-      const metadata = parsePipeMetadata(segments, aliasMap, () => pushError(lineNumber, MULTIPLE_PIPE_WARNING, 'warning'));
+      const metadata = parsePipeMetadata(segments, aliasMap, () => pushError(lineNumber, MULTIPLE_PIPE_ERROR));
 
       const shape =
         explicitShape ??
@@ -705,7 +711,7 @@ export function parseC4(
         `'${elementMatch[1]} ${namePart}' prefix syntax is no longer supported — use '${namePart} is a ${elementType}' instead`,
       );
 
-      const metadata = parsePipeMetadata(segments, aliasMap, () => pushError(lineNumber, MULTIPLE_PIPE_WARNING, 'warning'));
+      const metadata = parsePipeMetadata(segments, aliasMap, () => pushError(lineNumber, MULTIPLE_PIPE_ERROR));
 
       // Determine shape: explicit > inference
       const shape =
@@ -747,7 +753,7 @@ export function parseC4(
       if (parentEntry) {
         const rawKey = metadataMatch[1].trim().toLowerCase();
 
-        // Special case: `import file.dgmo`
+        // Special case: `import: file.dgmo`
         if (rawKey === 'import') {
           parentEntry.element.importPath = metadataMatch[2].trim();
           continue;

package/src/chart.ts

@@ -46,7 +46,9 @@ export interface ParsedChart {
   orientation?: 'horizontal' | 'vertical';
   color?: string;
   label?: string;
-  labels?: 'name' | 'value' | 'percent' | 'full';
+  noLabelName?: boolean;
+  noLabelValue?: boolean;
+  noLabelPercent?: boolean;
   data: ChartDataPoint[];
   eras?: ChartEra[];
   diagnostics: DgmoError[];
@@ -60,7 +62,7 @@ export interface ParsedChart {
 import { resolveColor } from './colors';
 import type { PaletteColors } from './palettes';
 import { makeDgmoError, formatDgmoError, suggest } from './diagnostics';
-import { extractColor, normalizeDirection, normalizeGroupedNumber, parseFirstLine, parseSeriesNames } from './utils/parsing';
+import { extractColor, normalizeGroupedNumber, parseFirstLine, parseSeriesNames } from './utils/parsing';
 
 // ============================================================
 // Parser
@@ -83,8 +85,14 @@ const TYPE_ALIASES: Record<string, ChartType> = {
 
 /** Known option keywords for the simple chart parser. */
 const KNOWN_OPTIONS = new Set([
-  'chart', 'title', 'series', 'xlabel', 'ylabel', 'label', 'labels',
-  'orientation', 'direction', 'color',
+  'chart', 'title', 'series', 'xlabel', 'ylabel', 'label',
+  'no-label-name', 'no-label-value', 'no-label-percent',
+  'color',
+]);
+
+/** Known boolean options for the simple chart parser. */
+const KNOWN_BOOLEANS = new Set([
+  'orientation-horizontal',
 ]);
 
 /**
@@ -193,6 +201,14 @@ export function parseChart(
     const spaceIdx = trimmed.indexOf(' ');
     const firstToken = (spaceIdx >= 0 ? trimmed.substring(0, spaceIdx) : trimmed).toLowerCase();
 
+    // Bare boolean options (e.g. orientation-horizontal)
+    if (KNOWN_BOOLEANS.has(firstToken) && spaceIdx < 0) {
+      if (firstToken === 'orientation-horizontal') {
+        result.orientation = 'horizontal';
+      }
+      continue;
+    }
+
     // Known option with a value
     if (KNOWN_OPTIONS.has(firstToken) && spaceIdx >= 0) {
       const value = trimmed.substring(spaceIdx + 1).trim();
@@ -234,29 +250,6 @@ export function parseChart(
         continue;
       }
 
-      if (firstToken === 'labels') {
-        const v = value.toLowerCase();
-        if (v === 'name' || v === 'value' || v === 'percent' || v === 'full') {
-          result.labels = v;
-        }
-        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;
@@ -276,6 +269,11 @@ export function parseChart(
       }
     }
 
+    // Bare boolean options: no-label-name, no-label-value, no-label-percent
+    if (firstToken === 'no-label-name') { result.noLabelName = true; continue; }
+    if (firstToken === 'no-label-value') { result.noLabelValue = true; continue; }
+    if (firstToken === 'no-label-percent') { result.noLabelPercent = true; continue; }
+
     // Bare "series" keyword with no value — collect indented names
     if (firstToken === 'series' && spaceIdx === -1) {
       const parsed = parseSeriesNames('', lines, i, palette);
@@ -292,8 +290,10 @@ export function parseChart(
 
     // 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 space-separated multi-values when series are defined: "Jan 100 200 300"
     // Supports comma-grouped numbers: "Revenue 1,200, 1,500" → [1200, 1500]
-    const dataValues = parseDataRowValues(trimmed);
+    const multiValue = (result.seriesNames?.length ?? 0) >= 2;
+    const dataValues = parseDataRowValues(trimmed, { multiValue });
     if (dataValues) {
       const { label: rawLabel, color: pointColor } = extractColor(dataValues.label, palette);
       const [first, ...rest] = dataValues.values;
@@ -361,7 +361,7 @@ export function parseChart(
     for (const dp of result.data) {
       const actualCount = 1 + (dp.extraValues?.length ?? 0);
       if (actualCount !== expectedCount) {
-        warn(dp.lineNumber, `Data point "${dp.label}" has ${actualCount} value(s), but ${expectedCount} series defined. Each row must have ${expectedCount} comma-separated values.`);
+        warn(dp.lineNumber, `Data point "${dp.label}" has ${actualCount} value(s), but ${expectedCount} series defined. Each row must have ${expectedCount} values.`);
       }
     }
     // Filter out mismatched data points so renderers get clean data
@@ -380,20 +380,22 @@ export function parseChart(
 
 /**
  * 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").
+ * numeric tokens at the end are the values. Supports comma-separated multi-values,
+ * space-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] }
+ *   "Jan 120"             → { label: "Jan", values: [120] }
+ *   "North America 250"   → { label: "North America", values: [250] }
+ *   "Q1 10, 20, 30"       → { label: "Q1", values: [10, 20, 30] }
+ *   "Q1 10 20 30"         → { label: "Q1", values: [10, 20, 30] }
+ *   "Revenue 1,200"       → { label: "Revenue", values: [1200] }
+ *   "Revenue 3,984,078.65"→ { label: "Revenue", values: [3984078.65] }
  *
  * Returns null if the line has no numeric value at the end.
  */
 export function parseDataRowValues(
   line: string,
+  options?: { multiValue?: boolean },
 ): { 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.
@@ -407,11 +409,12 @@ export function parseDataRowValues(
   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.
+    // Check if this segment is a continuation of a grouped number.
+    // A continuation starts with exactly 3 digits (possibly followed by a decimal like ".65")
+    // 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])) {
+    if (i > 0 && /^\d{3}(\.\d+)?$/.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)) {
@@ -476,16 +479,35 @@ export function parseDataRowValues(
     }
   }
 
-  // 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;
+  // No commas or comma parsing didn't work — split by spaces from right.
+  // When multiValue is enabled, walk backward collecting consecutive numeric tokens.
+  // Otherwise (default), take only the last token — preserving labels that contain
+  // numbers (e.g., "Region 5 300" → label "Region 5", value 300).
+  const tokens = rebuilt.split(/\s+/);
+  if (tokens.length < 2) return null;
+
+  if (options?.multiValue) {
+    const values: number[] = [];
+    let idx = tokens.length - 1;
+    while (idx >= 1) {
+      const tok = tokens[idx];
+      const num = parseFloat(tok);
+      if (isNaN(num) || !isFinite(Number(tok))) break;
+      values.unshift(num);
+      idx--;
+    }
+    if (values.length === 0) return null;
+    const label = tokens.slice(0, idx + 1).join(' ');
+    if (!label) return null;
+    return { label, values };
+  }
 
-  const possibleValue = rebuilt.substring(lastSpaceIdx + 1).trim();
-  const num = parseFloat(possibleValue);
-  if (isNaN(num) || !isFinite(Number(possibleValue))) return null;
+  // Single-value mode: only the last space-separated token
+  const lastToken = tokens[tokens.length - 1];
+  const num = parseFloat(lastToken);
+  if (isNaN(num) || !isFinite(Number(lastToken))) return null;
 
-  const label = rebuilt.substring(0, lastSpaceIdx).trim();
+  const label = tokens.slice(0, -1).join(' ');
   if (!label) return null;
 
   return { label, values: [num] };

package/src/class/parser.ts

@@ -30,10 +30,14 @@ function classId(name: string): string {
 const CLASS_DECL_RE =
   /^(?:(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  (new: space-separated)
-// ClassName --|> TargetClass : label  (old: colon-separated, kept for transition)
+// Relationship — arrow syntax (indented under source class):
+//   --|> TargetClass label  (space-separated)
+//   --|> TargetClass : label  (colon-separated, kept for transition)
 // Arrows: --|>  ..|>  *--  o--  ..>  ->
+const INDENT_REL_ARROW_RE =
+  /^(--\|>|\.\.\|>|\*--|o--|\.\.\>|->)\s*([A-Z][A-Za-z0-9_]*)(?:\s+:?\s*(.+))?$/;
+
+// Legacy top-level relationship regex (used only for detection/rejection)
 const REL_ARROW_RE =
   /^([A-Z][A-Za-z0-9_]*)\s*(--\|>|\.\.\|>|\*--|o--|\.\.\>|->)\s*([A-Z][A-Za-z0-9_]*)(?:\s+:?\s*(.+))?$/;
 
@@ -211,9 +215,14 @@ export function parseClassDiagram(
       }
     }
 
-    // Space-separated options before content (new syntax): `color off`
+    // Space-separated options before content (new syntax): `no-auto-color`
     // Only match lines starting with a lowercase token (options), not uppercase (class names)
     if (!contentStarted && indent === 0 && /^[a-z]/.test(trimmed)) {
+      // Bare boolean option (single keyword, no value)
+      if (trimmed.toLowerCase() === 'no-auto-color') {
+        result.options['no-auto-color'] = 'on';
+        continue;
+      }
       const optMatch = trimmed.match(OPTION_NOCOLON_RE);
       if (optMatch) {
         const key = optMatch[1].toLowerCase();
@@ -226,8 +235,27 @@ export function parseClassDiagram(
       }
     }
 
-    // Indented lines = members of current class
+    // Indented lines = relationships or members of current class
     if (indent > 0 && currentClass) {
+      // Try indented relationship arrow: --|> TargetClass [label]
+      const indentRel = trimmed.match(INDENT_REL_ARROW_RE);
+      if (indentRel) {
+        const arrow = indentRel[1];
+        const targetName = indentRel[2];
+        const label = indentRel[3]?.trim();
+
+        getOrCreateClass(targetName, lineNumber);
+
+        result.relationships.push({
+          source: currentClass.id,
+          target: classId(targetName),
+          type: ARROW_TO_TYPE[arrow],
+          ...(label && { label }),
+          lineNumber,
+        });
+        continue;
+      }
+
       const member = parseMember(
         trimmed,
         lineNumber,
@@ -243,25 +271,19 @@ export function parseClassDiagram(
     currentClass = null;
     contentStarted = true;
 
-    // Try relationship — arrow syntax
+    // Reject top-level relationship arrows — must be indented under source class
     const relArrow = trimmed.match(REL_ARROW_RE);
     if (relArrow) {
       const sourceName = relArrow[1];
       const arrow = relArrow[2];
       const targetName = relArrow[3];
-      const label = relArrow[4]?.trim();
-
-      // Ensure both classes exist
-      getOrCreateClass(sourceName, lineNumber);
-      getOrCreateClass(targetName, lineNumber);
-
-      result.relationships.push({
-        source: classId(sourceName),
-        target: classId(targetName),
-        type: ARROW_TO_TYPE[arrow],
-        ...(label && { label }),
-        lineNumber,
-      });
+      result.diagnostics.push(
+        makeDgmoError(
+          lineNumber,
+          `Relationship "${sourceName} ${arrow} ${targetName}" must be indented under the source class "${sourceName}"`,
+          'warning',
+        ),
+      );
       continue;
     }
 
@@ -380,6 +402,10 @@ export function looksLikeClassDiagram(content: string): boolean {
       if (/^[+\-#]?\s*\w+.*[:(]/.test(trimmed)) {
         hasIndentedMember = true;
       }
+      // Indented relationship arrows
+      if (INDENT_REL_ARROW_RE.test(trimmed)) {
+        hasRelationship = true;
+      }
     }
   }
 
@@ -410,6 +436,7 @@ export function extractSymbols(docText: string): DiagramSymbols {
     const line = rawLine.trim();
     // 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 && line.toLowerCase() === 'no-auto-color') 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;

package/src/class/renderer.ts

@@ -82,7 +82,7 @@ const CLASS_TYPE_MAP: Record<string, ClassLegendEntry> = {
 const CLASS_TYPE_ORDER = ['class', 'abstract', 'interface', 'enum'];
 
 function collectClassTypes(parsed: ParsedClassDiagram): ClassLegendEntry[] {
-  if (parsed.options?.color === 'off') return [];
+  if (parsed.options?.['no-auto-color']) return [];
 
   const present = new Set<string>();
   for (const c of parsed.classes) {
@@ -500,7 +500,7 @@ export function renderClassDiagram(
 
     const w = node.width;
     const h = node.height;
-    const colorOff = parsed.options?.color === 'off';
+    const colorOff = !!parsed.options?.['no-auto-color'];
     // When legend is collapsed, use neutral color for nodes without explicit color
     const neutralize = hasLegend && !isLegendExpanded && !node.color;
     const effectiveColor = neutralize ? palette.primary : node.color;

package/src/cli.ts

@@ -199,7 +199,7 @@ Key options:
 ### Common to all diagrams
 
 \`\`\`
-chart: sequence        // explicit type (optional — auto-detected)
+sequence               // explicit type (optional — auto-detected)
 title: My Diagram
 palette: catppuccin    // override palette
 
@@ -372,8 +372,7 @@ When the \`dgmo\` MCP server is configured, use these tools directly:
 
 ### Sequence diagram
 \`\`\`
-chart: sequence
-title: Auth Flow
+sequence Auth Flow
 
 User -Login-> API
 API -Find user-> DB
@@ -386,8 +385,7 @@ DB -user-> API
 
 ### Flowchart
 \`\`\`
-chart: flowchart
-title: Process
+flowchart Process
 
 (Start) -> <Valid?>
   -yes-> [Process] -> (Done)
@@ -396,8 +394,7 @@ title: Process
 
 ### Bar chart
 \`\`\`
-chart: bar
-title: Revenue
+bar Revenue
 series: USD
 
 North: 850
@@ -407,8 +404,7 @@ East: 1100
 
 ### ER diagram
 \`\`\`
-chart: er
-title: Schema
+er Schema
 
 users
   id: int [pk]
@@ -423,7 +419,7 @@ users 1--* posts : writes
 
 ### Org chart
 \`\`\`
-chart: org
+org
 
 CEO
   VP Engineering
@@ -434,8 +430,7 @@ CEO
 
 ### Infra chart
 \`\`\`
-chart: infra
-direction: LR
+infra
 
 edge
   rps: 10000
@@ -461,7 +456,7 @@ bar, line, multi-line, area, pie, doughnut, radar, polar-area, bar-stacked, scat
 
 ## Common patterns
 
-- \`chart: type\` — explicit chart type (auto-detected if unambiguous)
+- First line: chart type keyword (e.g. \`sequence\`, \`flowchart\`, \`bar\`) — auto-detected if unambiguous
 - \`title: text\` — diagram title
 - \`// comment\` — only \`//\` comments (not \`#\`)
 - \`(colorname)\` — inline colors: \`Label(red): 100\`
@@ -480,7 +475,7 @@ dgmo file.dgmo --json              # structured JSON output
 - Don't use \`#\` for comments — use \`//\`
 - Don't use \`end\` to close sequence blocks — indentation closes them
 - Don't use hex colors in section headers — use named colors
-- Don't forget \`chart:\` directive when content is ambiguous
+- Start the file with the chart type keyword when content is ambiguous
 - Sequence arrows: \`->\` (sync), \`~>\` (async) — always left-to-right
 
 Full reference: call \`get_language_reference\` MCP tool or visit diagrammo.app/docs
@@ -686,8 +681,8 @@ function noInput(): never {
   writeFileSync(
     samplePath,
     [
-      'chart: sequence',
-      'activations: off',
+      'sequence',
+      'activations off',
       '',
       'Client -POST /login-> API',
       '  API -validate credentials-> Auth',