@diagrammo/dgmo 0.6.0 → 0.6.2

package/src/c4/renderer.ts

@@ -10,9 +10,22 @@ import { mix } from '../palettes/color-utils';
 import { renderInlineText } from '../utils/inline-markdown';
 import type { ParsedC4 } from './types';
 import type { C4Shape } from './types';
-import type { C4LayoutResult, C4LayoutNode, C4LayoutEdge, C4LayoutBoundary } from './layout';
+import type { C4LayoutResult, C4LayoutNode, C4LayoutEdge, C4LayoutBoundary, C4LegendGroup } from './layout';
 import { parseC4 } from './parser';
 import { layoutC4Context, layoutC4Containers, layoutC4Components, layoutC4Deployment, collectCardMetadata } from './layout';
+import {
+  LEGEND_HEIGHT,
+  LEGEND_PILL_FONT_SIZE,
+  LEGEND_PILL_FONT_W,
+  LEGEND_PILL_PAD,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_ENTRY_FONT_W,
+  LEGEND_ENTRY_DOT_GAP,
+  LEGEND_ENTRY_TRAIL,
+  LEGEND_CAPSULE_PAD,
+  LEGEND_GROUP_GAP,
+} from '../utils/legend-constants';
 
 // ============================================================
 // Constants
@@ -59,16 +72,6 @@ const PERSON_ICON_W = PERSON_ARM_SPAN * 2; // total width including arms
 const PERSON_SW = 1.5;
 
 // Legend constants (match org)
-const LEGEND_HEIGHT = 28;
-const LEGEND_PILL_FONT_SIZE = 11;
-const LEGEND_PILL_FONT_W = LEGEND_PILL_FONT_SIZE * 0.6;
-const LEGEND_PILL_PAD = 16;
-const LEGEND_DOT_R = 4;
-const LEGEND_ENTRY_FONT_SIZE = 10;
-const LEGEND_ENTRY_FONT_W = LEGEND_ENTRY_FONT_SIZE * 0.6;
-const LEGEND_ENTRY_DOT_GAP = 4;
-const LEGEND_ENTRY_TRAIL = 8;
-const LEGEND_CAPSULE_PAD = 4;
 
 // ============================================================
 // Color helpers
@@ -239,8 +242,16 @@ export function renderC4Context(
 
   const titleHeight = parsed.title ? TITLE_HEIGHT + 10 : 0;
   const diagramW = layout.width;
-  const diagramH = layout.height;
-  const availH = height - titleHeight;
+  const hasLegend = layout.legend.length > 0;
+  // In app mode, legend is a fixed overlay outside the scaled group.
+  // C4 layout adds MARGIN(40) + LEGEND_HEIGHT below content — remove that from diagramH.
+  const C4_LAYOUT_MARGIN = 40;
+  const LEGEND_FIXED_GAP = 8;
+  const fixedLegend = !exportDims && hasLegend;
+  const legendLayoutSpace = C4_LAYOUT_MARGIN + LEGEND_HEIGHT;
+  const legendReserveH = fixedLegend ? LEGEND_HEIGHT + LEGEND_FIXED_GAP : 0;
+  const diagramH = fixedLegend ? layout.height - legendLayoutSpace : layout.height;
+  const availH = height - titleHeight - legendReserveH;
   const scaleX = (width - DIAGRAM_PADDING * 2) / diagramW;
   const scaleY = (availH - DIAGRAM_PADDING * 2) / diagramH;
   const scale = Math.min(MAX_SCALE, scaleX, scaleY);
@@ -428,6 +439,23 @@ export function renderC4Context(
       .attr('data-line-number', String(node.lineNumber))
       .attr('data-node-id', node.id);
 
+    if (activeTagGroup) {
+      const tagKey = activeTagGroup.toLowerCase();
+      const tagValue = node.metadata[tagKey];
+      if (tagValue) {
+        nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());
+      } else {
+        // Fall back to the group's defaultValue so hover-dimming works for
+        // nodes that inherit the default (e.g. sc: Internal default).
+        const tagGroup = parsed.tagGroups.find(
+          (g) => g.name.toLowerCase() === tagKey || g.alias?.toLowerCase() === tagKey
+        );
+        if (tagGroup?.defaultValue) {
+          nodeG.attr(`data-tag-${tagKey}`, tagGroup.defaultValue.toLowerCase());
+        }
+      }
+    }
+
     if (node.importPath) {
       nodeG.attr('data-import-path', node.importPath);
     }
@@ -566,101 +594,18 @@ export function renderC4Context(
   }
 
   // ── Legend ──
-  if (!exportDims) {
-    for (const group of layout.legend) {
-      const isActive =
-        activeTagGroup != null &&
-        group.name.toLowerCase() === (activeTagGroup ?? '').toLowerCase();
-
-      if (activeTagGroup != null && !isActive) continue;
-
-      const groupBg = isDark
-        ? mix(palette.surface, palette.bg, 50)
-        : mix(palette.surface, palette.bg, 30);
-
-      const pillLabel = group.name;
-      const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
-
-      const gEl = contentG
-        .append('g')
-        .attr('transform', `translate(${group.x}, ${group.y})`)
-        .attr('class', 'c4-legend-group')
-        .attr('data-legend-group', group.name.toLowerCase())
-        .style('cursor', 'pointer');
-
-      if (isActive) {
-        gEl
-          .append('rect')
-          .attr('width', group.width)
-          .attr('height', LEGEND_HEIGHT)
-          .attr('rx', LEGEND_HEIGHT / 2)
-          .attr('fill', groupBg);
-      }
-
-      const pillX = isActive ? LEGEND_CAPSULE_PAD : 0;
-      const pillY = isActive ? LEGEND_CAPSULE_PAD : 0;
-      const pillH = LEGEND_HEIGHT - (isActive ? LEGEND_CAPSULE_PAD * 2 : 0);
-
-      gEl
-        .append('rect')
-        .attr('x', pillX)
-        .attr('y', pillY)
-        .attr('width', pillWidth)
-        .attr('height', pillH)
-        .attr('rx', pillH / 2)
-        .attr('fill', isActive ? palette.bg : groupBg);
-
-      if (isActive) {
-        gEl
-          .append('rect')
-          .attr('x', pillX)
-          .attr('y', pillY)
-          .attr('width', pillWidth)
-          .attr('height', pillH)
-          .attr('rx', pillH / 2)
-          .attr('fill', 'none')
-          .attr('stroke', mix(palette.textMuted, palette.bg, 50))
-          .attr('stroke-width', 0.75);
-      }
-
-      gEl
-        .append('text')
-        .attr('x', pillX + pillWidth / 2)
-        .attr('y', LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2)
-        .attr('font-size', LEGEND_PILL_FONT_SIZE)
-        .attr('font-weight', '500')
-        .attr('fill', isActive ? palette.text : palette.textMuted)
-        .attr('text-anchor', 'middle')
-        .text(pillLabel);
-
-      if (isActive) {
-        let entryX = pillX + pillWidth + 4;
-        for (const entry of group.entries) {
-          const entryG = gEl
-            .append('g')
-            .attr('data-legend-entry', entry.value.toLowerCase())
-            .style('cursor', 'pointer');
-
-          entryG
-            .append('circle')
-            .attr('cx', entryX + LEGEND_DOT_R)
-            .attr('cy', LEGEND_HEIGHT / 2)
-            .attr('r', LEGEND_DOT_R)
-            .attr('fill', entry.color);
-
-          const textX = entryX + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
-          entryG
-            .append('text')
-            .attr('x', textX)
-            .attr('y', LEGEND_HEIGHT / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1)
-            .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
-            .attr('fill', palette.textMuted)
-            .text(entry.value);
-
-          entryX = textX + entry.value.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
-        }
-      }
+  if (hasLegend) {
+    // App mode: fixed overlay at SVG bottom so it's always readable regardless of scale.
+    // Export mode: render inside scaled contentG at layout coordinates.
+    const legendParent = fixedLegend
+      ? svg.append('g')
+          .attr('class', 'c4-legend-fixed')
+          .attr('transform', `translate(0, ${height - DIAGRAM_PADDING - LEGEND_HEIGHT})`)
+      : contentG.append('g').attr('class', 'c4-legend');
+    if (activeTagGroup) {
+      legendParent.attr('data-legend-active', activeTagGroup.toLowerCase());
     }
+    renderLegend(legendParent as GSelection, layout, palette, isDark, activeTagGroup, fixedLegend ? width : null);
   }
 }
 
@@ -1189,29 +1134,52 @@ function placeEdgeLabels(
 }
 
 function renderLegend(
-  contentG: GSelection,
+  parent: GSelection,
   layout: C4LayoutResult,
   palette: PaletteColors,
   isDark: boolean,
-  activeTagGroup?: string | null
+  activeTagGroup?: string | null,
+  /** When set, center groups horizontally across this width (fixed overlay mode). */
+  fixedWidth?: number | null
 ): void {
-  for (const group of layout.legend) {
+  const visibleGroups = activeTagGroup != null
+    ? layout.legend.filter((g) => g.name.toLowerCase() === (activeTagGroup ?? '').toLowerCase())
+    : layout.legend;
+
+  const pillWidthOf = (g: C4LegendGroup) => g.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+  const effectiveW = (g: C4LegendGroup) => activeTagGroup != null ? g.width : pillWidthOf(g);
+
+  // In fixed mode, compute centered x-positions
+  let fixedPositions: Map<string, number> | null = null;
+  if (fixedWidth != null && visibleGroups.length > 0) {
+    fixedPositions = new Map();
+    const totalW = visibleGroups.reduce((s, g) => s + effectiveW(g), 0)
+      + (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
+    let cx = Math.max(DIAGRAM_PADDING, (fixedWidth - totalW) / 2);
+    for (const g of visibleGroups) {
+      fixedPositions.set(g.name, cx);
+      cx += effectiveW(g) + LEGEND_GROUP_GAP;
+    }
+  }
+
+  for (const group of visibleGroups) {
     const isActive =
       activeTagGroup != null &&
       group.name.toLowerCase() === (activeTagGroup ?? '').toLowerCase();
 
-    if (activeTagGroup != null && !isActive) continue;
-
     const groupBg = isDark
       ? mix(palette.surface, palette.bg, 50)
       : mix(palette.surface, palette.bg, 30);
 
     const pillLabel = group.name;
-    const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+    const pillWidth = pillWidthOf(group);
+
+    const gX = fixedPositions?.get(group.name) ?? group.x;
+    const gY = fixedPositions != null ? 0 : group.y;
 
-    const gEl = contentG
+    const gEl = parent
       .append('g')
-      .attr('transform', `translate(${group.x}, ${group.y})`)
+      .attr('transform', `translate(${gX}, ${gY})`)
       .attr('class', 'c4-legend-group')
       .attr('data-legend-group', group.name.toLowerCase())
       .style('cursor', 'pointer');
@@ -1317,8 +1285,16 @@ export function renderC4Containers(
 
   const titleHeight = parsed.title ? TITLE_HEIGHT + 10 : 0;
   const diagramW = layout.width;
-  const diagramH = layout.height;
-  const availH = height - titleHeight;
+  const hasLegend = layout.legend.length > 0;
+  // In app mode, legend is a fixed overlay outside the scaled group.
+  // C4 layout adds MARGIN(40) + LEGEND_HEIGHT below content — remove that from diagramH.
+  const C4_LAYOUT_MARGIN = 40;
+  const LEGEND_FIXED_GAP = 8;
+  const fixedLegend = !exportDims && hasLegend;
+  const legendLayoutSpace = C4_LAYOUT_MARGIN + LEGEND_HEIGHT;
+  const legendReserveH = fixedLegend ? LEGEND_HEIGHT + LEGEND_FIXED_GAP : 0;
+  const diagramH = fixedLegend ? layout.height - legendLayoutSpace : layout.height;
+  const availH = height - titleHeight - legendReserveH;
   const scaleX = (width - DIAGRAM_PADDING * 2) / diagramW;
   const scaleY = (availH - DIAGRAM_PADDING * 2) / diagramH;
   const scale = Math.min(MAX_SCALE, scaleX, scaleY);
@@ -1508,6 +1484,23 @@ export function renderC4Containers(
       .attr('data-line-number', String(node.lineNumber))
       .attr('data-node-id', node.id);
 
+    if (activeTagGroup) {
+      const tagKey = activeTagGroup.toLowerCase();
+      const tagValue = node.metadata[tagKey];
+      if (tagValue) {
+        nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());
+      } else {
+        // Fall back to the group's defaultValue so hover-dimming works for
+        // nodes that inherit the default (e.g. sc: Internal default).
+        const tagGroup = parsed.tagGroups.find(
+          (g) => g.name.toLowerCase() === tagKey || g.alias?.toLowerCase() === tagKey
+        );
+        if (tagGroup?.defaultValue) {
+          nodeG.attr(`data-tag-${tagKey}`, tagGroup.defaultValue.toLowerCase());
+        }
+      }
+    }
+
     if (node.shape) {
       nodeG.attr('data-shape', node.shape);
     }
@@ -1717,8 +1710,18 @@ export function renderC4Containers(
   }
 
   // ── Legend ──
-  if (!exportDims) {
-    renderLegend(contentG as GSelection, layout, palette, isDark, activeTagGroup);
+  if (hasLegend) {
+    // App mode: fixed overlay at SVG bottom so it's always readable regardless of scale.
+    // Export mode: render inside scaled contentG at layout coordinates.
+    const legendParent = fixedLegend
+      ? svg.append('g')
+          .attr('class', 'c4-legend-fixed')
+          .attr('transform', `translate(0, ${height - DIAGRAM_PADDING - LEGEND_HEIGHT})`)
+      : contentG.append('g').attr('class', 'c4-legend');
+    if (activeTagGroup) {
+      legendParent.attr('data-legend-active', activeTagGroup.toLowerCase());
+    }
+    renderLegend(legendParent as GSelection, layout, palette, isDark, activeTagGroup, fixedLegend ? width : null);
   }
 }
 

package/src/cli.ts

@@ -1,6 +1,8 @@
-import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { execSync } from 'node:child_process';
-import { resolve, basename, extname } from 'node:path';
+import { homedir } from 'node:os';
+import { resolve, join, basename, extname } from 'node:path';
+import { createInterface } from 'node:readline';
 import { Resvg } from '@resvg/resvg-js';
 import { render } from './render';
 import { parseDgmo, getAllChartTypes } from './dgmo-router';
@@ -57,6 +59,84 @@ const CHART_TYPE_DESCRIPTIONS: Record<string, string> = {
   infra: 'Infra chart — infrastructure traffic flow with rps computation',
 };
 
+const CLAUDE_SKILL_CONTENT = `# dgmo — Diagrammo Diagram Assistant
+
+You are helping the user author, render, and share diagrams using the \`dgmo\` CLI and \`.dgmo\` file format.
+
+## What is dgmo?
+
+\`dgmo\` is a CLI tool that renders \`.dgmo\` diagram files to PNG, SVG, or shareable URLs. Diagrams are written in a plain-text DSL.
+
+## CLI Reference
+
+\`\`\`
+dgmo <input.dgmo> [options]
+cat input.dgmo | dgmo [options]
+\`\`\`
+
+Key options:
+- \`-o <file>\` — output file; format inferred from extension (\`.svg\` → SVG, else PNG)
+- \`-o url\` — output a shareable diagrammo.app URL
+- \`--theme <theme>\` — \`light\` (default), \`dark\`, \`transparent\`
+- \`--palette <name>\` — \`nord\` (default), \`solarized\`, \`catppuccin\`, \`rose-pine\`, \`gruvbox\`, \`tokyo-night\`, \`one-dark\`, \`bold\`
+- \`--copy\` — copy the URL to clipboard (use with \`-o url\`)
+- \`--no-branding\` — omit diagrammo.app branding from exports
+- \`--chart-types\` — list all supported chart types
+
+## Supported Chart Types
+
+| Type | Use case |
+|------|----------|
+| \`bar\` | Categorical comparisons |
+| \`line\` / \`multi-line\` / \`area\` | Trends over time |
+| \`pie\` / \`doughnut\` | Part-to-whole |
+| \`radar\` / \`polar-area\` | Multi-dimensional metrics |
+| \`bar-stacked\` | Multi-series categorical |
+| \`scatter\` | 2D data points or bubble chart |
+| \`sankey\` | Flow / allocation |
+| \`chord\` | Circular flow relationships |
+| \`function\` | Mathematical expressions |
+| \`heatmap\` | Matrix intensity |
+| \`funnel\` | Conversion pipeline |
+| \`slope\` | Change between two periods |
+| \`wordcloud\` | Term frequency |
+| \`arc\` | Network relationships |
+| \`timeline\` | Events, eras, date ranges |
+| \`venn\` | Set overlaps |
+| \`quadrant\` | 2x2 positioning matrix |
+| \`sequence\` | Message / interaction flows |
+| \`flowchart\` | Decision trees, process flows |
+| \`class\` | UML class hierarchies |
+| \`er\` | Database schemas |
+| \`org\` | Hierarchical tree structures |
+| \`kanban\` | Task / workflow columns |
+| \`c4\` | System architecture (context → container → component → deployment) |
+| \`initiative-status\` | Project roadmap with dependency tracking |
+
+## Your Workflow
+
+When the user asks you to create or edit a diagram:
+
+1. **Write or edit the \`.dgmo\` file** with the appropriate chart type and data.
+2. **Render it** with \`dgmo <file>.dgmo -o <file>.png\` to verify it produces output without errors.
+3. **Show the user** what was created and suggest a shareable URL with \`dgmo <file>.dgmo -o url --copy\` if they want to share it.
+
+When the user asks for a **shareable link**, run:
+\`\`\`
+dgmo <file>.dgmo -o url --copy
+\`\`\`
+
+## Getting Syntax Help
+
+Run \`dgmo --chart-types\` to list types. For detailed syntax of a specific chart type, the best reference is the diagrammo.app documentation or existing \`.dgmo\` files in the project.
+
+## Tips
+
+- Default theme is \`light\` and default palette is \`nord\` — ask the user if they have a preference before rendering a final export.
+- For C4 diagrams, use \`--c4-level\` to drill from context → containers → components → deployment.
+- Stdin mode is useful for quick one-off renders: \`echo "..." | dgmo -o out.png\`
+`;
+
 function printHelp(): void {
   console.log(`Usage: dgmo <input> [options]
        cat input.dgmo | dgmo [options]
@@ -73,10 +153,12 @@ Options:
   --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)
+  --tag-group <name>   Pre-select a tag group for static export coloring
   --no-branding        Omit diagrammo.app branding from exports
   --copy               Copy URL to clipboard (only with -o url)
   --json               Output structured JSON to stdout
   --chart-types        List all supported chart types
+  --install-claude-skill  Install the dgmo Claude Code skill to ~/.claude/commands/
   --help               Show this help
   --version            Show version`);
 }
@@ -99,11 +181,11 @@ function parseArgs(argv: string[]): {
   copy: boolean;
   json: boolean;
   chartTypes: boolean;
+  installClaudeSkill: boolean;
   c4Level: 'context' | 'containers' | 'components' | 'deployment';
   c4System: string | undefined;
   c4Container: string | undefined;
-  scenario: string | undefined;
-  listScenarios: boolean;
+  tagGroup: string | undefined;
 } {
   const result = {
     input: undefined as string | undefined,
@@ -116,11 +198,11 @@ function parseArgs(argv: string[]): {
     copy: false,
     json: false,
     chartTypes: false,
+    installClaudeSkill: false,
     c4Level: 'context' as 'context' | 'containers' | 'components' | 'deployment',
     c4System: undefined as string | undefined,
     c4Container: undefined as string | undefined,
-    scenario: undefined as string | undefined,
-    listScenarios: false,
+    tagGroup: undefined as string | undefined,
   };
 
   const args = argv.slice(2); // skip node + script
@@ -174,11 +256,8 @@ function parseArgs(argv: string[]): {
     } else if (arg === '--c4-container') {
       result.c4Container = args[++i];
       i++;
-    } else if (arg === '--scenario') {
-      result.scenario = args[++i];
-      i++;
-    } else if (arg === '--list-scenarios') {
-      result.listScenarios = true;
+    } else if (arg === '--tag-group') {
+      result.tagGroup = args[++i];
       i++;
     } else if (arg === '--no-branding') {
       result.noBranding = true;
@@ -189,6 +268,9 @@ function parseArgs(argv: string[]): {
     } else if (arg === '--chart-types') {
       result.chartTypes = true;
       i++;
+    } else if (arg === '--install-claude-skill') {
+      result.installClaudeSkill = true;
+      i++;
     } else if (arg === '--copy') {
       result.copy = true;
       i++;
@@ -292,6 +374,42 @@ async function main(): Promise<void> {
     return;
   }
 
+  if (opts.installClaudeSkill) {
+    const claudeDir = join(homedir(), '.claude');
+    if (!existsSync(claudeDir)) {
+      console.error('~/.claude directory not found.');
+      console.error('Install Claude Code first: https://claude.ai/code');
+      process.exit(1);
+    }
+    const commandsDir = join(claudeDir, 'commands');
+    const destPath = join(commandsDir, 'dgmo.md');
+    const alreadyExists = existsSync(destPath);
+    const prompt = alreadyExists
+      ? `~/.claude/commands/dgmo.md already exists. Overwrite? [y/N] `
+      : `Install dgmo Claude Code skill to ~/.claude/commands/dgmo.md? [Y/n] `;
+    await new Promise<void>((done) => {
+      const rl = createInterface({ input: process.stdin, output: process.stdout });
+      rl.question(prompt, (answer) => {
+        rl.close();
+        const yes = alreadyExists
+          ? answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes'
+          : answer === '' || answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes';
+        if (!yes) {
+          console.error('Aborted.');
+          process.exit(0);
+        }
+        done();
+      });
+    });
+    if (!existsSync(commandsDir)) {
+      mkdirSync(commandsDir, { recursive: true });
+    }
+    writeFileSync(destPath, CLAUDE_SKILL_CONTENT, 'utf-8');
+    console.log(`Installed: ${destPath}`);
+    console.log('Use /dgmo in Claude Code to activate the skill.');
+    return;
+  }
+
   // Determine input source
   let content: string;
   let inputBasename: string | undefined;
@@ -440,34 +558,6 @@ async function main(): Promise<void> {
     }
   }
 
-  // List scenarios (infra diagrams)
-  if (opts.listScenarios) {
-    const { parseInfra } = await import('./infra/parser');
-    const infraParsed = parseInfra(content);
-    if (infraParsed.scenarios.length === 0) {
-      console.log('(no scenarios defined)');
-    } else {
-      for (const s of infraParsed.scenarios) {
-        console.log(s.name);
-      }
-    }
-    return;
-  }
-
-  // Validate --scenario name against defined scenarios
-  if (opts.scenario) {
-    const { parseInfra } = await import('./infra/parser');
-    const infraParsed = parseInfra(content);
-    const match = infraParsed.scenarios.find((s) => s.name.toLowerCase() === opts.scenario!.toLowerCase());
-    if (!match) {
-      const available = infraParsed.scenarios.map((s) => s.name);
-      const msg = available.length > 0
-        ? `Error: Unknown scenario "${opts.scenario}". Available: ${available.join(', ')}`
-        : `Error: Unknown scenario "${opts.scenario}". No scenarios defined in this file.`;
-      exitWithJsonError(msg);
-    }
-  }
-
   // Validate C4 options
   if (opts.c4Level === 'containers' && !opts.c4System) {
     exitWithJsonError('Error: --c4-system is required when --c4-level is containers');
@@ -488,7 +578,7 @@ async function main(): Promise<void> {
     c4Level: opts.c4Level,
     c4System: opts.c4System,
     c4Container: opts.c4Container,
-    scenario: opts.scenario,
+    tagGroup: opts.tagGroup,
   });
 
   if (!svg) {