@diagrammo/dgmo 0.6.3 → 0.7.1

package/src/d3.ts

@@ -181,7 +181,7 @@ import { getSeriesColors } from './palettes';
 import { mix } from './palettes/color-utils';
 import type { DgmoError } from './diagnostics';
 import { makeDgmoError, formatDgmoError, suggest } from './diagnostics';
-import { collectIndentedValues, extractColor, parsePipeMetadata } from './utils/parsing';
+import { collectIndentedValues, extractColor, parsePipeMetadata, MULTIPLE_PIPE_WARNING } from './utils/parsing';
 import { matchTagBlockHeading, validateTagValues, resolveTagColor } from './utils/tag-groups';
 import type { TagGroup } from './utils/tag-groups';
 import {
@@ -545,9 +545,9 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         continue;
       }
 
-      // Timeline marker lines: marker YYYY: Label (color)
+      // Timeline marker lines: marker: YYYY Label (color)
       const markerMatch = line.match(
-        /^marker\s+(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*:\s*(.+?)(?:\s*\(([^)]+)\))?\s*$/
+        /^marker:\s+(\d{4}(?:-\d{2})?(?:-\d{2})?)\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/
       );
       if (markerMatch) {
         const colorAnnotation = markerMatch[3]?.trim() || null;
@@ -579,7 +579,7 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
         const endDate = addDurationToDate(startDate, amount, unit);
         const segments = durationMatch[5].split('|');
         const metadata = segments.length > 1
-          ? parsePipeMetadata(['', ...segments.slice(1)], timelineAliasMap)
+          ? parsePipeMetadata(['', ...segments.slice(1)], timelineAliasMap, () => warn(lineNumber, MULTIPLE_PIPE_WARNING))
           : {};
         result.timelineEvents.push({
           date: startDate,
@@ -600,7 +600,7 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       if (rangeMatch) {
         const segments = rangeMatch[4].split('|');
         const metadata = segments.length > 1
-          ? parsePipeMetadata(['', ...segments.slice(1)], timelineAliasMap)
+          ? parsePipeMetadata(['', ...segments.slice(1)], timelineAliasMap, () => warn(lineNumber, MULTIPLE_PIPE_WARNING))
           : {};
         result.timelineEvents.push({
           date: rangeMatch[1],
@@ -621,7 +621,7 @@ export function parseVisualization(content: string, palette?: PaletteColors): Pa
       if (pointMatch) {
         const segments = pointMatch[2].split('|');
         const metadata = segments.length > 1
-          ? parsePipeMetadata(['', ...segments.slice(1)], timelineAliasMap)
+          ? parsePipeMetadata(['', ...segments.slice(1)], timelineAliasMap, () => warn(lineNumber, MULTIPLE_PIPE_WARNING))
           : {};
         result.timelineEvents.push({
           date: pointMatch[1],
@@ -3059,7 +3059,7 @@ export function renderTimeline(
     }
   }
 
-  // Reserve space for tag legend at the bottom of chart content
+  // Reserve space for tag legend at the top of chart content (below title/headers)
   const tagLegendReserve = parsed.timelineTagGroups.length > 0 ? 36 : 0;
 
   // ================================================================
@@ -3099,9 +3099,9 @@ export function renderTimeline(
       const scaleMargin = timelineScale ? 40 : 0;
       const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
       const margin = {
-        top: 104 + markerMargin,
+        top: 104 + markerMargin + tagLegendReserve,
         right: 40 + scaleMargin,
-        bottom: 40 + tagLegendReserve,
+        bottom: 40,
         left: 60 + scaleMargin,
       };
       const innerWidth = width - margin.left - margin.right;
@@ -3254,12 +3254,14 @@ export function renderTimeline(
             const rectH = Math.max(y2 - y, 4);
 
             let fill: string = mix(evColor, bg, 30);
+            let stroke: string = evColor;
             if (ev.uncertain) {
               const gradientId = `uncertain-vg-${ev.lineNumber}`;
+              const strokeGradientId = `uncertain-vg-s-${ev.lineNumber}`;
               const defs =
                 svg.select('defs').node() || svg.append('defs').node();
-              d3Selection
-                .select(defs as Element)
+              const defsEl = d3Selection.select(defs as Element);
+              defsEl
                 .append('linearGradient')
                 .attr('id', gradientId)
                 .attr('x1', '0%')
@@ -3277,7 +3279,26 @@ export function renderTimeline(
                 .attr('offset', (d) => d.offset)
                 .attr('stop-color', mix(laneColor, bg, 30))
                 .attr('stop-opacity', (d) => d.opacity);
+              defsEl
+                .append('linearGradient')
+                .attr('id', strokeGradientId)
+                .attr('x1', '0%')
+                .attr('y1', '0%')
+                .attr('x2', '0%')
+                .attr('y2', '100%')
+                .selectAll('stop')
+                .data([
+                  { offset: '0%', opacity: 1 },
+                  { offset: '80%', opacity: 1 },
+                  { offset: '100%', opacity: 0 },
+                ])
+                .enter()
+                .append('stop')
+                .attr('offset', (d) => d.offset)
+                .attr('stop-color', evColor)
+                .attr('stop-opacity', (d) => d.opacity);
               fill = `url(#${gradientId})`;
+              stroke = `url(#${strokeGradientId})`;
             }
 
             evG
@@ -3288,7 +3309,7 @@ export function renderTimeline(
               .attr('height', rectH)
               .attr('rx', 4)
               .attr('fill', fill)
-              .attr('stroke', evColor)
+              .attr('stroke', stroke)
               .attr('stroke-width', 2);
             evG
               .append('text')
@@ -3323,9 +3344,9 @@ export function renderTimeline(
       const scaleMargin = timelineScale ? 40 : 0;
       const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
       const margin = {
-        top: 104 + markerMargin,
+        top: 104 + markerMargin + tagLegendReserve,
         right: 200,
-        bottom: 40 + tagLegendReserve,
+        bottom: 40,
         left: 60 + scaleMargin,
       };
       const innerWidth = width - margin.left - margin.right;
@@ -3474,12 +3495,14 @@ export function renderTimeline(
           const rectH = Math.max(y2 - y, 4);
 
           let fill: string = mix(color, bg, 30);
+          let stroke: string = color;
           if (ev.uncertain) {
             const gradientId = `uncertain-v-${ev.lineNumber}`;
+            const strokeGradientId = `uncertain-v-s-${ev.lineNumber}`;
             const defs =
               svg.select('defs').node() || svg.append('defs').node();
-            d3Selection
-              .select(defs as Element)
+            const defsEl = d3Selection.select(defs as Element);
+            defsEl
               .append('linearGradient')
               .attr('id', gradientId)
               .attr('x1', '0%')
@@ -3497,7 +3520,26 @@ export function renderTimeline(
               .attr('offset', (d) => d.offset)
               .attr('stop-color', mix(color, bg, 30))
               .attr('stop-opacity', (d) => d.opacity);
+            defsEl
+              .append('linearGradient')
+              .attr('id', strokeGradientId)
+              .attr('x1', '0%')
+              .attr('y1', '0%')
+              .attr('x2', '0%')
+              .attr('y2', '100%')
+              .selectAll('stop')
+              .data([
+                { offset: '0%', opacity: 1 },
+                { offset: '80%', opacity: 1 },
+                { offset: '100%', opacity: 0 },
+              ])
+              .enter()
+              .append('stop')
+              .attr('offset', (d) => d.offset)
+              .attr('stop-color', color)
+              .attr('stop-opacity', (d) => d.opacity);
             fill = `url(#${gradientId})`;
+            stroke = `url(#${strokeGradientId})`;
           }
 
           evG
@@ -3508,7 +3550,7 @@ export function renderTimeline(
             .attr('height', rectH)
             .attr('rx', 4)
             .attr('fill', fill)
-            .attr('stroke', color)
+            .attr('stroke', stroke)
             .attr('stroke-width', 2);
           evG
             .append('text')
@@ -3606,9 +3648,9 @@ export function renderTimeline(
     // Group-sorted doesn't need legend space (group names shown on left)
     const baseTopMargin = title ? 50 : 20;
     const margin = {
-      top: baseTopMargin + (timelineScale ? 40 : 0) + markerMargin,
+      top: baseTopMargin + (timelineScale ? 40 : 0) + markerMargin + tagLegendReserve,
       right: 40,
-      bottom: 40 + scaleMargin + tagLegendReserve,
+      bottom: 40 + scaleMargin,
       left: dynamicLeftMargin,
     };
     const innerWidth = width - margin.left - margin.right;
@@ -3785,12 +3827,14 @@ export function renderTimeline(
           const labelFitsInside = rectW >= estLabelWidth;
 
           let fill: string = mix(evColor, bg, 30);
+          let stroke: string = evColor;
           if (ev.uncertain) {
             // Create gradient for uncertain end - fades last 20%
             const gradientId = `uncertain-${ev.lineNumber}`;
+            const strokeGradientId = `uncertain-s-${ev.lineNumber}`;
             const defs = svg.select('defs').node() || svg.append('defs').node();
-            d3Selection
-              .select(defs as Element)
+            const defsEl = d3Selection.select(defs as Element);
+            defsEl
               .append('linearGradient')
               .attr('id', gradientId)
               .attr('x1', '0%')
@@ -3808,7 +3852,26 @@ export function renderTimeline(
               .attr('offset', (d) => d.offset)
               .attr('stop-color', mix(evColor, bg, 30))
               .attr('stop-opacity', (d) => d.opacity);
+            defsEl
+              .append('linearGradient')
+              .attr('id', strokeGradientId)
+              .attr('x1', '0%')
+              .attr('y1', '0%')
+              .attr('x2', '100%')
+              .attr('y2', '0%')
+              .selectAll('stop')
+              .data([
+                { offset: '0%', opacity: 1 },
+                { offset: '80%', opacity: 1 },
+                { offset: '100%', opacity: 0 },
+              ])
+              .enter()
+              .append('stop')
+              .attr('offset', (d) => d.offset)
+              .attr('stop-color', evColor)
+              .attr('stop-opacity', (d) => d.opacity);
             fill = `url(#${gradientId})`;
+            stroke = `url(#${strokeGradientId})`;
           }
 
           evG
@@ -3819,7 +3882,7 @@ export function renderTimeline(
             .attr('height', BAR_H)
             .attr('rx', 4)
             .attr('fill', fill)
-            .attr('stroke', evColor)
+            .attr('stroke', stroke)
             .attr('stroke-width', 2);
 
           if (labelFitsInside) {
@@ -3887,9 +3950,9 @@ export function renderTimeline(
     const scaleMargin = timelineScale ? 24 : 0;
     const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
     const margin = {
-      top: 104 + (timelineScale ? 40 : 0) + markerMargin,
+      top: 104 + (timelineScale ? 40 : 0) + markerMargin + tagLegendReserve,
       right: 40,
-      bottom: 40 + scaleMargin + tagLegendReserve,
+      bottom: 40 + scaleMargin,
       left: 60,
     };
     const innerWidth = width - margin.left - margin.right;
@@ -4047,12 +4110,14 @@ export function renderTimeline(
         const labelFitsInside = rectW >= estLabelWidth;
 
         let fill: string = mix(color, bg, 30);
+        let stroke: string = color;
         if (ev.uncertain) {
           // Create gradient for uncertain end - fades last 20%
           const gradientId = `uncertain-ts-${ev.lineNumber}`;
+          const strokeGradientId = `uncertain-ts-s-${ev.lineNumber}`;
           const defs = svg.select('defs').node() || svg.append('defs').node();
-          d3Selection
-            .select(defs as Element)
+          const defsEl = d3Selection.select(defs as Element);
+          defsEl
             .append('linearGradient')
             .attr('id', gradientId)
             .attr('x1', '0%')
@@ -4070,7 +4135,26 @@ export function renderTimeline(
             .attr('offset', (d) => d.offset)
             .attr('stop-color', mix(color, bg, 30))
             .attr('stop-opacity', (d) => d.opacity);
+          defsEl
+            .append('linearGradient')
+            .attr('id', strokeGradientId)
+            .attr('x1', '0%')
+            .attr('y1', '0%')
+            .attr('x2', '100%')
+            .attr('y2', '0%')
+            .selectAll('stop')
+            .data([
+              { offset: '0%', opacity: 1 },
+              { offset: '80%', opacity: 1 },
+              { offset: '100%', opacity: 0 },
+            ])
+            .enter()
+            .append('stop')
+            .attr('offset', (d) => d.offset)
+            .attr('stop-color', color)
+            .attr('stop-opacity', (d) => d.opacity);
           fill = `url(#${gradientId})`;
+          stroke = `url(#${strokeGradientId})`;
         }
 
         evG
@@ -4081,7 +4165,7 @@ export function renderTimeline(
           .attr('height', BAR_H)
           .attr('rx', 4)
           .attr('fill', fill)
-          .attr('stroke', color)
+          .attr('stroke', stroke)
           .attr('stroke-width', 2);
 
         if (labelFitsInside) {
@@ -4157,7 +4241,8 @@ export function renderTimeline(
     const mainSvg = d3Selection.select(container).select<SVGSVGElement>('svg');
     const mainG = mainSvg.select<SVGGElement>('g');
     if (!mainSvg.empty() && !mainG.empty()) {
-      const legendY = height - LG_HEIGHT - 4;
+      // Position legend at top, below title
+      const legendY = title ? 50 : 10;
 
       const groupBg = isDark
         ? mix(palette.surface, palette.bg, 50)
@@ -5914,7 +5999,7 @@ export async function renderForExport(
     const exportHeight = isLayout.height + PADDING * 2 + titleOffset;
     const container = createExportContainer(exportWidth, exportHeight);
 
-    renderInitiativeStatus(container, isParsed, isLayout, effectivePalette, theme === 'dark', undefined, { width: exportWidth, height: exportHeight });
+    renderInitiativeStatus(container, isParsed, isLayout, effectivePalette, theme === 'dark', { exportDims: { width: exportWidth, height: exportHeight } });
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 
@@ -6003,6 +6088,24 @@ export async function renderForExport(
     return finalizeSvgExport(container, theme, effectivePalette, options);
   }
 
+  if (detectedType === 'gantt') {
+    const { parseGantt } = await import('./gantt/parser');
+    const { calculateSchedule } = await import('./gantt/calculator');
+    const { renderGantt } = await import('./gantt/renderer');
+
+    const effectivePalette = await resolveExportPalette(theme, palette);
+    const ganttParsed = parseGantt(content, effectivePalette);
+    const resolved = calculateSchedule(ganttParsed);
+    if (resolved.tasks.length === 0) return '';
+
+    const EXPORT_W = 1200;
+    const EXPORT_H = 800;
+    const container = createExportContainer(EXPORT_W, EXPORT_H);
+
+    renderGantt(container, resolved, effectivePalette, theme === 'dark', undefined, { width: EXPORT_W, height: EXPORT_H });
+    return finalizeSvgExport(container, theme, effectivePalette, options);
+  }
+
   if (detectedType === 'state') {
     const { parseState } = await import('./graph/state-parser');
     const { layoutGraph } = await import('./graph/layout');

package/src/dgmo-router.ts

@@ -16,6 +16,7 @@ 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';
 
 /**
@@ -65,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',
@@ -128,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/er/parser.ts

@@ -1,7 +1,7 @@
 import { resolveColor } from '../colors';
 import type { PaletteColors } from '../palettes';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
-import { measureIndent, extractColor, parsePipeMetadata } from '../utils/parsing';
+import { measureIndent, extractColor, parsePipeMetadata, MULTIPLE_PIPE_WARNING } from '../utils/parsing';
 import { matchTagBlockHeading, validateTagValues } from '../utils/tag-groups';
 import type { TagGroup } from '../utils/tag-groups';
 import type {
@@ -350,8 +350,10 @@ export function parseERDiagram(
       // Parse pipe metadata: TableName(color) | key: value, key2: value2
       const pipeStr = tableDecl[3]?.trim();
       if (pipeStr) {
-        // parsePipeMetadata skips index 0 (name segment), so prepend empty
-        const meta = parsePipeMetadata(['', pipeStr], aliasMap);
+        // Split on additional pipes (treated as commas) and warn if found
+        const pipeSegments = pipeStr.split('|');
+        const meta = parsePipeMetadata(['', ...pipeSegments], aliasMap,
+          () => result.diagnostics.push(makeDgmoError(lineNumber, MULTIPLE_PIPE_WARNING, 'warning')));
         Object.assign(table.metadata, meta);
       }
 

package/src/er/renderer.ts

@@ -224,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;
@@ -254,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;
@@ -521,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')
@@ -639,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')