@diagrammo/dgmo 0.7.3 → 0.8.0

package/src/graph/flowchart-parser.ts

@@ -1,11 +1,22 @@
 import { resolveColor } from '../colors';
 import type { PaletteColors } from '../palettes';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
-import { measureIndent, extractColor } from '../utils/parsing';
+import {
+  measureIndent,
+  extractColor,
+  normalizeDirection,
+  inferArrowColor,
+  parseFirstLine,
+  OPTION_NOCOLON_RE,
+  GROUP_HASH_RE,
+  DOUBLE_HASH_RE,
+  ALL_CHART_TYPES,
+} from '../utils/parsing';
 import type {
   ParsedGraph,
   GraphNode,
   GraphEdge,
+  GraphGroup,
   GraphShape,
   GraphDirection,
 } from './types';
@@ -177,22 +188,24 @@ function parseArrowToken(token: string, palette?: PaletteColors): ArrowInfo {
   // Color-only: -(color)->
   const colorOnly = token.match(/^-\(([^)]+)\)->$/);
   if (colorOnly) {
-    return { color: resolveColor(colorOnly[1].trim(), palette) };
+    return { color: resolveColor(colorOnly[1].trim(), palette) ?? undefined };
   }
   // -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;
+    let color = m[2] ? resolveColor(m[2].trim(), palette) ?? undefined : undefined;
+    if (label && !color) {
+      color = inferArrowColor(label);
+    }
     return { label, color };
   }
   return {};
 }
 
 // ============================================================
-// Legacy group heading (deprecated — emit error)
+// Group heading support
 // ============================================================
-const LEGACY_GROUP_RE = /^##\s+/;
 
 // ============================================================
 // Main parser
@@ -223,6 +236,12 @@ export function parseFlowchart(
   const nodeMap = new Map<string, GraphNode>();
   const indentStack: { nodeId: string; indent: number }[] = [];
   let contentStarted = false;
+  let firstLineParsed = false;
+
+  // Group support
+  let currentGroup: GraphGroup | null = null;
+  let groupIndent = -1;
+  const groups: GraphGroup[] = [];
 
   function getOrCreateNode(ref: NodeRef, lineNumber: number): GraphNode {
     const existing = nodeMap.get(ref.id);
@@ -234,10 +253,15 @@ export function parseFlowchart(
       shape: ref.shape,
       lineNumber,
       ...(ref.color && { color: ref.color }),
+      ...(currentGroup && { group: currentGroup.id }),
     };
     nodeMap.set(ref.id, node);
     result.nodes.push(node);
 
+    if (currentGroup && !currentGroup.nodeIds.includes(ref.id)) {
+      currentGroup.nodeIds.push(ref.id);
+    }
+
     return node;
   }
 
@@ -374,54 +398,89 @@ export function parseFlowchart(
     // Skip comments
     if (trimmed.startsWith('//')) continue;
 
-    // Legacy ## group headings — no longer supported
-    if (LEGACY_GROUP_RE.test(trimmed)) {
-      result.diagnostics.push(
-        makeDgmoError(lineNumber, '## group syntax is not supported in flowcharts. Remove the ## line.', 'error')
-      );
-      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') {
-          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);
+    // First line: try parseFirstLine for `flowchart [Title]`
+    if (!firstLineParsed && !contentStarted) {
+      const firstLineResult = parseFirstLine(trimmed);
+      if (firstLineResult) {
+        firstLineParsed = true;
+        if (firstLineResult.chartType !== 'flowchart') {
+          const allTypes = Array.from(ALL_CHART_TYPES);
+          let msg = `Expected chart type "flowchart", got "${firstLineResult.chartType}"`;
+          const hint = suggest(firstLineResult.chartType, allTypes);
           if (hint) msg += `. ${hint}`;
           return fail(lineNumber, msg);
         }
+        if (firstLineResult.title) {
+          result.title = firstLineResult.title;
+          result.titleLineNumber = lineNumber;
+        }
         continue;
       }
+    }
 
-      if (key === 'title') {
-        result.title = value;
-        result.titleLineNumber = lineNumber;
-        continue;
-      }
+    // ## group headings — emit helpful error
+    if (DOUBLE_HASH_RE.test(trimmed)) {
+      result.diagnostics.push(
+        makeDgmoError(lineNumber, 'Use `#` for groups \u2014 nesting is done with indentation.', 'error')
+      );
+      continue;
+    }
+
+    // # GroupName — alternate group notation
+    const hashGroupMatch = trimmed.match(GROUP_HASH_RE);
+    if (hashGroupMatch) {
+      const { label, color } = extractColor(hashGroupMatch[1].trim(), palette);
+      currentGroup = {
+        id: `group:${label.toLowerCase()}`,
+        label,
+        nodeIds: [],
+        lineNumber,
+        ...(color && { color }),
+      };
+      groupIndent = indent;
+      groups.push(currentGroup);
+      continue;
+    }
 
-      if (key === 'direction') {
-        const dir = value.toUpperCase() as GraphDirection;
-        if (dir === 'TB' || dir === 'LR') {
-          result.direction = dir;
+    // Options (space-separated, before content)
+    if (!contentStarted) {
+      const optMatch = trimmed.match(OPTION_NOCOLON_RE);
+      if (optMatch && !trimmed.includes('->')) {
+        const key = optMatch[1].toLowerCase();
+        const value = optMatch[2].trim();
+
+        if (key === 'direction' || key === 'orientation') {
+          const dir = normalizeDirection(value);
+          if (dir) {
+            result.direction = dir;
+          }
+          continue;
         }
+
+        // Boolean: no-color = color off
+        if (key === 'no-color') {
+          result.options['color'] = 'off';
+          continue;
+        }
+
+        // Store other options (e.g., color off)
+        result.options[key] = value;
         continue;
       }
+    }
 
-      // Store other options (e.g., color: off)
-      result.options[key] = value;
-      continue;
+    // Close current group when indent returns to or below the group level
+    if (currentGroup && indent <= groupIndent) {
+      currentGroup = null;
+      groupIndent = -1;
     }
 
     // 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) {
     const diag = makeDgmoError(1, 'No nodes found. Add flowchart content with shape syntax like [Process] or (Start).');
@@ -497,7 +556,8 @@ 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 space-separated options
+    if (inMetadata && (/^[a-z-]+\s*:/i.test(line) || /^[a-z-]+\s+\S/i.test(line))) continue;
     inMetadata = false;
     if (line.length === 0 || /^\s/.test(rawLine)) continue;
     const m = NODE_ID_RE.exec(line);

package/src/graph/flowchart-renderer.ts

@@ -11,6 +11,7 @@ import type { ParsedGraph, GraphShape } from './types';
 import type { LayoutResult, LayoutNode } from './layout';
 import { parseFlowchart } from './flowchart-parser';
 import { layoutGraph } from './layout';
+import { TITLE_FONT_SIZE, TITLE_FONT_WEIGHT, TITLE_Y } from '../utils/title-constants';
 
 // ============================================================
 // Constants
@@ -301,11 +302,11 @@ export function renderFlowchart(
       .append('text')
       .attr('class', 'chart-title')
       .attr('x', width / 2)
-      .attr('y', 30)
+      .attr('y', TITLE_Y)
       .attr('text-anchor', 'middle')
       .attr('fill', palette.text)
-      .attr('font-size', '20px')
-      .attr('font-weight', '700')
+      .attr('font-size', TITLE_FONT_SIZE)
+      .attr('font-weight', TITLE_FONT_WEIGHT)
       .style('cursor', onClickItem && graph.titleLineNumber ? 'pointer' : 'default')
       .text(graph.title);
 

package/src/graph/state-parser.ts

@@ -1,7 +1,14 @@
 import { resolveColor } from '../colors';
 import type { PaletteColors } from '../palettes';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
-import { measureIndent, extractColor } from '../utils/parsing';
+import {
+  measureIndent,
+  extractColor,
+  normalizeDirection,
+  parseFirstLine,
+  OPTION_NOCOLON_RE,
+  ALL_CHART_TYPES,
+} from '../utils/parsing';
 import type {
   ParsedGraph,
   GraphNode,
@@ -95,11 +102,11 @@ interface ArrowInfo {
 function parseArrowToken(token: string, palette?: PaletteColors): ArrowInfo {
   if (token === '->') return {};
   const colorOnly = token.match(/^-\(([^)]+)\)->$/);
-  if (colorOnly) return { color: resolveColor(colorOnly[1].trim(), palette) };
+  if (colorOnly) return { color: resolveColor(colorOnly[1].trim(), palette) ?? undefined };
   const m = token.match(/^-(.+?)(?:\(([^)]+)\))?->$/);
   if (m) {
     const label = m[1]?.trim() || undefined;
-    const color = m[2] ? resolveColor(m[2].trim(), palette) : undefined;
+    const color = m[2] ? resolveColor(m[2].trim(), palette) ?? undefined : undefined;
     return { label, color };
   }
   return {};
@@ -168,6 +175,7 @@ export function parseState(
   let groupIndent = -1;
   const groups: GraphGroup[] = [];
   let contentStarted = false;
+  let firstLineParsed = false;
 
   function getOrCreateNode(ref: NodeRef, lineNumber: number): GraphNode {
     const existing = nodeMap.get(ref.id);
@@ -217,6 +225,26 @@ export function parseState(
     if (!trimmed) continue;
     if (trimmed.startsWith('//')) continue;
 
+    // First line: try parseFirstLine for `state [Title]`
+    if (!firstLineParsed && !contentStarted) {
+      const firstLineResult = parseFirstLine(trimmed);
+      if (firstLineResult) {
+        firstLineParsed = true;
+        if (firstLineResult.chartType !== 'state') {
+          const allTypes = Array.from(ALL_CHART_TYPES);
+          let msg = `Expected chart type "state", got "${firstLineResult.chartType}"`;
+          const hint = suggest(firstLineResult.chartType, allTypes);
+          if (hint) msg += `. ${hint}`;
+          return fail(lineNumber, msg);
+        }
+        if (firstLineResult.title) {
+          result.title = firstLineResult.title;
+          result.titleLineNumber = lineNumber;
+        }
+        continue;
+      }
+    }
+
     // Group brackets: [Name] or [Name](color)
     const groupMatch = trimmed.match(GROUP_BRACKET_RE);
     if (groupMatch && groupMatch[1].trim() !== '*') {
@@ -238,39 +266,30 @@ export function parseState(
       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() !== 'state') {
-          const allTypes = ['state', 'flowchart', 'sequence', 'class', 'er', 'org', 'bar', 'line', 'pie', 'scatter', 'sankey', 'venn', 'timeline', 'arc', 'slope'];
-          let msg = `Expected chart type "state", got "${value}"`;
-          const hint = suggest(value.toLowerCase(), allTypes);
-          if (hint) msg += `. ${hint}`;
-          return fail(lineNumber, msg);
+    // Options (space-separated, before content)
+    if (!contentStarted) {
+      const optMatch = trimmed.match(OPTION_NOCOLON_RE);
+      if (optMatch && !trimmed.includes('->')) {
+        const key = optMatch[1].toLowerCase();
+        const value = optMatch[2].trim();
+
+        if (key === 'direction' || key === 'orientation') {
+          const dir = normalizeDirection(value);
+          if (dir) {
+            result.direction = dir;
+          }
+          continue;
         }
-        continue;
-      }
 
-      if (key === 'title') {
-        result.title = value;
-        result.titleLineNumber = lineNumber;
-        continue;
-      }
-
-      if (key === 'direction') {
-        const dir = value.toUpperCase() as GraphDirection;
-        if (dir === 'TB' || dir === 'LR') {
-          result.direction = dir;
+        // Boolean: no-color = color off
+        if (key === 'no-color') {
+          result.options['color'] = 'off';
+          continue;
         }
+
+        result.options[key] = value;
         continue;
       }
-
-      result.options[key] = value;
-      continue;
     }
 
     // Content line — nodes and edges

package/src/graph/state-renderer.ts

@@ -11,6 +11,7 @@ import type { ParsedGraph } from './types';
 import type { LayoutResult, LayoutNode } from './layout';
 import { parseState } from './state-parser';
 import { layoutGraph } from './layout';
+import { TITLE_FONT_SIZE, TITLE_FONT_WEIGHT, TITLE_Y } from '../utils/title-constants';
 
 // ============================================================
 // Constants
@@ -154,11 +155,11 @@ export function renderState(
       .append('text')
       .attr('class', 'chart-title')
       .attr('x', width / 2)
-      .attr('y', 30)
+      .attr('y', TITLE_Y)
       .attr('text-anchor', 'middle')
       .attr('fill', palette.text)
-      .attr('font-size', '20px')
-      .attr('font-weight', '700')
+      .attr('font-size', TITLE_FONT_SIZE)
+      .attr('font-weight', TITLE_FONT_WEIGHT)
       .style('cursor', onClickItem && graph.titleLineNumber ? 'pointer' : 'default')
       .text(graph.title);
 

package/src/index.ts

@@ -139,8 +139,6 @@ export { parseOrg } from './org/parser';
 export type {
   ParsedOrg,
   OrgNode,
-  OrgTagGroup,
-  OrgTagEntry,
 } from './org/parser';
 
 export { layoutOrg } from './org/layout';
@@ -259,7 +257,7 @@ export type { InfraRole } from './infra/roles';
 export { layoutInfra } from './infra/layout';
 export type { InfraLayoutResult, InfraLayoutNode, InfraLayoutEdge, InfraLayoutGroup } from './infra/layout';
 export { renderInfra, parseAndLayoutInfra, computeInfraLegendGroups } from './infra/renderer';
-export type { InfraLegendGroup } from './infra/renderer';
+export type { InfraLegendGroup, InfraPlaybackState } from './infra/renderer';
 export type { CollapsedSitemapResult } from './sitemap/collapse';
 
 // ── Gantt Chart ───────────────────────────────────────────
@@ -306,7 +304,10 @@ export { renderFlowchart, renderFlowchartForExport } from './graph/flowchart-ren
 // Config Builders (produce framework-specific config objects)
 // ============================================================
 
-export { buildExtendedChartOption, buildSimpleChartOption, renderExtendedChartForExport } from './echarts';
+export { buildExtendedChartOption, buildSimpleChartOption, renderExtendedChartForExport, getExtendedChartLegendGroups, getSimpleChartLegendGroups, computeScatterLabelGraphics } from './echarts';
+export type { ScatterLabelPoint } from './echarts';
+export { renderLegendSvg, type LegendGroupData } from './utils/legend-svg';
+export { LEGEND_HEIGHT } from './utils/legend-constants';
 export { buildMermaidQuadrant } from './dgmo-mermaid';
 
 // ============================================================
@@ -395,8 +396,16 @@ export type {
 export {
   registerExtractor,
   extractDiagramSymbols,
+  COMPLETION_REGISTRY,
+  CHART_TYPES,
+  METADATA_KEY_SET,
+  ENTITY_TYPES,
+  PIPE_METADATA,
+  extractTagDeclarations,
 } from './completion';
-export type { DiagramSymbols, ExtractFn } from './completion';
+export type { DiagramSymbols, ExtractFn, DirectiveSpec, DirectiveValueSpec, PipeKeySpec } from './completion';
+
+export { parseFirstLine, ALL_CHART_TYPES } from './utils/parsing';
 
 // ============================================================
 // Branding

package/src/infra/compute.ts

@@ -1141,6 +1141,7 @@ export function computeInfra(
       sourceId: edge.sourceId,
       targetId: edge.targetId,
       label: edge.label,
+      async: edge.async,
       computedRps: rps,
       split: resolvedSplit,
       fanout: edge.fanout,

package/src/infra/layout.ts

@@ -47,6 +47,7 @@ export interface InfraLayoutEdge {
   sourceId: string;
   targetId: string;
   label: string;
+  async: boolean;
   computedRps: number;
   split: number;
   fanout: number | null;
@@ -575,6 +576,7 @@ export function layoutInfra(computed: ComputedInfraModel, expandedNodeIds?: Set<
         sourceId: edge.sourceId,
         targetId: edge.targetId,
         label: edge.label,
+        async: edge.async,
         computedRps: edge.computedRps,
         split: edge.split,
         fanout: edge.fanout,
@@ -587,6 +589,7 @@ export function layoutInfra(computed: ComputedInfraModel, expandedNodeIds?: Set<
         sourceId: edge.sourceId,
         targetId: edge.targetId,
         label: edge.label,
+        async: edge.async,
         computedRps: edge.computedRps,
         split: edge.split,
         fanout: edge.fanout,