@diagrammo/dgmo 0.2.5 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",
@@ -36,6 +36,7 @@
     "gallery": "pnpm build && node scripts/generate-gallery.mjs"
   },
   "dependencies": {
+    "@dagrejs/dagre": "^2.0.4",
     "@resvg/resvg-js": "^2.6.2",
     "d3-array": "^3.2.4",
     "d3-cloud": "^1.2.7",
@@ -51,6 +52,7 @@
     "@types/d3-scale": "^4.0.8",
     "@types/d3-selection": "^3.0.11",
     "@types/d3-shape": "^3.1.7",
+    "@types/dagre": "^0.7.53",
     "@types/jsdom": "^21.1.7",
     "tsup": "^8.5.1",
     "typescript": "^5.7.3",

package/src/d3.ts

@@ -2146,7 +2146,17 @@ export function computeTimeTicks(
   const firstYear = Math.ceil(domainMin);
   const lastYear = Math.floor(domainMax);
   if (lastYear >= firstYear + 1) {
-    for (let y = firstYear; y <= lastYear; y++) {
+    // Decimate ticks for long spans so labels don't overlap
+    const yearSpan = lastYear - firstYear;
+    let step = 1;
+    if (yearSpan > 80) step = 20;
+    else if (yearSpan > 40) step = 10;
+    else if (yearSpan > 20) step = 5;
+    else if (yearSpan > 10) step = 2;
+
+    // Align to step boundary so ticks land on round years (1700, 1710, …)
+    const alignedFirst = Math.ceil(firstYear / step) * step;
+    for (let y = alignedFirst; y <= lastYear; y += step) {
       ticks.push({ pos: scale(y), label: String(y) });
     }
   } else if (span > 0.25) {
@@ -4972,6 +4982,54 @@ export async function renderD3ForExport(
   theme: 'light' | 'dark' | 'transparent',
   palette?: PaletteColors
 ): Promise<string> {
+  // Flowchart uses its own parser pipeline — intercept before parseD3()
+  const { parseDgmoChartType } = await import('./dgmo-router');
+  const detectedType = parseDgmoChartType(content);
+  if (detectedType === 'flowchart') {
+    const { parseFlowchart } = await import('./graph/flowchart-parser');
+    const { layoutGraph } = await import('./graph/layout');
+    const { renderFlowchart } = await import('./graph/flowchart-renderer');
+
+    const isDark = theme === 'dark';
+    const { getPalette } = await import('./palettes');
+    const effectivePalette =
+      palette ?? (isDark ? getPalette('nord').dark : getPalette('nord').light);
+
+    const fcParsed = parseFlowchart(content, effectivePalette);
+    if (fcParsed.error || fcParsed.nodes.length === 0) return '';
+
+    const layout = layoutGraph(fcParsed);
+    const container = document.createElement('div');
+    container.style.width = `${EXPORT_WIDTH}px`;
+    container.style.height = `${EXPORT_HEIGHT}px`;
+    container.style.position = 'absolute';
+    container.style.left = '-9999px';
+    document.body.appendChild(container);
+
+    try {
+      renderFlowchart(container, fcParsed, layout, effectivePalette, isDark, undefined, {
+        width: EXPORT_WIDTH,
+        height: EXPORT_HEIGHT,
+      });
+
+      const svgEl = container.querySelector('svg');
+      if (!svgEl) return '';
+
+      if (theme === 'transparent') {
+        svgEl.style.background = 'none';
+      } else if (!svgEl.style.background) {
+        svgEl.style.background = effectivePalette.bg;
+      }
+
+      svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+      svgEl.style.fontFamily = FONT_FAMILY;
+
+      return svgEl.outerHTML;
+    } finally {
+      document.body.removeChild(container);
+    }
+  }
+
   const parsed = parseD3(content, palette);
   // Allow sequence diagrams through even if parseD3 errors —
   // sequence is parsed by its own dedicated parser (parseSequenceDgmo)

package/src/dgmo-router.ts

@@ -3,6 +3,7 @@
 // ============================================================
 
 import { looksLikeSequence } from './sequence/parser';
+import { looksLikeFlowchart } from './graph/flowchart-parser';
 
 /**
  * Framework identifiers used by the .dgmo router.
@@ -44,6 +45,7 @@ export const DGMO_CHART_TYPE_MAP: Record<string, DgmoFramework> = {
   venn: 'd3',
   quadrant: 'd3',
   sequence: 'd3',
+  flowchart: 'd3',
 };
 
 /**
@@ -69,8 +71,10 @@ export function parseDgmoChartType(content: string): string | null {
     if (match) return match[1].trim().toLowerCase();
   }
 
-  // Infer sequence chart type when content contains arrow patterns
+  // Infer chart type from content patterns (sequence before flowchart —
+  // both use `->` but sequence uses bare names while flowchart uses shape delimiters)
   if (looksLikeSequence(content)) return 'sequence';
+  if (looksLikeFlowchart(content)) return 'flowchart';
 
   return null;
 }

package/src/echarts.ts

@@ -395,7 +395,7 @@ export function buildEChartsOption(
 ): EChartsOption {
   const textColor = palette.text;
   const axisLineColor = palette.border;
-  const gridOpacity = isDark ? 0.7 : 0.4;
+  const gridOpacity = isDark ? 0.7 : 0.55;
   const colors = getSeriesColors(palette);
 
   if (parsed.error) {
@@ -1300,7 +1300,7 @@ export function buildEChartsOptionFromChart(
   const textColor = palette.text;
   const axisLineColor = palette.border;
   const splitLineColor = palette.border;
-  const gridOpacity = isDark ? 0.7 : 0.4;
+  const gridOpacity = isDark ? 0.7 : 0.55;
   const colors = getSeriesColors(palette);
 
   const titleConfig = parsed.title

package/src/graph/flowchart-parser.ts

@@ -0,0 +1,499 @@
+import { resolveColor } from '../colors';
+import type { PaletteColors } from '../palettes';
+import type {
+  ParsedGraph,
+  GraphNode,
+  GraphEdge,
+  GraphGroup,
+  GraphShape,
+  GraphDirection,
+} from './types';
+
+// ============================================================
+// Helpers
+// ============================================================
+
+function measureIndent(line: string): number {
+  let indent = 0;
+  for (const ch of line) {
+    if (ch === ' ') indent++;
+    else if (ch === '\t') indent += 4;
+    else break;
+  }
+  return indent;
+}
+
+function nodeId(shape: GraphShape, label: string): string {
+  return `${shape}:${label.toLowerCase().trim()}`;
+}
+
+interface NodeRef {
+  id: string;
+  label: string;
+  shape: GraphShape;
+  color?: string;
+}
+
+const COLOR_SUFFIX_RE = /\(([^)]+)\)\s*$/;
+
+function extractColor(
+  label: string,
+  palette?: PaletteColors
+): { label: string; color?: string } {
+  const m = label.match(COLOR_SUFFIX_RE);
+  if (!m) return { label };
+  const colorName = m[1].trim();
+  return {
+    label: label.substring(0, m.index!).trim(),
+    color: resolveColor(colorName, palette),
+  };
+}
+
+/**
+ * Try to parse a node reference from a text fragment.
+ * Order matters: subroutine & document before process.
+ */
+function parseNodeRef(
+  text: string,
+  palette?: PaletteColors
+): NodeRef | null {
+  const t = text.trim();
+  if (!t) return null;
+
+  // Subroutine: [[Label]]
+  let m = t.match(/^\[\[([^\]]+)\]\]$/);
+  if (m) {
+    const { label, color } = extractColor(m[1].trim(), palette);
+    return { id: nodeId('subroutine', label), label, shape: 'subroutine', color };
+  }
+
+  // Document: [Label~]
+  m = t.match(/^\[([^\]]+)~\]$/);
+  if (m) {
+    const { label, color } = extractColor(m[1].trim(), palette);
+    return { id: nodeId('document', label), label, shape: 'document', color };
+  }
+
+  // Process: [Label]
+  m = t.match(/^\[([^\]]+)\]$/);
+  if (m) {
+    const { label, color } = extractColor(m[1].trim(), palette);
+    return { id: nodeId('process', label), label, shape: 'process', color };
+  }
+
+  // Terminal: (Label) — use .+ (greedy) so (Label(color)) matches outermost parens
+  m = t.match(/^\((.+)\)$/);
+  if (m) {
+    const { label, color } = extractColor(m[1].trim(), palette);
+    return { id: nodeId('terminal', label), label, shape: 'terminal', color };
+  }
+
+  // Decision: <Label>
+  m = t.match(/^<([^>]+)>$/);
+  if (m) {
+    const { label, color } = extractColor(m[1].trim(), palette);
+    return { id: nodeId('decision', label), label, shape: 'decision', color };
+  }
+
+  // I/O: /Label/
+  m = t.match(/^\/([^/]+)\/$/);
+  if (m) {
+    const { label, color } = extractColor(m[1].trim(), palette);
+    return { id: nodeId('io', label), label, shape: 'io', color };
+  }
+
+  return null;
+}
+
+/**
+ * Split a line into segments around arrow tokens.
+ * Arrows: `->`, `-label->`, `-(color)->`, `-label(color)->`
+ *
+ * Returns alternating: [nodeText, arrowText, nodeText, arrowText, nodeText, ...]
+ * Where arrowText is the full arrow token like `-yes->` or `->`.
+ */
+function splitArrows(line: string): string[] {
+  const segments: string[] = [];
+  // Match: optional `-label(color)->` or just `->`
+  // We scan left to right looking for `->` and work backwards to find the `-` start.
+  const arrowRe = /(?:^|\s)-([^>\s(][^(>]*?)?\s*(?:\(([^)]+)\))?\s*->|(?:^|\s)->/g;
+
+  let lastIndex = 0;
+  // Simpler approach: find all `->` positions, then determine if there's a label prefix
+  const arrowPositions: { start: number; end: number; label?: string; color?: string }[] = [];
+
+  // Find all -> occurrences
+  let searchFrom = 0;
+  while (searchFrom < line.length) {
+    const idx = line.indexOf('->', searchFrom);
+    if (idx === -1) break;
+
+    // Look backwards from idx to find the start of the arrow (the `-` that starts the label)
+    let arrowStart = idx;
+    let label: string | undefined;
+    let color: string | undefined;
+
+    // Check if there's content between a preceding `-` and this `->` (e.g., `-yes->`)
+    // Walk backwards from idx-1 to find another `-` that could be the arrow start
+    if (idx > 0 && line[idx - 1] !== ' ' && line[idx - 1] !== '\t') {
+      // There might be label/color content attached: e.g. `-yes->` or `-(blue)->`
+      // The arrow token starts with `-` followed by optional label, optional (color), then `->`
+      // We need to find the opening `-` before any label text
+      // Scan backwards to find a `-` preceded by whitespace or start-of-line
+      let scanBack = idx - 1;
+      while (scanBack > 0 && line[scanBack] !== '-') {
+        scanBack--;
+      }
+      // Check if this `-` could be the start of the arrow
+      if (line[scanBack] === '-' && (scanBack === 0 || /\s/.test(line[scanBack - 1]))) {
+        // Content between opening `-` and `->` (strip trailing `-` that is part of `->`)
+        let arrowContent = line.substring(scanBack + 1, idx);
+        if (arrowContent.endsWith('-')) arrowContent = arrowContent.slice(0, -1);
+        // Parse label and color from arrow content
+        const colorMatch = arrowContent.match(/\(([^)]+)\)\s*$/);
+        if (colorMatch) {
+          color = colorMatch[1].trim();
+          const labelPart = arrowContent.substring(0, colorMatch.index!).trim();
+          if (labelPart) label = labelPart;
+        } else {
+          const labelPart = arrowContent.trim();
+          if (labelPart) label = labelPart;
+        }
+        arrowStart = scanBack;
+      }
+    }
+
+    arrowPositions.push({ start: arrowStart, end: idx + 2, label, color });
+    searchFrom = idx + 2;
+  }
+
+  if (arrowPositions.length === 0) {
+    return [line];
+  }
+
+  // Build segments
+  for (let i = 0; i < arrowPositions.length; i++) {
+    const arrow = arrowPositions[i];
+    const beforeText = line.substring(lastIndex, arrow.start).trim();
+    if (beforeText || i === 0) {
+      segments.push(beforeText);
+    }
+    // Arrow marker
+    let arrowToken = '->';
+    if (arrow.label && arrow.color) arrowToken = `-${arrow.label}(${arrow.color})->`;
+    else if (arrow.label) arrowToken = `-${arrow.label}->`;
+    else if (arrow.color) arrowToken = `-(${arrow.color})->`;
+    segments.push(arrowToken);
+    lastIndex = arrow.end;
+  }
+  // Remaining text after last arrow
+  const remaining = line.substring(lastIndex).trim();
+  if (remaining) {
+    segments.push(remaining);
+  }
+
+  return segments;
+}
+
+interface ArrowInfo {
+  label?: string;
+  color?: string;
+}
+
+function parseArrowToken(token: string, palette?: PaletteColors): ArrowInfo {
+  if (token === '->') return {};
+  // Color-only: -(color)->
+  const colorOnly = token.match(/^-\(([^)]+)\)->$/);
+  if (colorOnly) {
+    return { color: resolveColor(colorOnly[1].trim(), palette) };
+  }
+  // -label(color)-> or -label->
+  const m = token.match(/^-(.+?)(?:\(([^)]+)\))?->$/);
+  if (m) {
+    const label = m[1]?.trim() || undefined;
+    const color = m[2] ? resolveColor(m[2].trim(), palette) : undefined;
+    return { label, color };
+  }
+  return {};
+}
+
+// ============================================================
+// Group heading pattern
+// ============================================================
+const GROUP_HEADING_RE = /^##\s+(.+?)(?:\(([^)]+)\))?\s*$/;
+
+// ============================================================
+// Main parser
+// ============================================================
+
+export function parseFlowchart(
+  content: string,
+  palette?: PaletteColors
+): ParsedGraph {
+  const lines = content.split('\n');
+  const result: ParsedGraph = {
+    type: 'flowchart',
+    direction: 'TB',
+    nodes: [],
+    edges: [],
+  };
+
+  const nodeMap = new Map<string, GraphNode>();
+  const indentStack: { nodeId: string; indent: number }[] = [];
+  let currentGroup: GraphGroup | null = null;
+  const groups: GraphGroup[] = [];
+  let contentStarted = false;
+
+  function getOrCreateNode(ref: NodeRef, lineNumber: number): GraphNode {
+    const existing = nodeMap.get(ref.id);
+    if (existing) return existing;
+
+    const node: GraphNode = {
+      id: ref.id,
+      label: ref.label,
+      shape: ref.shape,
+      lineNumber,
+      ...(ref.color && { color: ref.color }),
+      ...(currentGroup && { group: currentGroup.id }),
+    };
+    nodeMap.set(ref.id, node);
+    result.nodes.push(node);
+
+    // Add to current group
+    if (currentGroup && !currentGroup.nodeIds.includes(ref.id)) {
+      currentGroup.nodeIds.push(ref.id);
+    }
+
+    return node;
+  }
+
+  function addEdge(
+    sourceId: string,
+    targetId: string,
+    lineNumber: number,
+    label?: string,
+    color?: string
+  ): void {
+    const edge: GraphEdge = {
+      source: sourceId,
+      target: targetId,
+      lineNumber,
+      ...(label && { label }),
+      ...(color && { color }),
+    };
+    result.edges.push(edge);
+  }
+
+  /**
+   * Process a content line that may contain nodes and arrows.
+   * Returns the last node ID encountered (for indent stack tracking).
+   */
+  function processContentLine(
+    trimmed: string,
+    lineNumber: number,
+    indent: number
+  ): string | null {
+    contentStarted = true;
+
+    // Determine implicit source from indent stack
+    // Pop stack entries that are at same or deeper indent level
+    while (indentStack.length > 0) {
+      const top = indentStack[indentStack.length - 1];
+      if (top.indent >= indent) {
+        indentStack.pop();
+      } else {
+        break;
+      }
+    }
+
+    const implicitSourceId =
+      indentStack.length > 0
+        ? indentStack[indentStack.length - 1].nodeId
+        : null;
+
+    // Split line into segments around arrows
+    const segments = splitArrows(trimmed);
+
+    if (segments.length === 1) {
+      // Single node reference, no arrows
+      const ref = parseNodeRef(segments[0], palette);
+      if (ref) {
+        const node = getOrCreateNode(ref, lineNumber);
+        indentStack.push({ nodeId: node.id, indent });
+        return node.id;
+      }
+      return null;
+    }
+
+    // Process chain: alternating nodeText / arrowToken / nodeText / ...
+    let lastNodeId: string | null = null;
+    let pendingArrow: ArrowInfo | null = null;
+
+    for (let i = 0; i < segments.length; i++) {
+      const seg = segments[i];
+
+      // Check if this is an arrow token
+      if (seg === '->' || /^-.+->$/.test(seg)) {
+        pendingArrow = parseArrowToken(seg, palette);
+        continue;
+      }
+
+      // This is a node text segment
+      const ref = parseNodeRef(seg, palette);
+      if (!ref) continue;
+
+      const node = getOrCreateNode(ref, lineNumber);
+
+      if (pendingArrow !== null) {
+        const sourceId = lastNodeId ?? implicitSourceId;
+        if (sourceId) {
+          addEdge(
+            sourceId,
+            node.id,
+            lineNumber,
+            pendingArrow.label,
+            pendingArrow.color
+          );
+        }
+        pendingArrow = null;
+      } else if (lastNodeId === null && implicitSourceId === null) {
+        // First node in chain, no arrow yet — just register
+      }
+
+      lastNodeId = node.id;
+    }
+
+    // If we ended with a pending arrow but no target node, that's an edge-only line
+    // handled by: the arrow was at the start with implicit source
+    if (pendingArrow !== null && lastNodeId === null && implicitSourceId) {
+      // Edge-only line like `  -> ` with no target — ignore
+    }
+
+    // If line started with an arrow and we have an implicit source
+    // but no explicit first node, the first segment was empty
+    if (
+      segments.length >= 2 &&
+      segments[0] === '' &&
+      implicitSourceId &&
+      lastNodeId
+    ) {
+      // Already handled above — the implicit source was used
+    }
+
+    if (lastNodeId) {
+      indentStack.push({ nodeId: lastNodeId, indent });
+    }
+
+    return lastNodeId;
+  }
+
+  // === Main loop ===
+  for (let i = 0; i < lines.length; i++) {
+    const raw = lines[i];
+    const trimmed = raw.trim();
+    const lineNumber = i + 1;
+    const indent = measureIndent(raw);
+
+    // Skip empty lines
+    if (!trimmed) continue;
+
+    // Skip comments
+    if (trimmed.startsWith('//')) continue;
+
+    // Group headings
+    const groupMatch = trimmed.match(GROUP_HEADING_RE);
+    if (groupMatch) {
+      const groupLabel = groupMatch[1].trim();
+      const groupColorName = groupMatch[2]?.trim();
+      const groupColor = groupColorName
+        ? resolveColor(groupColorName, palette)
+        : undefined;
+
+      currentGroup = {
+        id: `group:${groupLabel.toLowerCase()}`,
+        label: groupLabel,
+        nodeIds: [],
+        lineNumber,
+        ...(groupColor && { color: groupColor }),
+      };
+      groups.push(currentGroup);
+      continue;
+    }
+
+    // Metadata directives (before content)
+    if (!contentStarted && trimmed.includes(':') && !trimmed.includes('->')) {
+      const colonIdx = trimmed.indexOf(':');
+      const key = trimmed.substring(0, colonIdx).trim().toLowerCase();
+      const value = trimmed.substring(colonIdx + 1).trim();
+
+      if (key === 'chart') {
+        if (value.toLowerCase() !== 'flowchart') {
+          result.error = `Line ${lineNumber}: Expected chart type "flowchart", got "${value}"`;
+          return result;
+        }
+        continue;
+      }
+
+      if (key === 'title') {
+        result.title = value;
+        continue;
+      }
+
+      if (key === 'direction') {
+        const dir = value.toUpperCase() as GraphDirection;
+        if (dir === 'TB' || dir === 'LR') {
+          result.direction = dir;
+        }
+        continue;
+      }
+
+      // Unknown metadata — skip
+      continue;
+    }
+
+    // Content line (nodes and edges)
+    processContentLine(trimmed, lineNumber, indent);
+  }
+
+  if (groups.length > 0) result.groups = groups;
+
+  // 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).';
+  }
+
+  return result;
+}
+
+// ============================================================
+// Detection helper
+// ============================================================
+
+/**
+ * Detect if content looks like a flowchart (without explicit `chart: flowchart` header).
+ * Checks for shape delimiters combined with `->` arrows.
+ * Avoids false-positives on sequence diagrams (which use bare names with `->`)
+ */
+export function looksLikeFlowchart(content: string): boolean {
+  // Must have -> arrows
+  if (!content.includes('->')) return false;
+
+  // Must have at least one shape delimiter pattern
+  // Shape delimiters: [...], (...), <...>, /.../, [[...]], [...~]
+  // Sequence diagrams use bare names like "Alice -> Bob: msg" — no delimiters around names
+  const hasShapeDelimiter =
+    /\[[^\]]+\]/.test(content) ||
+    /\([^)]+\)/.test(content) ||
+    /<[^>]+>/.test(content) ||
+    /\/[^/]+\//.test(content);
+
+  if (!hasShapeDelimiter) return false;
+
+  // Check that shape delimiters appear near arrows (not just random brackets)
+  // Look for patterns like `[X] ->` or `-> [X]` or `(X) ->` etc.
+  const shapeNearArrow =
+    /[\])][ \t]*-.*->/.test(content) || // shape ] or ) followed by arrow
+    /->[ \t]*[\[(<\/]/.test(content); // arrow followed by shape opener
+
+  return shapeNearArrow;
+}