@diagrammo/dgmo 0.6.2 → 0.7.0

package/src/dgmo-router.ts

@@ -16,65 +16,9 @@ import { parseC4 } from './c4/parser';
 import { looksLikeInitiativeStatus, parseInitiativeStatus } from './initiative-status/parser';
 import { looksLikeSitemap, parseSitemap } from './sitemap/parser';
 import { parseInfra } from './infra/parser';
+import { parseGantt } from './gantt/parser';
 import type { DgmoError } from './diagnostics';
 
-/**
- * Framework identifiers used by the .dgmo router internally.
- * Not part of the public API — use RenderCategory instead.
- */
-type DgmoFramework = 'echart' | 'd3' | 'mermaid';
-
-/**
- * Maps every supported chart type string to its backing framework (internal).
- */
-const DGMO_CHART_TYPE_MAP: Record<string, DgmoFramework> = {
-  // Standard charts (via ECharts)
-  bar: 'echart',
-  line: 'echart',
-  'multi-line': 'echart',
-  area: 'echart',
-  pie: 'echart',
-  doughnut: 'echart',
-  radar: 'echart',
-  'polar-area': 'echart',
-  'bar-stacked': 'echart',
-
-  // ECharts
-  scatter: 'echart',
-  sankey: 'echart',
-  chord: 'echart',
-  function: 'echart',
-  heatmap: 'echart',
-  funnel: 'echart',
-
-  // D3
-  slope: 'd3',
-  wordcloud: 'd3',
-  arc: 'd3',
-  timeline: 'd3',
-  venn: 'd3',
-  quadrant: 'd3',
-  sequence: 'd3',
-  flowchart: 'd3',
-  class: 'd3',
-  er: 'd3',
-  org: 'd3',
-  kanban: 'd3',
-  c4: 'd3',
-  'initiative-status': 'd3',
-  state: 'd3',
-  sitemap: 'd3',
-  infra: 'd3',
-};
-
-/**
- * Returns the internal framework for a given chart type, or `null` if unknown.
- * Internal only — use getRenderCategory() for public dispatch.
- */
-function getDgmoFramework(chartType: string): DgmoFramework | null {
-  return DGMO_CHART_TYPE_MAP[chartType.toLowerCase()] ?? null;
-}
-
 /**
  * Extracts the `chart:` type value from raw file content.
  * Falls back to inference when no explicit `chart:` line is found
@@ -122,7 +66,7 @@ const VISUALIZATION_TYPES = new Set([
 ]);
 const DIAGRAM_TYPES = new Set([
   'sequence', 'flowchart', 'class', 'er', 'org', 'kanban', 'c4',
-  'initiative-status', 'state', 'sitemap', 'infra',
+  'initiative-status', 'state', 'sitemap', 'infra', 'gantt',
 ]);
 const EXTENDED_CHART_TYPES = new Set([
   'scatter', 'sankey', 'chord', 'function', 'heatmap', 'funnel',
@@ -185,6 +129,7 @@ const PARSE_DISPATCH = new Map<string, (content: string) => { diagnostics: DgmoE
   ['state', (c) => parseState(c)],
   ['sitemap', (c) => parseSitemap(c)],
   ['infra', (c) => parseInfra(c)],
+  ['gantt', (c) => parseGantt(c)],
 ]);
 
 /**

package/src/echarts.ts

@@ -86,6 +86,7 @@ export interface ParsedExtendedChart {
 
 import type { PaletteColors } from './palettes';
 import { getSeriesColors, getSegmentColors } from './palettes';
+import { mix } from './palettes/color-utils';
 import { parseChart } from './chart';
 import type { ParsedChart, ChartEra } from './chart';
 import { makeDgmoError, formatDgmoError, suggest } from './diagnostics';
@@ -98,6 +99,7 @@ import { collectIndentedValues, extractColor, measureIndent, parseSeriesNames }
 
 const EMPHASIS_SELF = { focus: 'self' as const, blurScope: 'global' as const };
 const CHART_BASE: Pick<EChartsOption, 'backgroundColor' | 'animation'> = { backgroundColor: 'transparent', animation: false };
+const CHART_BORDER_WIDTH = 2;
 
 // ============================================================
 // Parser
@@ -487,10 +489,12 @@ export function buildExtendedChartOption(
 
   // Chord diagram
   if (parsed.type === 'chord') {
+    const bg = isDark ? palette.surface : palette.bg;
     return buildChordOption(
       parsed,
       textColor,
       colors,
+      bg,
       titleConfig,
       tooltipTheme
     );
@@ -512,6 +516,7 @@ export function buildExtendedChartOption(
 
   // Scatter plot
   if (parsed.type === 'scatter') {
+    const bg = isDark ? palette.surface : palette.bg;
     return buildScatterOption(
       parsed,
       palette,
@@ -519,6 +524,7 @@ export function buildExtendedChartOption(
       axisLineColor,
       gridOpacity,
       colors,
+      bg,
       titleConfig,
       tooltipTheme
     );
@@ -526,10 +532,12 @@ export function buildExtendedChartOption(
 
   // Funnel chart
   if (parsed.type === 'funnel') {
+    const bg = isDark ? palette.surface : palette.bg;
     return buildFunnelOption(
       parsed,
       textColor,
       colors,
+      bg,
       titleConfig,
       tooltipTheme
     );
@@ -539,6 +547,7 @@ export function buildExtendedChartOption(
   return buildHeatmapOption(
     parsed,
     palette,
+    isDark,
     textColor,
     axisLineColor,
     titleConfig,
@@ -616,6 +625,7 @@ function buildChordOption(
   parsed: ParsedExtendedChart,
   textColor: string,
   colors: string[],
+  bg: string,
   titleConfig: EChartsOption['title'],
   tooltipTheme: Record<string, unknown>
 ): EChartsOption {
@@ -647,12 +657,13 @@ function buildChordOption(
   }
 
   // Create category data for nodes with colors
-  const categories = nodeNames.map((name, index) => ({
-    name,
-    itemStyle: {
-      color: colors[index % colors.length],
-    },
-  }));
+  const categories = nodeNames.map((name, index) => {
+    const stroke = colors[index % colors.length];
+    return {
+      name,
+      itemStyle: { color: mix(stroke, bg, 30), borderColor: stroke, borderWidth: CHART_BORDER_WIDTH },
+    };
+  });
 
   return {
     ...CHART_BASE,
@@ -876,6 +887,7 @@ function buildScatterOption(
   axisLineColor: string,
   gridOpacity: number,
   colors: string[],
+  bg: string,
   titleConfig: EChartsOption['title'],
   tooltipTheme: Record<string, unknown>
 ): EChartsOption {
@@ -919,7 +931,9 @@ function buildScatterOption(
       const data = categoryPoints.map((p) => ({
         name: p.name,
         value: hasSize ? [p.x, p.y, p.size ?? 0] : [p.x, p.y],
-        ...(p.color && { itemStyle: { color: p.color } }),
+        ...(p.color && {
+          itemStyle: { color: mix(p.color, bg, 30), borderColor: p.color, borderWidth: CHART_BORDER_WIDTH },
+        }),
       }));
 
       return {
@@ -929,23 +943,24 @@ function buildScatterOption(
         ...(hasSize
           ? { symbolSize: (val: number[]) => val[2] }
           : { symbolSize: defaultSize }),
-        itemStyle: { color: catColor },
+        itemStyle: { color: mix(catColor, bg, 30), borderColor: catColor, borderWidth: CHART_BORDER_WIDTH },
         label: labelConfig,
         emphasis: emphasisConfig,
       };
     });
   } else {
     // Single series — per-point colors
-    const data = points.map((p, index) => ({
-      name: p.name,
-      value: hasSize ? [p.x, p.y, p.size ?? 0] : [p.x, p.y],
-      ...(hasSize
-        ? { symbolSize: p.size ?? defaultSize }
-        : { symbolSize: defaultSize }),
-      itemStyle: {
-        color: p.color ?? colors[index % colors.length],
-      },
-    }));
+    const data = points.map((p, index) => {
+      const stroke = p.color ?? colors[index % colors.length];
+      return {
+        name: p.name,
+        value: hasSize ? [p.x, p.y, p.size ?? 0] : [p.x, p.y],
+        ...(hasSize
+          ? { symbolSize: p.size ?? defaultSize }
+          : { symbolSize: defaultSize }),
+        itemStyle: { color: mix(stroke, bg, 30), borderColor: stroke, borderWidth: CHART_BORDER_WIDTH },
+      };
+    });
 
     series = [
       {
@@ -1065,11 +1080,13 @@ function buildScatterOption(
 function buildHeatmapOption(
   parsed: ParsedExtendedChart,
   palette: PaletteColors,
+  isDark: boolean,
   textColor: string,
   axisLineColor: string,
   titleConfig: EChartsOption['title'],
   tooltipTheme: Record<string, unknown>
 ): EChartsOption {
+  const bg = isDark ? palette.surface : palette.bg;
   const heatmapRows = parsed.heatmapRows ?? [];
   const columns = parsed.columns ?? [];
   const rowLabels = heatmapRows.map((r) => r.label);
@@ -1144,10 +1161,10 @@ function buildHeatmapOption(
       top: 'center',
       inRange: {
         color: [
-          palette.primary,
-          palette.colors.cyan,
-          palette.colors.yellow,
-          palette.colors.orange,
+          mix(palette.primary, bg, 30),
+          mix(palette.colors.cyan, bg, 30),
+          mix(palette.colors.yellow, bg, 30),
+          mix(palette.colors.orange, bg, 30),
         ],
       },
       textStyle: {
@@ -1158,9 +1175,13 @@ function buildHeatmapOption(
       {
         type: 'heatmap',
         data,
+        itemStyle: {
+          borderWidth: 2,
+          borderColor: bg,
+        },
         label: {
           show: true,
-          color: '#ffffff',
+          color: textColor,
           fontSize: 14,
           fontWeight: 'bold' as const,
         },
@@ -1183,6 +1204,7 @@ function buildFunnelOption(
   parsed: ParsedExtendedChart,
   textColor: string,
   colors: string[],
+  bg: string,
   titleConfig: EChartsOption['title'],
   tooltipTheme: Record<string, unknown>
 ): EChartsOption {
@@ -1190,14 +1212,18 @@ function buildFunnelOption(
   const sorted = [...parsed.data].sort((a, b) => b.value - a.value);
   const topValue = sorted.length > 0 ? sorted[0].value : 1;
 
-  const data = sorted.map((d) => ({
-    name: d.label,
-    value: d.value,
-    itemStyle: {
-      color: d.color ?? colors[parsed.data.indexOf(d) % colors.length],
-      borderWidth: 0,
-    },
-  }));
+  const data = sorted.map((d) => {
+    const stroke = d.color ?? colors[parsed.data.indexOf(d) % colors.length];
+    return {
+      name: d.label,
+      value: d.value,
+      itemStyle: {
+        color: mix(stroke, bg, 30),
+        borderColor: stroke,
+        borderWidth: CHART_BORDER_WIDTH,
+      },
+    };
+  });
 
   // Build lookup for tooltip: previous step value (in sorted order)
   const prevValueMap = new Map<string, number>();
@@ -1394,12 +1420,13 @@ export function buildSimpleChartOption(
   if (parsed.error) return {};
 
   const { textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme } = buildChartCommons(parsed, palette, isDark);
+  const bg = isDark ? palette.surface : palette.bg;
 
   switch (parsed.type) {
     case 'bar':
-      return buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth);
+      return buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, bg, titleConfig, tooltipTheme, chartWidth);
     case 'bar-stacked':
-      return buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth);
+      return buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, bg, titleConfig, tooltipTheme, chartWidth);
     case 'line':
       return parsed.seriesNames
         ? buildMultiLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth)
@@ -1407,13 +1434,13 @@ export function buildSimpleChartOption(
     case 'area':
       return buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth);
     case 'pie':
-      return buildPieOption(parsed, textColor, getSegmentColors(palette, parsed.data.length), titleConfig, tooltipTheme, false);
+      return buildPieOption(parsed, textColor, getSegmentColors(palette, parsed.data.length), bg, titleConfig, tooltipTheme, false);
     case 'doughnut':
-      return buildPieOption(parsed, textColor, getSegmentColors(palette, parsed.data.length), titleConfig, tooltipTheme, true);
+      return buildPieOption(parsed, textColor, getSegmentColors(palette, parsed.data.length), bg, titleConfig, tooltipTheme, true);
     case 'radar':
-      return buildRadarOption(parsed, palette, textColor, gridOpacity, colors, titleConfig, tooltipTheme);
+      return buildRadarOption(parsed, palette, isDark, textColor, gridOpacity, titleConfig, tooltipTheme);
     case 'polar-area':
-      return buildPolarAreaOption(parsed, textColor, getSegmentColors(palette, parsed.data.length), titleConfig, tooltipTheme);
+      return buildPolarAreaOption(parsed, textColor, getSegmentColors(palette, parsed.data.length), bg, titleConfig, tooltipTheme);
   }
 }
 
@@ -1439,6 +1466,7 @@ function buildBarOption(
   splitLineColor: string,
   gridOpacity: number,
   colors: string[],
+  bg: string,
   titleConfig: EChartsOption['title'],
   tooltipTheme: Record<string, unknown>,
   chartWidth?: number
@@ -1446,10 +1474,13 @@ function buildBarOption(
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === 'horizontal';
   const labels = parsed.data.map((d) => d.label);
-  const data = parsed.data.map((d, i) => ({
-    value: d.value,
-    itemStyle: { color: d.color ?? colors[i % colors.length] },
-  }));
+  const data = parsed.data.map((d, i) => {
+    const stroke = d.color ?? colors[i % colors.length];
+    return {
+      value: d.value,
+      itemStyle: { color: mix(stroke, bg, 30), borderColor: stroke, borderWidth: CHART_BORDER_WIDTH },
+    };
+  });
 
   // When category labels are on the y-axis (horizontal bars), they can be wide —
   // compute a nameGap that clears the longest label so the ylabel doesn't overlap.
@@ -1701,15 +1732,19 @@ function buildPieOption(
   parsed: ParsedChart,
   textColor: string,
   colors: string[],
+  bg: string,
   titleConfig: EChartsOption['title'],
   tooltipTheme: Record<string, unknown>,
   isDoughnut: boolean
 ): EChartsOption {
-  const data = parsed.data.map((d, i) => ({
-    name: d.label,
-    value: d.value,
-    itemStyle: { color: d.color ?? colors[i % colors.length] },
-  }));
+  const data = parsed.data.map((d, i) => {
+    const stroke = d.color ?? colors[i % colors.length];
+    return {
+      name: d.label,
+      value: d.value,
+      itemStyle: { color: mix(stroke, bg, 30), borderColor: stroke, borderWidth: CHART_BORDER_WIDTH },
+    };
+  });
 
   return {
     ...CHART_BASE,
@@ -1741,12 +1776,13 @@ function buildPieOption(
 function buildRadarOption(
   parsed: ParsedChart,
   palette: PaletteColors,
+  isDark: boolean,
   textColor: string,
   gridOpacity: number,
-  colors: string[],
   titleConfig: EChartsOption['title'],
   tooltipTheme: Record<string, unknown>
 ): EChartsOption {
+  const bg = isDark ? palette.surface : palette.bg;
   const radarColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const values = parsed.data.map((d) => d.value);
   const maxValue = Math.max(...values) * 1.15;
@@ -1785,7 +1821,7 @@ function buildRadarOption(
           {
             value: values,
             name: parsed.series ?? 'Value',
-            areaStyle: { color: radarColor, opacity: 0.25 },
+            areaStyle: { color: mix(radarColor, bg, 30) },
             lineStyle: { color: radarColor },
             itemStyle: { color: radarColor },
             symbol: 'circle',
@@ -1811,14 +1847,18 @@ function buildPolarAreaOption(
   parsed: ParsedChart,
   textColor: string,
   colors: string[],
+  bg: string,
   titleConfig: EChartsOption['title'],
   tooltipTheme: Record<string, unknown>
 ): EChartsOption {
-  const data = parsed.data.map((d, i) => ({
-    name: d.label,
-    value: d.value,
-    itemStyle: { color: d.color ?? colors[i % colors.length] },
-  }));
+  const data = parsed.data.map((d, i) => {
+    const stroke = d.color ?? colors[i % colors.length];
+    return {
+      name: d.label,
+      value: d.value,
+      itemStyle: { color: mix(stroke, bg, 30), borderColor: stroke, borderWidth: CHART_BORDER_WIDTH },
+    };
+  });
 
   return {
     ...CHART_BASE,
@@ -1855,6 +1895,7 @@ function buildBarStackedOption(
   splitLineColor: string,
   gridOpacity: number,
   colors: string[],
+  bg: string,
   titleConfig: EChartsOption['title'],
   tooltipTheme: Record<string, unknown>,
   chartWidth?: number
@@ -1874,12 +1915,12 @@ function buildBarStackedOption(
       type: 'bar' as const,
       stack: 'total',
       data,
-      itemStyle: { color },
+      itemStyle: { color: mix(color, bg, 30), borderColor: color, borderWidth: CHART_BORDER_WIDTH },
       label: {
         show: true,
         position: 'inside' as const,
         formatter: '{c}',
-        color: '#ffffff',
+        color: textColor,
         fontSize: 14,
         fontWeight: 'bold' as const,
         fontFamily: FONT_FAMILY,

package/src/er/parser.ts

@@ -7,7 +7,6 @@ import type { TagGroup } from '../utils/tag-groups';
 import type {
   ParsedERDiagram,
   ERTable,
-  ERColumn,
   ERConstraint,
   ERCardinality,
 } from './types';
@@ -463,3 +462,33 @@ export function looksLikeERDiagram(content: string): boolean {
 
   return false;
 }
+
+// ============================================================
+// Symbol extraction (for completion API)
+// ============================================================
+
+import type { DiagramSymbols } from '../completion';
+
+/**
+ * Extract table names (entities) and ER keywords from document text.
+ * Used by the dgmo completion API for ghost hints and popup completions.
+ */
+export function extractSymbols(docText: string): DiagramSymbols {
+  const entities: string[] = [];
+  let inMetadata = true;
+  for (const rawLine of docText.split('\n')) {
+    const line = rawLine.trim();
+    if (inMetadata && /^chart\s*:/i.test(line)) continue;
+    if (inMetadata && /^[a-z-]+\s*:/i.test(line)) continue; // metadata key
+    inMetadata = false;
+    if (line.length === 0) continue;
+    if (/^\s/.test(rawLine)) continue; // indented = column definition, not table
+    const m = TABLE_DECL_RE.exec(line);
+    if (m) entities.push(m[1]!);
+  }
+  return {
+    kind: 'er',
+    entities,
+    keywords: ['pk', 'fk', 'unique', 'nullable', '1', '*', '?'],
+  };
+}

package/src/er/renderer.ts

@@ -17,13 +17,12 @@ import {
   LEGEND_CAPSULE_PAD,
   LEGEND_DOT_R,
   LEGEND_ENTRY_FONT_SIZE,
-  LEGEND_ENTRY_FONT_W,
   LEGEND_ENTRY_DOT_GAP,
   LEGEND_ENTRY_TRAIL,
   LEGEND_GROUP_GAP,
 } from '../utils/legend-constants';
 import type { ParsedERDiagram, ERConstraint } from './types';
-import type { ERLayoutResult, ERLayoutNode, ERLayoutEdge } from './layout';
+import type { ERLayoutResult } from './layout';
 import { parseERDiagram } from './parser';
 import { layoutERDiagram } from './layout';
 import { classifyEREntities, ROLE_COLORS, ROLE_LABELS, ROLE_ORDER } from './classify';
@@ -225,7 +224,13 @@ export function renderERDiagram(
 
   const useSemanticColors =
     parsed.tagGroups.length === 0 && layout.nodes.every((n) => !n.color);
-  const legendReserveH = useSemanticColors ? LEGEND_HEIGHT + DIAGRAM_PADDING : 0;
+  const LEGEND_FIXED_GAP = 8;
+  const hasTagLegend = parsed.tagGroups.length > 0;
+  const legendReserveH = useSemanticColors
+    ? LEGEND_HEIGHT + LEGEND_FIXED_GAP
+    : hasTagLegend
+      ? LEGEND_HEIGHT + LEGEND_FIXED_GAP
+      : 0;
 
   const titleHeight = parsed.title ? 40 : 0;
   const diagramW = layout.width;
@@ -255,13 +260,13 @@ export function renderERDiagram(
     scale = Math.min(MAX_SCALE, scaleX, scaleY);
     const scaledW = diagramW * scale;
     offsetX = (viewW - scaledW) / 2;
-    offsetY = titleHeight + DIAGRAM_PADDING;
+    offsetY = titleHeight + legendReserveH + DIAGRAM_PADDING;
   } else {
     viewW = naturalW;
     viewH = naturalH;
     scale = 1;
     offsetX = DIAGRAM_PADDING;
-    offsetY = titleHeight + DIAGRAM_PADDING;
+    offsetY = titleHeight + legendReserveH + DIAGRAM_PADDING;
   }
 
   if (viewW <= 0 || viewH <= 0) return;
@@ -522,7 +527,7 @@ export function renderERDiagram(
     }
 
     let legendX = DIAGRAM_PADDING;
-    let legendY = viewH - DIAGRAM_PADDING;
+    let legendY = DIAGRAM_PADDING + titleHeight;
 
     for (const group of parsed.tagGroups) {
       const groupG = legendG.append('g')
@@ -640,7 +645,7 @@ export function renderERDiagram(
       }
 
       const legendX = (viewW - totalWidth) / 2;
-      const legendY = viewH - DIAGRAM_PADDING - LEGEND_HEIGHT;
+      const legendY = DIAGRAM_PADDING + titleHeight;
 
       const semanticLegendG = svg
         .append('g')