@diagrammo/dgmo 0.2.21 → 0.2.23

package/src/c4/types.ts

@@ -0,0 +1,86 @@
+// ============================================================
+// C4 Architecture Diagram — Types
+// ============================================================
+
+import type { OrgTagGroup, OrgTagEntry } from '../org/parser';
+import type { DgmoError } from '../diagnostics';
+
+// Re-export tag types for convenience
+export type { OrgTagGroup as C4TagGroup, OrgTagEntry as C4TagEntry };
+
+// ── String unions ────────────────────────────────────────────
+
+export type C4ElementType = 'person' | 'system' | 'container' | 'component';
+
+export type C4Shape =
+  | 'default'
+  | 'database'
+  | 'cache'
+  | 'queue'
+  | 'cloud'
+  | 'external';
+
+export type C4ArrowType =
+  | 'sync'
+  | 'async'
+  | 'bidirectional'
+  | 'bidirectional-async';
+
+// ── Relationships ────────────────────────────────────────────
+
+export interface C4Relationship {
+  target: string;
+  label?: string;
+  technology?: string;
+  arrowType: C4ArrowType;
+  lineNumber: number;
+}
+
+// ── Groups ───────────────────────────────────────────────────
+
+export interface C4Group {
+  name: string;
+  children: C4Element[];
+  lineNumber: number;
+}
+
+// ── Elements ─────────────────────────────────────────────────
+
+export interface C4Element {
+  name: string;
+  type: C4ElementType;
+  shape: C4Shape;
+  metadata: Record<string, string>;
+  children: C4Element[];
+  groups: C4Group[];
+  relationships: C4Relationship[];
+  importPath?: string;
+  lineNumber: number;
+  sectionHeader?: 'containers' | 'components';
+  sectionHeaderLineNumber?: number;
+}
+
+// ── Deployment ───────────────────────────────────────────────
+
+export interface C4DeploymentNode {
+  name: string;
+  metadata: Record<string, string>;
+  shape: C4Shape;
+  children: C4DeploymentNode[];
+  containerRefs: string[];
+  lineNumber: number;
+}
+
+// ── Parsed result ────────────────────────────────────────────
+
+export interface ParsedC4 {
+  title: string | null;
+  titleLineNumber: number | null;
+  options: Record<string, string>;
+  tagGroups: OrgTagGroup[];
+  elements: C4Element[];
+  relationships: C4Relationship[];
+  deployment: C4DeploymentNode[];
+  diagnostics: DgmoError[];
+  error: string | null;
+}

package/src/class/renderer.ts

@@ -53,7 +53,7 @@ function modifierColor(modifier: ClassModifier | undefined, palette: PaletteColo
 
 function nodeFill(palette: PaletteColors, isDark: boolean, modifier: ClassModifier | undefined, nodeColor?: string, colorOff?: boolean): string {
   const color = nodeColor ?? modifierColor(modifier, palette, colorOff);
-  return mix(color, isDark ? palette.surface : palette.bg, 20);
+  return mix(color, isDark ? palette.surface : palette.bg, 25);
 }
 
 function nodeStroke(palette: PaletteColors, modifier: ClassModifier | undefined, nodeColor?: string, colorOff?: boolean): string {
@@ -137,7 +137,7 @@ export function renderClassDiagram(
   const scaledW = diagramW * scale;
   const scaledH = diagramH * scale;
   const offsetX = (width - scaledW) / 2;
-  const offsetY = titleHeight + (availH - scaledH) / 2;
+  const offsetY = titleHeight + DIAGRAM_PADDING;
 
   const svg = d3Selection
     .select(container)

package/src/cli.ts

@@ -31,16 +31,19 @@ function printHelp(): void {
 Render a .dgmo file to PNG (default) or SVG.
 
 Options:
-  -o <file>         Output file (default: <input>.png in cwd)
-                    Format inferred from extension: .svg → SVG, else PNG
-                    Use -o url to output a shareable diagrammo.app URL
-                    With stdin and no -o, PNG is written to stdout
-  --theme <theme>   Theme: ${THEMES.join(', ')} (default: light)
-  --palette <name>  Palette: ${PALETTES.join(', ')} (default: nord)
-  --no-branding     Omit diagrammo.app branding from exports
-  --copy            Copy URL to clipboard (only with -o url)
-  --help            Show this help
-  --version         Show version`);
+  -o <file>            Output file (default: <input>.png in cwd)
+                       Format inferred from extension: .svg → SVG, else PNG
+                       Use -o url to output a shareable diagrammo.app URL
+                       With stdin and no -o, PNG is written to stdout
+  --theme <theme>      Theme: ${THEMES.join(', ')} (default: light)
+  --palette <name>     Palette: ${PALETTES.join(', ')} (default: nord)
+  --c4-level <level>   C4 render level: context (default), containers, components, deployment
+  --c4-system <name>   System to drill into (with --c4-level containers or components)
+  --c4-container <name> Container to drill into (with --c4-level components)
+  --no-branding        Omit diagrammo.app branding from exports
+  --copy               Copy URL to clipboard (only with -o url)
+  --help               Show this help
+  --version            Show version`);
 }
 
 function printVersion(): void {
@@ -59,6 +62,9 @@ function parseArgs(argv: string[]): {
   version: boolean;
   noBranding: boolean;
   copy: boolean;
+  c4Level: 'context' | 'containers' | 'components' | 'deployment';
+  c4System: string | undefined;
+  c4Container: string | undefined;
 } {
   const result = {
     input: undefined as string | undefined,
@@ -69,6 +75,9 @@ function parseArgs(argv: string[]): {
     version: false,
     noBranding: false,
     copy: false,
+    c4Level: 'context' as 'context' | 'containers' | 'components' | 'deployment',
+    c4System: undefined as string | undefined,
+    c4Container: undefined as string | undefined,
   };
 
   const args = argv.slice(2); // skip node + script
@@ -106,6 +115,22 @@ function parseArgs(argv: string[]): {
       }
       result.palette = val;
       i++;
+    } else if (arg === '--c4-level') {
+      const val = args[++i];
+      if (val !== 'context' && val !== 'containers' && val !== 'components' && val !== 'deployment') {
+        console.error(
+          `Error: Invalid C4 level "${val}". Valid levels: context, containers, components, deployment`
+        );
+        process.exit(1);
+      }
+      result.c4Level = val;
+      i++;
+    } else if (arg === '--c4-system') {
+      result.c4System = args[++i];
+      i++;
+    } else if (arg === '--c4-container') {
+      result.c4Container = args[++i];
+      i++;
     } else if (arg === '--no-branding') {
       result.noBranding = true;
       i++;
@@ -304,10 +329,29 @@ async function main(): Promise<void> {
     console.error(`\u2716 ${formatDgmoError(e)}`);
   }
 
+  // Validate C4 options
+  if (opts.c4Level === 'containers' && !opts.c4System) {
+    console.error('Error: --c4-system is required when --c4-level is containers');
+    process.exit(1);
+  }
+  if (opts.c4Level === 'components') {
+    if (!opts.c4System) {
+      console.error('Error: --c4-system is required when --c4-level is components');
+      process.exit(1);
+    }
+    if (!opts.c4Container) {
+      console.error('Error: --c4-container is required when --c4-level is components');
+      process.exit(1);
+    }
+  }
+
   const svg = await render(content, {
     theme: opts.theme,
     palette: opts.palette,
     branding: !opts.noBranding,
+    c4Level: opts.c4Level,
+    c4System: opts.c4System,
+    c4Container: opts.c4Container,
   });
 
   if (!svg) {

package/src/d3.ts

@@ -429,15 +429,15 @@ export function parseD3(content: string, palette?: PaletteColors): ParsedD3 {
     if (result.type === 'timeline') {
       // Duration event: 2026-07-15->30d: description (d=days, w=weeks, m=months, y=years)
       // Supports decimals up to 2 places (e.g., 1.25y = 1 year 3 months)
-      // Supports uncertain end with ? prefix (e.g., ->?3m fades out the last 20%)
+      // Supports uncertain end with ? suffix (e.g., ->3m?: fades out the last 20%)
       const durationMatch = line.match(
-        /^(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*->\s*(\?)?(\d+(?:\.\d{1,2})?)([dwmy])\s*:\s*(.+)$/
+        /^(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*->\s*(\d+(?:\.\d{1,2})?)([dwmy])(\?)?\s*:\s*(.+)$/
       );
       if (durationMatch) {
         const startDate = durationMatch[1];
-        const uncertain = durationMatch[2] === '?';
-        const amount = parseFloat(durationMatch[3]);
-        const unit = durationMatch[4] as 'd' | 'w' | 'm' | 'y';
+        const uncertain = durationMatch[4] === '?';
+        const amount = parseFloat(durationMatch[2]);
+        const unit = durationMatch[3] as 'd' | 'w' | 'm' | 'y';
         const endDate = addDurationToDate(startDate, amount, unit);
         result.timelineEvents.push({
           date: startDate,
@@ -450,18 +450,18 @@ export function parseD3(content: string, palette?: PaletteColors): ParsedD3 {
         continue;
       }
 
-      // Range event: 1655->1667: description (supports uncertain end: 1655->?1667)
+      // Range event: 1655->1667: description (supports uncertain end: 1655->1667?)
       const rangeMatch = line.match(
-        /^(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*->\s*(\?)?(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*:\s*(.+)$/
+        /^(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*->\s*(\d{4}(?:-\d{2})?(?:-\d{2})?)(\?)?\s*:\s*(.+)$/
       );
       if (rangeMatch) {
         result.timelineEvents.push({
           date: rangeMatch[1],
-          endDate: rangeMatch[3],
+          endDate: rangeMatch[2],
           label: rangeMatch[4].trim(),
           group: currentTimelineGroup,
           lineNumber,
-          uncertain: rangeMatch[2] === '?',
+          uncertain: rangeMatch[3] === '?',
         });
         continue;
       }
@@ -5263,7 +5263,7 @@ export async function renderD3ForExport(
     activeTagGroup?: string | null;
     hiddenAttributes?: Set<string>;
   },
-  options?: { branding?: boolean }
+  options?: { branding?: boolean; c4Level?: 'context' | 'containers' | 'components' | 'deployment'; c4System?: string; c4Container?: string }
 ): Promise<string> {
   // Flowchart and org chart use their own parser pipelines — intercept before parseD3()
   const { parseDgmoChartType } = await import('./dgmo-router');
@@ -5512,6 +5512,144 @@ export async function renderD3ForExport(
     }
   }
 
+  if (detectedType === 'initiative-status') {
+    const { parseInitiativeStatus } = await import('./initiative-status/parser');
+    const { layoutInitiativeStatus } = await import('./initiative-status/layout');
+    const { renderInitiativeStatus } = await import('./initiative-status/renderer');
+
+    const isDark = theme === 'dark';
+    const { getPalette } = await import('./palettes');
+    const effectivePalette =
+      palette ?? (isDark ? getPalette('nord').dark : getPalette('nord').light);
+
+    const isParsed = parseInitiativeStatus(content);
+    if (isParsed.error || isParsed.nodes.length === 0) return '';
+
+    const isLayout = layoutInitiativeStatus(isParsed);
+    const PADDING = 20;
+    const titleOffset = isParsed.title ? 40 : 0;
+    const exportWidth = isLayout.width + PADDING * 2;
+    const exportHeight = isLayout.height + PADDING * 2 + titleOffset;
+
+    const container = document.createElement('div');
+    container.style.width = `${exportWidth}px`;
+    container.style.height = `${exportHeight}px`;
+    container.style.position = 'absolute';
+    container.style.left = '-9999px';
+    document.body.appendChild(container);
+
+    try {
+      renderInitiativeStatus(
+        container,
+        isParsed,
+        isLayout,
+        effectivePalette,
+        isDark,
+        undefined,
+        { width: exportWidth, height: exportHeight }
+      );
+
+      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;
+
+      const svgHtml = svgEl.outerHTML;
+      if (options?.branding !== false) {
+        const brandColor = theme === 'transparent' ? '#888' : effectivePalette.textMuted;
+        return injectBranding(svgHtml, brandColor);
+      }
+      return svgHtml;
+    } finally {
+      document.body.removeChild(container);
+    }
+  }
+
+  if (detectedType === 'c4') {
+    const { parseC4 } = await import('./c4/parser');
+    const { layoutC4Context, layoutC4Containers, layoutC4Components, layoutC4Deployment } = await import('./c4/layout');
+    const { renderC4Context, renderC4Containers } = await import('./c4/renderer');
+
+    const isDark = theme === 'dark';
+    const { getPalette } = await import('./palettes');
+    const effectivePalette =
+      palette ?? (isDark ? getPalette('nord').dark : getPalette('nord').light);
+
+    const c4Parsed = parseC4(content, effectivePalette);
+    if (c4Parsed.error || c4Parsed.elements.length === 0) return '';
+
+    // Container/component-level rendering
+    const c4Level = options?.c4Level ?? 'context';
+    const c4System = options?.c4System;
+    const c4Container = options?.c4Container;
+
+    const c4Layout = c4Level === 'deployment'
+      ? layoutC4Deployment(c4Parsed)
+      : c4Level === 'components' && c4System && c4Container
+        ? layoutC4Components(c4Parsed, c4System, c4Container)
+        : c4Level === 'containers' && c4System
+          ? layoutC4Containers(c4Parsed, c4System)
+          : layoutC4Context(c4Parsed);
+
+    if (c4Layout.nodes.length === 0) return '';
+
+    const PADDING = 20;
+    const titleOffset = c4Parsed.title ? 40 : 0;
+    const exportWidth = c4Layout.width + PADDING * 2;
+    const exportHeight = c4Layout.height + PADDING * 2 + titleOffset;
+
+    const container = document.createElement('div');
+    container.style.width = `${exportWidth}px`;
+    container.style.height = `${exportHeight}px`;
+    container.style.position = 'absolute';
+    container.style.left = '-9999px';
+    document.body.appendChild(container);
+
+    try {
+      const renderFn = c4Level === 'deployment' || (c4Level === 'components' && c4System && c4Container) || (c4Level === 'containers' && c4System)
+        ? renderC4Containers
+        : renderC4Context;
+
+      renderFn(
+        container,
+        c4Parsed,
+        c4Layout,
+        effectivePalette,
+        isDark,
+        undefined,
+        { width: exportWidth, height: exportHeight }
+      );
+
+      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;
+
+      const svgHtml = svgEl.outerHTML;
+      if (options?.branding !== false) {
+        const brandColor = theme === 'transparent' ? '#888' : effectivePalette.textMuted;
+        return injectBranding(svgHtml, brandColor);
+      }
+      return svgHtml;
+    } finally {
+      document.body.removeChild(container);
+    }
+  }
+
   if (detectedType === 'flowchart') {
     const { parseFlowchart } = await import('./graph/flowchart-parser');
     const { layoutGraph } = await import('./graph/layout');

package/src/dgmo-router.ts

@@ -11,6 +11,8 @@ import { parseEChart } from './echarts';
 import { parseD3 } from './d3';
 import { parseOrg, looksLikeOrg } from './org/parser';
 import { parseKanban } from './kanban/parser';
+import { parseC4 } from './c4/parser';
+import { looksLikeInitiativeStatus, parseInitiativeStatus } from './initiative-status/parser';
 import type { DgmoError } from './diagnostics';
 
 /**
@@ -58,6 +60,8 @@ export const DGMO_CHART_TYPE_MAP: Record<string, DgmoFramework> = {
   er: 'd3',
   org: 'd3',
   kanban: 'd3',
+  c4: 'd3',
+  'initiative-status': 'd3',
 };
 
 /**
@@ -89,6 +93,7 @@ export function parseDgmoChartType(content: string): string | null {
   if (looksLikeFlowchart(content)) return 'flowchart';
   if (looksLikeClassDiagram(content)) return 'class';
   if (looksLikeERDiagram(content)) return 'er';
+  if (looksLikeInitiativeStatus(content)) return 'initiative-status';
   if (looksLikeOrg(content)) return 'org';
 
   return null;
@@ -142,6 +147,14 @@ export function parseDgmo(content: string): { diagnostics: DgmoError[] } {
     const parsed = parseKanban(content);
     return { diagnostics: parsed.diagnostics };
   }
+  if (chartType === 'c4') {
+    const parsed = parseC4(content);
+    return { diagnostics: parsed.diagnostics };
+  }
+  if (chartType === 'initiative-status') {
+    const parsed = parseInitiativeStatus(content);
+    return { diagnostics: parsed.diagnostics };
+  }
   if (STANDARD_CHART_TYPES.has(chartType)) {
     const parsed = parseChart(content);
     return { diagnostics: parsed.diagnostics };

package/src/echarts.ts

@@ -1198,16 +1198,15 @@ function buildFunnelOption(
         const val = p.value;
         const prev = prevValueMap.get(p.name) ?? val;
         const isFirst = p.dataIndex === 0;
-        let html = `<strong>${p.name}</strong>: ${val}`;
-        if (!isFirst) {
-          const stepDrop = ((1 - val / prev) * 100).toFixed(1);
-          html += `<br/>Step drop-off: ${stepDrop}%`;
-        }
-        if (!isFirst && topValue > 0) {
+        if (isFirst) return '';
+        const parts: string[] = [];
+        const stepDrop = ((1 - val / prev) * 100).toFixed(1);
+        parts.push(`Step drop-off: ${stepDrop}%`);
+        if (topValue > 0) {
           const totalDrop = ((1 - val / topValue) * 100).toFixed(1);
-          html += `<br/>Overall drop-off: ${totalDrop}%`;
+          parts.push(`Overall drop-off: ${totalDrop}%`);
         }
-        return html;
+        return parts.join('<br/>');
       },
     },
     series: [

package/src/er/renderer.ts

@@ -233,7 +233,7 @@ export function renderERDiagram(
   const scaledW = diagramW * scale;
   const scaledH = diagramH * scale;
   const offsetX = (width - scaledW) / 2;
-  const offsetY = titleHeight + (availH - scaledH) / 2;
+  const offsetY = titleHeight + DIAGRAM_PADDING;
 
   const svg = d3Selection
     .select(container)
@@ -369,7 +369,7 @@ export function renderERDiagram(
 
     const w = node.width;
     const h = node.height;
-    const fill = mix(nodeColor, isDark ? palette.surface : palette.bg, 20);
+    const fill = mix(nodeColor, isDark ? palette.surface : palette.bg, 25);
     const stroke = nodeColor;
 
     // Outer rectangle

package/src/graph/flowchart-renderer.ts

@@ -259,7 +259,7 @@ export function renderFlowchart(
   const scaledW = diagramW * scale;
   const scaledH = diagramH * scale;
   const offsetX = (width - scaledW) / 2;
-  const offsetY = titleHeight + (availH - scaledH) / 2;
+  const offsetY = titleHeight + DIAGRAM_PADDING;
 
   // Create SVG
   const svg = d3Selection

package/src/index.ts

@@ -155,6 +155,60 @@ export type {
 export { computeCardMove, computeCardArchive, isArchiveColumn } from './kanban/mutations';
 export { renderKanban, renderKanbanForExport } from './kanban/renderer';
 
+export { parseC4 } from './c4/parser';
+export type {
+  ParsedC4,
+  C4Element,
+  C4ElementType,
+  C4Shape,
+  C4ArrowType,
+  C4Relationship,
+  C4Group,
+  C4DeploymentNode,
+  C4TagGroup,
+  C4TagEntry,
+} from './c4/types';
+
+export { layoutC4Context, layoutC4Containers, layoutC4Components, layoutC4Deployment, rollUpContextRelationships } from './c4/layout';
+export type {
+  C4LayoutResult,
+  C4LayoutNode,
+  C4LayoutEdge,
+  C4LayoutBoundary,
+  C4LegendGroup,
+  C4LegendEntry,
+  ContextRelationship,
+} from './c4/layout';
+
+export {
+  renderC4Context,
+  renderC4ContextForExport,
+  renderC4Containers,
+  renderC4ContainersForExport,
+  renderC4ComponentsForExport,
+  renderC4Deployment,
+  renderC4DeploymentForExport,
+} from './c4/renderer';
+
+export { parseInitiativeStatus, looksLikeInitiativeStatus } from './initiative-status/parser';
+export type {
+  ParsedInitiativeStatus,
+  ISNode,
+  ISEdge,
+  ISGroup,
+  InitiativeStatus,
+} from './initiative-status/types';
+
+export { layoutInitiativeStatus } from './initiative-status/layout';
+export type {
+  ISLayoutResult,
+  ISLayoutNode,
+  ISLayoutEdge,
+  ISLayoutGroup,
+} from './initiative-status/layout';
+
+export { renderInitiativeStatus, renderInitiativeStatusForExport } from './initiative-status/renderer';
+
 export { collapseOrgTree } from './org/collapse';
 export type { CollapsedOrgResult } from './org/collapse';