@diagrammo/dgmo 0.2.19 → 0.2.20

package/src/dgmo-router.ts

@@ -2,10 +2,15 @@
 // .dgmo Unified Format — Chart Type Router
 // ============================================================
 
-import { looksLikeSequence } from './sequence/parser';
-import { looksLikeFlowchart } from './graph/flowchart-parser';
-import { looksLikeClassDiagram } from './class/parser';
-import { looksLikeERDiagram } from './er/parser';
+import { looksLikeSequence, parseSequenceDgmo } from './sequence/parser';
+import { looksLikeFlowchart, parseFlowchart } from './graph/flowchart-parser';
+import { looksLikeClassDiagram, parseClassDiagram } from './class/parser';
+import { looksLikeERDiagram, parseERDiagram } from './er/parser';
+import { parseChart } from './chart';
+import { parseEChart } from './echarts';
+import { parseD3 } from './d3';
+import { parseOrg } from './org/parser';
+import type { DgmoError } from './diagnostics';
 
 /**
  * Framework identifiers used by the .dgmo router.
@@ -85,3 +90,61 @@ export function parseDgmoChartType(content: string): string | null {
 
   return null;
 }
+
+// Standard chart types parsed by parseChart (then rendered via ECharts)
+const STANDARD_CHART_TYPES = new Set([
+  'bar', 'line', 'multi-line', 'area', 'pie', 'doughnut',
+  'radar', 'polar-area', 'bar-stacked',
+]);
+
+// ECharts-native types parsed by parseEChart
+const ECHART_TYPES = new Set([
+  'scatter', 'sankey', 'chord', 'function', 'heatmap', 'funnel',
+]);
+
+/**
+ * Parse DGMO content and return diagnostics without rendering.
+ * Useful for the CLI and editor to surface all errors before attempting render.
+ */
+export function parseDgmo(content: string): { diagnostics: DgmoError[] } {
+  const chartType = parseDgmoChartType(content);
+
+  if (!chartType) {
+    // No chart type detected — try D3 parser as fallback (it handles missing chart: line)
+    const parsed = parseD3(content);
+    return { diagnostics: parsed.diagnostics };
+  }
+
+  if (chartType === 'sequence') {
+    const parsed = parseSequenceDgmo(content);
+    return { diagnostics: parsed.diagnostics };
+  }
+  if (chartType === 'flowchart') {
+    const parsed = parseFlowchart(content);
+    return { diagnostics: parsed.diagnostics };
+  }
+  if (chartType === 'class') {
+    const parsed = parseClassDiagram(content);
+    return { diagnostics: parsed.diagnostics };
+  }
+  if (chartType === 'er') {
+    const parsed = parseERDiagram(content);
+    return { diagnostics: parsed.diagnostics };
+  }
+  if (chartType === 'org') {
+    const parsed = parseOrg(content);
+    return { diagnostics: parsed.diagnostics };
+  }
+  if (STANDARD_CHART_TYPES.has(chartType)) {
+    const parsed = parseChart(content);
+    return { diagnostics: parsed.diagnostics };
+  }
+  if (ECHART_TYPES.has(chartType)) {
+    const parsed = parseEChart(content);
+    return { diagnostics: parsed.diagnostics };
+  }
+
+  // D3 types (slope, wordcloud, arc, timeline, venn, quadrant)
+  const parsed = parseD3(content);
+  return { diagnostics: parsed.diagnostics };
+}

package/src/diagnostics.ts

@@ -0,0 +1,77 @@
+// ============================================================
+// Structured Diagnostic Types
+// ============================================================
+
+export type DgmoSeverity = 'error' | 'warning';
+
+export interface DgmoError {
+  line: number; // 1-based (0 = no line info)
+  column?: number; // optional 1-based column
+  message: string; // without "Line N:" prefix
+  severity: DgmoSeverity;
+}
+
+export function makeDgmoError(
+  line: number,
+  message: string,
+  severity: DgmoSeverity = 'error'
+): DgmoError {
+  return { line, message, severity };
+}
+
+export function formatDgmoError(err: DgmoError): string {
+  return err.line > 0 ? `Line ${err.line}: ${err.message}` : err.message;
+}
+
+// ============================================================
+// "Did you mean?" Suggestions
+// ============================================================
+
+/**
+ * Simple Levenshtein distance between two strings.
+ */
+function levenshtein(a: string, b: string): number {
+  const m = a.length;
+  const n = b.length;
+  const dp: number[] = Array(n + 1)
+    .fill(0)
+    .map((_, i) => i);
+
+  for (let i = 1; i <= m; i++) {
+    let prev = dp[0];
+    dp[0] = i;
+    for (let j = 1; j <= n; j++) {
+      const tmp = dp[j];
+      dp[j] =
+        a[i - 1] === b[j - 1]
+          ? prev
+          : 1 + Math.min(prev, dp[j], dp[j - 1]);
+      prev = tmp;
+    }
+  }
+  return dp[n];
+}
+
+/**
+ * Returns a "did you mean 'X'?" suggestion if the input is close to one of the candidates.
+ * Returns null if no good match is found.
+ * Threshold: distance ≤ max(2, floor(input.length / 3))
+ */
+export function suggest(input: string, candidates: readonly string[]): string | null {
+  if (!input || candidates.length === 0) return null;
+  const lower = input.toLowerCase();
+  const threshold = Math.max(2, Math.floor(lower.length / 3));
+
+  let best: string | null = null;
+  let bestDist = Infinity;
+
+  for (const c of candidates) {
+    const dist = levenshtein(lower, c.toLowerCase());
+    if (dist < bestDist && dist <= threshold && dist > 0) {
+      bestDist = dist;
+      best = c;
+    }
+  }
+
+  return best ? `Did you mean '${best}'?` : null;
+}

package/src/echarts.ts

@@ -52,6 +52,8 @@ export interface ParsedHeatmapRow {
   lineNumber: number;
 }
 
+import type { DgmoError } from './diagnostics';
+
 export interface ParsedEChart {
   type: EChartsChartType;
   title?: string;
@@ -72,6 +74,7 @@ export interface ParsedEChart {
   sizelabel?: string;
   showLabels?: boolean;
   categoryColors?: Record<string, string>;
+  diagnostics: DgmoError[];
   error?: string;
 }
 
@@ -84,6 +87,7 @@ import type { PaletteColors } from './palettes';
 import { getSeriesColors, getSegmentColors } from './palettes';
 import { parseChart } from './chart';
 import type { ParsedChart } from './chart';
+import { makeDgmoError, formatDgmoError, suggest } from './diagnostics';
 
 // ============================================================
 // Parser
@@ -111,6 +115,7 @@ export function parseEChart(
   const result: ParsedEChart = {
     type: 'scatter',
     data: [],
+    diagnostics: [],
   };
 
   // Track current category for grouped scatter charts
@@ -168,7 +173,13 @@ export function parseEChart(
       ) {
         result.type = chartType;
       } else {
-        result.error = `Unsupported chart type: ${value}. Supported types: scatter, sankey, chord, function, heatmap, funnel.`;
+        const validTypes = ['scatter', 'sankey', 'chord', 'function', 'heatmap', 'funnel'];
+        let msg = `Unsupported chart type: ${value}. Supported types: ${validTypes.join(', ')}.`;
+        const hint = suggest(chartType, validTypes);
+        if (hint) msg += ` ${hint}`;
+        const diag = makeDgmoError(lineNumber, msg);
+        result.diagnostics.push(diag);
+        result.error = formatDgmoError(diag);
         return result;
       }
       continue;
@@ -341,42 +352,40 @@ export function parseEChart(
     }
   }
 
+  const warn = (line: number, message: string): void => {
+    result.diagnostics.push(makeDgmoError(line, message, 'warning'));
+  };
+
   if (!result.error) {
     if (result.type === 'sankey') {
       if (!result.links || result.links.length === 0) {
-        result.error =
-          'No links found. Add links in format: Source -> Target: 123';
+        warn(1, 'No links found. Add links in format: Source -> Target: 123');
       }
     } else if (result.type === 'chord') {
       if (!result.links || result.links.length === 0) {
-        result.error =
-          'No links found. Add links in format: Source -> Target: 123';
+        warn(1, 'No links found. Add links in format: Source -> Target: 123');
       }
     } else if (result.type === 'function') {
       if (!result.functions || result.functions.length === 0) {
-        result.error =
-          'No functions found. Add functions in format: Name: expression';
+        warn(1, 'No functions found. Add functions in format: Name: expression');
       }
       if (!result.xRange) {
         result.xRange = { min: -10, max: 10 }; // Default range
       }
     } else if (result.type === 'scatter') {
       if (!result.scatterPoints || result.scatterPoints.length === 0) {
-        result.error =
-          'No scatter points found. Add points in format: Name: x, y or Name: x, y, size';
+        warn(1, 'No scatter points found. Add points in format: Name: x, y or Name: x, y, size');
       }
     } else if (result.type === 'heatmap') {
       if (!result.heatmapRows || result.heatmapRows.length === 0) {
-        result.error =
-          'No heatmap data found. Add data in format: RowLabel: val1, val2, val3';
+        warn(1, 'No heatmap data found. Add data in format: RowLabel: val1, val2, val3');
       }
       if (!result.columns || result.columns.length === 0) {
-        result.error =
-          'No columns defined. Add columns in format: columns: Col1, Col2, Col3';
+        warn(1, 'No columns defined. Add columns in format: columns: Col1, Col2, Col3');
       }
     } else if (result.type === 'funnel') {
       if (result.data.length === 0) {
-        result.error = 'No data found. Add data in format: Label: value';
+        warn(1, 'No data found. Add data in format: Label: value');
       }
     }
   }

package/src/er/layout.ts

@@ -153,17 +153,59 @@ export function layoutERDiagram(parsed: ParsedERDiagram): ERLayoutResult {
     };
   });
 
-  // Compute total dimensions
-  let totalWidth = 0;
-  let totalHeight = 0;
+  // Compute total dimensions from nodes, edge points, and labels
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = 0;
+  let maxY = 0;
   for (const node of layoutNodes) {
+    const left = node.x - node.width / 2;
     const right = node.x + node.width / 2;
+    const top = node.y - node.height / 2;
     const bottom = node.y + node.height / 2;
-    if (right > totalWidth) totalWidth = right;
-    if (bottom > totalHeight) totalHeight = bottom;
+    if (left < minX) minX = left;
+    if (right > maxX) maxX = right;
+    if (top < minY) minY = top;
+    if (bottom > maxY) maxY = bottom;
   }
-  totalWidth += 40;
-  totalHeight += 40;
+  for (const edge of layoutEdges) {
+    for (const pt of edge.points) {
+      if (pt.x < minX) minX = pt.x;
+      if (pt.x > maxX) maxX = pt.x;
+      if (pt.y < minY) minY = pt.y;
+      if (pt.y > maxY) maxY = pt.y;
+    }
+    // Edge labels extend ~50px from midpoint
+    if (edge.label && edge.points.length > 0) {
+      const midPt = edge.points[Math.floor(edge.points.length / 2)];
+      const labelHalfW = (edge.label.length * 7 + 8) / 2;
+      if (midPt.x + labelHalfW > maxX) maxX = midPt.x + labelHalfW;
+      if (midPt.x - labelHalfW < minX) minX = midPt.x - labelHalfW;
+    }
+  }
+
+  // Padding for cardinality markers (~25px) + edge labels
+  const EDGE_MARGIN = 60;
+  const HALF_MARGIN = EDGE_MARGIN / 2;
+
+  // Shift all nodes and edges so content starts at HALF_MARGIN (breathing room on all sides)
+  const shiftX = -minX + HALF_MARGIN;
+  const shiftY = -minY + HALF_MARGIN;
+  for (const node of layoutNodes) {
+    node.x += shiftX;
+    node.y += shiftY;
+  }
+  for (const edge of layoutEdges) {
+    for (const pt of edge.points) {
+      pt.x += shiftX;
+      pt.y += shiftY;
+    }
+  }
+  maxX += shiftX;
+  maxY += shiftY;
+
+  const totalWidth = maxX + HALF_MARGIN;
+  const totalHeight = maxY + HALF_MARGIN;
 
   return {
     nodes: layoutNodes,

package/src/er/parser.ts

@@ -1,5 +1,6 @@
 import { resolveColor } from '../colors';
 import type { PaletteColors } from '../palettes';
+import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
 import type {
   ParsedERDiagram,
   ERTable,
@@ -155,6 +156,14 @@ export function parseERDiagram(
     options: {},
     tables: [],
     relationships: [],
+    diagnostics: [],
+  };
+
+  const fail = (line: number, message: string): ParsedERDiagram => {
+    const diag = makeDgmoError(line, message);
+    result.diagnostics.push(diag);
+    result.error = formatDgmoError(diag);
+    return result;
   };
 
   const tableMap = new Map<string, ERTable>();
@@ -200,8 +209,11 @@ export function parseERDiagram(
 
       if (key === 'chart') {
         if (value.toLowerCase() !== 'er') {
-          result.error = `Line ${lineNumber}: Expected chart type "er", got "${value}"`;
-          return result;
+          const allTypes = ['er', 'class', 'flowchart', 'sequence', 'org', 'bar', 'line', 'pie', 'scatter', 'sankey', 'venn', 'timeline', 'arc', 'slope'];
+          let msg = `Expected chart type "er", got "${value}"`;
+          const hint = suggest(value.toLowerCase(), allTypes);
+          if (hint) msg += `. ${hint}`;
+          return fail(lineNumber, msg);
         }
         continue;
       }
@@ -278,8 +290,23 @@ export function parseERDiagram(
 
   // Validation
   if (result.tables.length === 0 && !result.error) {
-    result.error =
-      'No tables found. Add table declarations like "users" or "orders (blue)".';
+    const diag = makeDgmoError(1, 'No tables found. Add table declarations like "users" or "orders (blue)".');
+    result.diagnostics.push(diag);
+    result.error = formatDgmoError(diag);
+  }
+
+  // Warn about isolated tables (not in any relationship)
+  if (result.tables.length >= 2 && result.relationships.length >= 1 && !result.error) {
+    const connectedIds = new Set<string>();
+    for (const rel of result.relationships) {
+      connectedIds.add(rel.source);
+      connectedIds.add(rel.target);
+    }
+    for (const table of result.tables) {
+      if (!connectedIds.has(table.id)) {
+        result.diagnostics.push(makeDgmoError(table.lineNumber, `Table "${table.name}" is not connected to any other table`, 'warning'));
+      }
+    }
   }
 
   return result;

package/src/er/renderer.ts

@@ -17,6 +17,7 @@ import { layoutERDiagram } from './layout';
 // ============================================================
 
 const DIAGRAM_PADDING = 20;
+const MAX_SCALE = 3;
 const TABLE_FONT_SIZE = 13;
 const COLUMN_FONT_SIZE = 11;
 const EDGE_LABEL_FONT_SIZE = 11;
@@ -227,7 +228,7 @@ export function renderERDiagram(
   const availH = height - titleHeight;
   const scaleX = (width - DIAGRAM_PADDING * 2) / diagramW;
   const scaleY = (availH - DIAGRAM_PADDING * 2) / diagramH;
-  const scale = Math.min(1, scaleX, scaleY);
+  const scale = Math.min(MAX_SCALE, scaleX, scaleY);
 
   const scaledW = diagramW * scale;
   const scaledH = diagramH * scale;

package/src/er/types.ts

@@ -29,6 +29,8 @@ export interface ERRelationship {
   lineNumber: number;
 }
 
+import type { DgmoError } from '../diagnostics';
+
 export interface ParsedERDiagram {
   type: 'er';
   title?: string;
@@ -36,5 +38,6 @@ export interface ParsedERDiagram {
   options: Record<string, string>;
   tables: ERTable[];
   relationships: ERRelationship[];
+  diagnostics: DgmoError[];
   error?: string;
 }

package/src/graph/flowchart-parser.ts

@@ -1,5 +1,6 @@
 import { resolveColor } from '../colors';
 import type { PaletteColors } from '../palettes';
+import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
 import type {
   ParsedGraph,
   GraphNode,
@@ -236,6 +237,15 @@ export function parseFlowchart(
     direction: 'TB',
     nodes: [],
     edges: [],
+    options: {},
+    diagnostics: [],
+  };
+
+  const fail = (line: number, message: string): ParsedGraph => {
+    const diag = makeDgmoError(line, message);
+    result.diagnostics.push(diag);
+    result.error = formatDgmoError(diag);
+    return result;
   };
 
   const nodeMap = new Map<string, GraphNode>();
@@ -428,8 +438,11 @@ export function parseFlowchart(
 
       if (key === 'chart') {
         if (value.toLowerCase() !== 'flowchart') {
-          result.error = `Line ${lineNumber}: Expected chart type "flowchart", got "${value}"`;
-          return result;
+          const allTypes = ['flowchart', 'sequence', 'class', 'er', 'org', 'bar', 'line', 'pie', 'scatter', 'sankey', 'venn', 'timeline', 'arc', 'slope'];
+          let msg = `Expected chart type "flowchart", got "${value}"`;
+          const hint = suggest(value.toLowerCase(), allTypes);
+          if (hint) msg += `. ${hint}`;
+          return fail(lineNumber, msg);
         }
         continue;
       }
@@ -448,7 +461,8 @@ export function parseFlowchart(
         continue;
       }
 
-      // Unknown metadata — skip
+      // Store other options (e.g., color: off)
+      result.options[key] = value;
       continue;
     }
 
@@ -460,7 +474,23 @@ export function parseFlowchart(
 
   // Validation: no nodes found
   if (result.nodes.length === 0 && !result.error) {
-    result.error = 'No nodes found. Add flowchart content with shape syntax like [Process] or (Start).';
+    const diag = makeDgmoError(1, 'No nodes found. Add flowchart content with shape syntax like [Process] or (Start).');
+    result.diagnostics.push(diag);
+    result.error = formatDgmoError(diag);
+  }
+
+  // Warn about orphaned nodes (not referenced in any edge)
+  if (result.nodes.length >= 2 && result.edges.length >= 1 && !result.error) {
+    const connectedIds = new Set<string>();
+    for (const edge of result.edges) {
+      connectedIds.add(edge.source);
+      connectedIds.add(edge.target);
+    }
+    for (const node of result.nodes) {
+      if (!connectedIds.has(node.id)) {
+        result.diagnostics.push(makeDgmoError(node.lineNumber, `Node "${node.label}" is not connected to any other node`, 'warning'));
+      }
+    }
   }
 
   return result;