@diagrammo/dgmo 0.2.18 → 0.2.20

package/src/graph/flowchart-renderer.ts

@@ -16,6 +16,7 @@ import { layoutGraph } from './layout';
 // ============================================================
 
 const DIAGRAM_PADDING = 20;
+const MAX_SCALE = 3;
 const NODE_FONT_SIZE = 13;
 const EDGE_LABEL_FONT_SIZE = 11;
 const GROUP_LABEL_FONT_SIZE = 11;
@@ -43,7 +44,8 @@ function mix(a: string, b: string, pct: number): string {
   return `#${c(ar,br)}${c(ag,bg)}${c(ab,bb)}`;
 }
 
-function shapeDefaultColor(shape: GraphShape, palette: PaletteColors, isEndTerminal?: boolean): string {
+function shapeDefaultColor(shape: GraphShape, palette: PaletteColors, isEndTerminal?: boolean, colorOff?: boolean): string {
+  if (colorOff) return palette.textMuted;
   switch (shape) {
     case 'terminal':   return isEndTerminal ? palette.colors.red : palette.colors.green;
     case 'process':    return palette.colors.blue;
@@ -54,13 +56,13 @@ function shapeDefaultColor(shape: GraphShape, palette: PaletteColors, isEndTermi
   }
 }
 
-function nodeFill(palette: PaletteColors, isDark: boolean, shape: GraphShape, nodeColor?: string, isEndTerminal?: boolean): string {
-  const color = nodeColor ?? shapeDefaultColor(shape, palette, isEndTerminal);
+function nodeFill(palette: PaletteColors, isDark: boolean, shape: GraphShape, nodeColor?: string, isEndTerminal?: boolean, colorOff?: boolean): string {
+  const color = nodeColor ?? shapeDefaultColor(shape, palette, isEndTerminal, colorOff);
   return mix(color, isDark ? palette.surface : palette.bg, 25);
 }
 
-function nodeStroke(palette: PaletteColors, shape: GraphShape, nodeColor?: string, isEndTerminal?: boolean): string {
-  return nodeColor ?? shapeDefaultColor(shape, palette, isEndTerminal);
+function nodeStroke(palette: PaletteColors, shape: GraphShape, nodeColor?: string, isEndTerminal?: boolean, colorOff?: boolean): string {
+  return nodeColor ?? shapeDefaultColor(shape, palette, isEndTerminal, colorOff);
 }
 
 // ============================================================
@@ -69,7 +71,7 @@ function nodeStroke(palette: PaletteColors, shape: GraphShape, nodeColor?: strin
 
 type GSelection = d3Selection.Selection<SVGGElement, unknown, null, undefined>;
 
-function renderTerminal(g: GSelection, node: LayoutNode, palette: PaletteColors, isDark: boolean, isEnd: boolean): void {
+function renderTerminal(g: GSelection, node: LayoutNode, palette: PaletteColors, isDark: boolean, isEnd: boolean, colorOff?: boolean): void {
   const w = node.width;
   const h = node.height;
   const rx = h / 2;
@@ -80,12 +82,12 @@ function renderTerminal(g: GSelection, node: LayoutNode, palette: PaletteColors,
     .attr('height', h)
     .attr('rx', rx)
     .attr('ry', rx)
-    .attr('fill', nodeFill(palette, isDark, node.shape, node.color, isEnd))
-    .attr('stroke', nodeStroke(palette, node.shape, node.color, isEnd))
+    .attr('fill', nodeFill(palette, isDark, node.shape, node.color, isEnd, colorOff))
+    .attr('stroke', nodeStroke(palette, node.shape, node.color, isEnd, colorOff))
     .attr('stroke-width', NODE_STROKE_WIDTH);
 }
 
-function renderProcess(g: GSelection, node: LayoutNode, palette: PaletteColors, isDark: boolean): void {
+function renderProcess(g: GSelection, node: LayoutNode, palette: PaletteColors, isDark: boolean, colorOff?: boolean): void {
   const w = node.width;
   const h = node.height;
   g.append('rect')
@@ -95,12 +97,12 @@ function renderProcess(g: GSelection, node: LayoutNode, palette: PaletteColors,
     .attr('height', h)
     .attr('rx', 3)
     .attr('ry', 3)
-    .attr('fill', nodeFill(palette, isDark, node.shape, node.color))
-    .attr('stroke', nodeStroke(palette, node.shape, node.color))
+    .attr('fill', nodeFill(palette, isDark, node.shape, node.color, undefined, colorOff))
+    .attr('stroke', nodeStroke(palette, node.shape, node.color, undefined, colorOff))
     .attr('stroke-width', NODE_STROKE_WIDTH);
 }
 
-function renderDecision(g: GSelection, node: LayoutNode, palette: PaletteColors, isDark: boolean): void {
+function renderDecision(g: GSelection, node: LayoutNode, palette: PaletteColors, isDark: boolean, colorOff?: boolean): void {
   const w = node.width / 2;
   const h = node.height / 2;
   const points = [
@@ -111,12 +113,12 @@ function renderDecision(g: GSelection, node: LayoutNode, palette: PaletteColors,
   ].join(' ');
   g.append('polygon')
     .attr('points', points)
-    .attr('fill', nodeFill(palette, isDark, node.shape, node.color))
-    .attr('stroke', nodeStroke(palette, node.shape, node.color))
+    .attr('fill', nodeFill(palette, isDark, node.shape, node.color, undefined, colorOff))
+    .attr('stroke', nodeStroke(palette, node.shape, node.color, undefined, colorOff))
     .attr('stroke-width', NODE_STROKE_WIDTH);
 }
 
-function renderIO(g: GSelection, node: LayoutNode, palette: PaletteColors, isDark: boolean): void {
+function renderIO(g: GSelection, node: LayoutNode, palette: PaletteColors, isDark: boolean, colorOff?: boolean): void {
   const w = node.width / 2;
   const h = node.height / 2;
   const sk = IO_SKEW;
@@ -128,15 +130,15 @@ function renderIO(g: GSelection, node: LayoutNode, palette: PaletteColors, isDar
   ].join(' ');
   g.append('polygon')
     .attr('points', points)
-    .attr('fill', nodeFill(palette, isDark, node.shape, node.color))
-    .attr('stroke', nodeStroke(palette, node.shape, node.color))
+    .attr('fill', nodeFill(palette, isDark, node.shape, node.color, undefined, colorOff))
+    .attr('stroke', nodeStroke(palette, node.shape, node.color, undefined, colorOff))
     .attr('stroke-width', NODE_STROKE_WIDTH);
 }
 
-function renderSubroutine(g: GSelection, node: LayoutNode, palette: PaletteColors, isDark: boolean): void {
+function renderSubroutine(g: GSelection, node: LayoutNode, palette: PaletteColors, isDark: boolean, colorOff?: boolean): void {
   const w = node.width;
   const h = node.height;
-  const s = nodeStroke(palette, node.shape, node.color);
+  const s = nodeStroke(palette, node.shape, node.color, undefined, colorOff);
   // Outer rectangle
   g.append('rect')
     .attr('x', -w / 2)
@@ -145,7 +147,7 @@ function renderSubroutine(g: GSelection, node: LayoutNode, palette: PaletteColor
     .attr('height', h)
     .attr('rx', 3)
     .attr('ry', 3)
-    .attr('fill', nodeFill(palette, isDark, node.shape, node.color))
+    .attr('fill', nodeFill(palette, isDark, node.shape, node.color, undefined, colorOff))
     .attr('stroke', s)
     .attr('stroke-width', NODE_STROKE_WIDTH);
   // Left inner border
@@ -166,7 +168,7 @@ function renderSubroutine(g: GSelection, node: LayoutNode, palette: PaletteColor
     .attr('stroke-width', NODE_STROKE_WIDTH);
 }
 
-function renderDocument(g: GSelection, node: LayoutNode, palette: PaletteColors, isDark: boolean): void {
+function renderDocument(g: GSelection, node: LayoutNode, palette: PaletteColors, isDark: boolean, colorOff?: boolean): void {
   const w = node.width;
   const h = node.height;
   const waveH = DOC_WAVE_HEIGHT;
@@ -186,30 +188,30 @@ function renderDocument(g: GSelection, node: LayoutNode, palette: PaletteColors,
 
   g.append('path')
     .attr('d', d)
-    .attr('fill', nodeFill(palette, isDark, node.shape, node.color))
-    .attr('stroke', nodeStroke(palette, node.shape, node.color))
+    .attr('fill', nodeFill(palette, isDark, node.shape, node.color, undefined, colorOff))
+    .attr('stroke', nodeStroke(palette, node.shape, node.color, undefined, colorOff))
     .attr('stroke-width', NODE_STROKE_WIDTH);
 }
 
-function renderNodeShape(g: GSelection, node: LayoutNode, palette: PaletteColors, isDark: boolean, endTerminalIds: Set<string>): void {
+function renderNodeShape(g: GSelection, node: LayoutNode, palette: PaletteColors, isDark: boolean, endTerminalIds: Set<string>, colorOff?: boolean): void {
   switch (node.shape) {
     case 'terminal':
-      renderTerminal(g, node, palette, isDark, endTerminalIds.has(node.id));
+      renderTerminal(g, node, palette, isDark, endTerminalIds.has(node.id), colorOff);
       break;
     case 'process':
-      renderProcess(g, node, palette, isDark);
+      renderProcess(g, node, palette, isDark, colorOff);
       break;
     case 'decision':
-      renderDecision(g, node, palette, isDark);
+      renderDecision(g, node, palette, isDark, colorOff);
       break;
     case 'io':
-      renderIO(g, node, palette, isDark);
+      renderIO(g, node, palette, isDark, colorOff);
       break;
     case 'subroutine':
-      renderSubroutine(g, node, palette, isDark);
+      renderSubroutine(g, node, palette, isDark, colorOff);
       break;
     case 'document':
-      renderDocument(g, node, palette, isDark);
+      renderDocument(g, node, palette, isDark, colorOff);
       break;
   }
 }
@@ -251,7 +253,7 @@ export function renderFlowchart(
   const availH = height - titleHeight;
   const scaleX = (width - DIAGRAM_PADDING * 2) / diagramW;
   const scaleY = (availH - DIAGRAM_PADDING * 2) / diagramH;
-  const scale = Math.min(1, scaleX, scaleY);
+  const scale = Math.min(MAX_SCALE, scaleX, scaleY);
 
   // Center the diagram in the area below the title
   const scaledW = diagramW * scale;
@@ -443,6 +445,7 @@ export function renderFlowchart(
   }
 
   // Render nodes (top layer)
+  const colorOff = graph.options?.color === 'off';
   for (const node of layout.nodes) {
     const nodeG = contentG
       .append('g')
@@ -458,7 +461,7 @@ export function renderFlowchart(
     }
 
     // Shape
-    renderNodeShape(nodeG as GSelection, node, palette, isDark, endTerminalIds);
+    renderNodeShape(nodeG as GSelection, node, palette, isDark, endTerminalIds, colorOff);
 
     // Label
     nodeG

package/src/graph/types.ts

@@ -33,6 +33,8 @@ export interface GraphGroup {
   lineNumber: number;
 }
 
+import type { DgmoError } from '../diagnostics';
+
 export interface ParsedGraph {
   type: 'flowchart';
   title?: string;
@@ -41,5 +43,7 @@ export interface ParsedGraph {
   nodes: GraphNode[];
   edges: GraphEdge[];
   groups?: GraphGroup[];
+  options: Record<string, string>;
+  diagnostics: DgmoError[];
   error?: string;
 }

package/src/index.ts

@@ -1,3 +1,10 @@
+// ============================================================
+// Diagnostics
+// ============================================================
+
+export { makeDgmoError, formatDgmoError } from './diagnostics';
+export type { DgmoError, DgmoSeverity } from './diagnostics';
+
 // ============================================================
 // Unified API
 // ============================================================
@@ -11,6 +18,7 @@ export { render } from './render';
 export {
   parseDgmoChartType,
   getDgmoFramework,
+  parseDgmo,
   DGMO_CHART_TYPE_MAP,
 } from './dgmo-router';
 export type { DgmoFramework } from './dgmo-router';
@@ -139,6 +147,9 @@ export { renderOrg, renderOrgForExport } from './org/renderer';
 export { collapseOrgTree } from './org/collapse';
 export type { CollapsedOrgResult } from './org/collapse';
 
+export { resolveOrgImports } from './org/resolver';
+export type { ReadFileFn, ResolveImportsResult } from './org/resolver';
+
 export { layoutGraph } from './graph/layout';
 export type {
   LayoutResult,

package/src/org/layout.ts

@@ -61,6 +61,8 @@ export interface OrgLegendGroup {
   y: number;
   width: number;
   height: number;
+  minifiedWidth: number;
+  minifiedHeight: number;
 }
 
 export interface OrgLayoutResult {
@@ -301,6 +303,8 @@ function computeLegendGroups(tagGroups: OrgTagGroup[], showEyeIcons: boolean): O
       (colWidths.length - 1) * LEGEND_ENTRY_GAP;
     const maxRowWidth = Math.max(headerWidth, totalColumnsWidth);
 
+    const minifiedWidth = group.name.length * CHAR_WIDTH + LEGEND_PAD * 2;
+
     groups.push({
       name: group.name,
       entries: group.entries.map((e) => ({ value: e.value, color: e.color })),
@@ -308,6 +312,8 @@ function computeLegendGroups(tagGroups: OrgTagGroup[], showEyeIcons: boolean): O
       y: 0,
       width: maxRowWidth + LEGEND_PAD * 2,
       height: LEGEND_HEADER_H + numRows * LEGEND_ENTRY_H + LEGEND_PAD,
+      minifiedWidth,
+      minifiedHeight: LEGEND_HEADER_H + LEGEND_PAD,
     });
   }
 
@@ -577,18 +583,26 @@ export function layoutOrg(
   {
     type HNode = (typeof h);
     const subtreeExtent = (node: HNode): { minX: number; maxX: number } => {
-      let min = Infinity;
-      let max = -Infinity;
-      const walk = (n: HNode) => {
-        // Container boxes extend beyond card bounds by padding
-        const pad = n.data.orgNode.isContainer ? CONTAINER_PAD_X : 0;
-        const l = n.x! - n.data.width / 2 - pad;
-        const r = n.x! + n.data.width / 2 + pad;
-        if (l < min) min = l;
-        if (r > max) max = r;
-        if (n.children) n.children.forEach(walk);
-      };
-      walk(node);
+      // Start with this node's own card/header bounds
+      let min = node.x! - node.data.width / 2;
+      let max = node.x! + node.data.width / 2;
+
+      // Include children's subtree extents
+      if (node.children) {
+        for (const child of node.children) {
+          const childExt = subtreeExtent(child);
+          if (childExt.minX < min) min = childExt.minX;
+          if (childExt.maxX > max) max = childExt.maxX;
+        }
+      }
+
+      // Container boxes wrap their content with padding — mirror the
+      // actual bounding-box computation so compaction sees the true width.
+      if (node.data.orgNode.isContainer) {
+        min -= CONTAINER_PAD_X;
+        max += CONTAINER_PAD_X;
+      }
+
       return { minX: min, maxX: max };
     };
 
@@ -1072,12 +1086,22 @@ export function layoutOrg(
 
   const legendPosition = parsed.options?.['legend-position'] ?? 'bottom';
 
-  if (legendGroups.length > 0) {
+  // When a tag group is active, only that group is laid out (full size).
+  // When none is active, all groups are laid out minified.
+  const visibleGroups = activeTagGroup != null
+    ? legendGroups.filter((g) => g.name.toLowerCase() === activeTagGroup.toLowerCase())
+    : legendGroups;
+  const effectiveW = (g: OrgLegendGroup) =>
+    activeTagGroup != null ? g.width : g.minifiedWidth;
+  const effectiveH = (g: OrgLegendGroup) =>
+    activeTagGroup != null ? g.height : g.minifiedHeight;
+
+  if (visibleGroups.length > 0) {
     if (legendPosition === 'bottom') {
       // Bottom: center legend groups horizontally below diagram content
       const totalGroupsWidth =
-        legendGroups.reduce((s, g) => s + g.width, 0) +
-        (legendGroups.length - 1) * H_GAP;
+        visibleGroups.reduce((s, g) => s + effectiveW(g), 0) +
+        (visibleGroups.length - 1) * H_GAP;
       const neededWidth = totalGroupsWidth + MARGIN * 2;
 
       if (neededWidth > totalWidth) {
@@ -1096,24 +1120,25 @@ export function layoutOrg(
 
       let cx = startX;
       let maxH = 0;
-      for (const g of legendGroups) {
+      for (const g of visibleGroups) {
         g.x = cx;
         g.y = legendY;
-        cx += g.width + H_GAP;
-        if (g.height > maxH) maxH = g.height;
+        cx += effectiveW(g) + H_GAP;
+        const h = effectiveH(g);
+        if (h > maxH) maxH = h;
       }
 
       finalHeight = totalHeight + LEGEND_GAP + maxH;
     } else {
       // Top (default): stack legend groups vertically at top-right
-      const maxLegendWidth = Math.max(...legendGroups.map((g) => g.width));
+      const maxLegendWidth = Math.max(...visibleGroups.map((g) => effectiveW(g)));
       const legendStartX = totalWidth - MARGIN + LEGEND_GAP;
       let legendY = MARGIN;
 
-      for (const g of legendGroups) {
+      for (const g of visibleGroups) {
         g.x = legendStartX;
         g.y = legendY;
-        legendY += g.height + LEGEND_V_GAP;
+        legendY += effectiveH(g) + LEGEND_V_GAP;
       }
 
       const legendRight = legendStartX + maxLegendWidth + MARGIN;

package/src/org/parser.ts

@@ -1,5 +1,7 @@
 import { resolveColor } from '../colors';
 import type { PaletteColors } from '../palettes';
+import type { DgmoError } from '../diagnostics';
+import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
 
 // ============================================================
 // Types
@@ -37,6 +39,7 @@ export interface ParsedOrg {
   roots: OrgNode[];
   tagGroups: OrgTagGroup[];
   options: Record<string, string>;
+  diagnostics: DgmoError[];
   error: string | null;
 }
 
@@ -90,12 +93,26 @@ export function parseOrg(
     roots: [],
     tagGroups: [],
     options: {},
+    diagnostics: [],
     error: null,
   };
 
-  if (!content || !content.trim()) {
-    result.error = 'No content provided';
+  const fail = (line: number, message: string): ParsedOrg => {
+    const diag = makeDgmoError(line, message);
+    result.diagnostics.push(diag);
+    result.error = formatDgmoError(diag);
     return result;
+  };
+
+  /** Push a recoverable error and continue parsing. */
+  const pushError = (line: number, message: string): void => {
+    const diag = makeDgmoError(line, message);
+    result.diagnostics.push(diag);
+    if (!result.error) result.error = formatDgmoError(diag);
+  };
+
+  if (!content || !content.trim()) {
+    return fail(0, 'No content provided');
   }
 
   const lines = content.split('\n');
@@ -138,8 +155,11 @@ export function parseOrg(
       if (chartMatch) {
         const chartType = chartMatch[1].trim().toLowerCase();
         if (chartType !== 'org') {
-          result.error = `Line ${lineNumber}: Expected chart type "org", got "${chartType}"`;
-          return result;
+          const allTypes = ['org', 'class', 'flowchart', 'sequence', 'er', 'bar', 'line', 'pie', 'scatter', 'sankey', 'venn', 'timeline', 'arc', 'slope'];
+          let msg = `Expected chart type "org", got "${chartType}"`;
+          const hint = suggest(chartType, allTypes);
+          if (hint) msg += `. ${hint}`;
+          return fail(lineNumber, msg);
         }
         continue;
       }
@@ -172,8 +192,8 @@ export function parseOrg(
     const groupMatch = trimmed.match(GROUP_HEADING_RE);
     if (groupMatch) {
       if (contentStarted) {
-        result.error = `Line ${lineNumber}: Tag groups (##) must appear before org content`;
-        return result;
+        pushError(lineNumber, 'Tag groups (##) must appear before org content');
+        continue;
       }
       const groupName = groupMatch[1].trim();
       const alias = groupMatch[2] || undefined;
@@ -201,8 +221,8 @@ export function parseOrg(
           : trimmed;
         const { label, color } = extractColor(entryText, palette);
         if (!color) {
-          result.error = `Line ${lineNumber}: Expected 'Value(color)' in tag group '${currentTagGroup.name}'`;
-          return result;
+          pushError(lineNumber, `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`);
+          continue;
         }
         if (isDefault) {
           currentTagGroup.defaultValue = label;
@@ -259,10 +279,10 @@ export function parseOrg(
       // Find the parent node: top of stack (the most recent node)
       const parent = findMetadataParent(indent, indentStack);
       if (!parent) {
-        result.error = `Line ${lineNumber}: Metadata has no parent node`;
-        return result;
+        pushError(lineNumber, 'Metadata has no parent node');
+      } else {
+        parent.metadata[key] = value;
       }
-      parent.metadata[key] = value;
     } else if (metadataMatch && indentStack.length === 0) {
       // Metadata with no parent — could be a node label that happens to contain ':'
       // Treat it as a node if it's at indent 0 and no nodes exist yet
@@ -272,8 +292,7 @@ export function parseOrg(
         const node = parseNodeLabel(trimmed, indent, lineNumber, palette, ++nodeCounter, aliasMap);
         attachNode(node, indent, indentStack, result);
       } else {
-        result.error = `Line ${lineNumber}: Metadata has no parent node`;
-        return result;
+        pushError(lineNumber, 'Metadata has no parent node');
       }
     } else {
       // It's a node label — possibly with single-line pipe-delimited metadata
@@ -283,7 +302,9 @@ export function parseOrg(
   }
 
   if (result.roots.length === 0 && !result.error) {
-    result.error = 'No nodes found in org chart';
+    const diag = makeDgmoError(1, 'No nodes found in org chart');
+    result.diagnostics.push(diag);
+    result.error = formatDgmoError(diag);
   }
 
   return result;

package/src/org/renderer.ts

@@ -15,6 +15,7 @@ import { layoutOrg } from './layout';
 // ============================================================
 
 const DIAGRAM_PADDING = 20;
+const MAX_SCALE = 3;
 const TITLE_HEIGHT = 30;
 const TITLE_FONT_SIZE = 18;
 const LABEL_FONT_SIZE = 13;
@@ -144,7 +145,7 @@ export function renderOrg(
   const diagramH = layout.height + titleOffset;
   const scaleX = (width - DIAGRAM_PADDING * 2) / diagramW;
   const scaleY = (height - DIAGRAM_PADDING * 2) / diagramH;
-  const scale = Math.min(scaleX, scaleY);
+  const scale = Math.min(MAX_SCALE, scaleX, scaleY);
 
   // Center the diagram
   const scaledW = diagramW * scale;
@@ -209,6 +210,7 @@ export function renderOrg(
   }
 
   // Render container backgrounds (bottom layer)
+  const colorOff = parsed.options?.color === 'off';
   for (const c of layout.containers) {
     const cG = contentG
       .append('g')
@@ -234,8 +236,8 @@ export function renderOrg(
       });
     }
 
-    const fill = containerFill(palette, isDark, c.color);
-    const stroke = containerStroke(palette, c.color);
+    const fill = containerFill(palette, isDark, colorOff ? undefined : c.color);
+    const stroke = containerStroke(palette, colorOff ? undefined : c.color);
 
     // Background rect
     cG.append('rect')
@@ -301,7 +303,7 @@ export function renderOrg(
         .attr('y', c.height - COLLAPSE_BAR_HEIGHT)
         .attr('width', c.width - COLLAPSE_BAR_INSET * 2)
         .attr('height', COLLAPSE_BAR_HEIGHT)
-        .attr('fill', containerStroke(palette, c.color))
+        .attr('fill', containerStroke(palette, colorOff ? undefined : c.color))
         .attr('clip-path', `url(#${clipId})`)
         .attr('class', 'org-collapse-bar');
     }
@@ -360,8 +362,8 @@ export function renderOrg(
     }
 
     // Card background
-    const fill = nodeFill(palette, isDark, node.color);
-    const stroke = nodeStroke(palette, node.color);
+    const fill = nodeFill(palette, isDark, colorOff ? undefined : node.color);
+    const stroke = nodeStroke(palette, colorOff ? undefined : node.color);
 
     const rect = nodeG
       .append('rect')
@@ -448,22 +450,30 @@ export function renderOrg(
         .attr('y', node.height - COLLAPSE_BAR_HEIGHT)
         .attr('width', node.width - COLLAPSE_BAR_INSET * 2)
         .attr('height', COLLAPSE_BAR_HEIGHT)
-        .attr('fill', nodeStroke(palette, node.color))
+        .attr('fill', nodeStroke(palette, colorOff ? undefined : node.color))
         .attr('clip-path', `url(#${clipId})`)
         .attr('class', 'org-collapse-bar');
     }
 
   }
 
-  // Render legend — skip entirely in export mode; hide non-active groups when one is active
+  // Render legend — skip entirely in export mode.
+  // No active group: all groups rendered minified (compact chips).
+  // Active group selected: only that group rendered (full size), others hidden.
   if (!exportDims) for (const group of layout.legend) {
     const isActive =
       activeTagGroup != null &&
       group.name.toLowerCase() === activeTagGroup.toLowerCase();
 
-    // When a group is active, skip rendering all other groups
+    // When a group is active, skip all other groups entirely
     if (activeTagGroup != null && !isActive) continue;
 
+    // No active group → minified; active group → full
+    const isMinified = activeTagGroup == null;
+
+    const renderW = isMinified ? group.minifiedWidth : group.width;
+    const renderH = isMinified ? group.minifiedHeight : group.height;
+
     const gEl = contentG
       .append('g')
       .attr('transform', `translate(${group.x}, ${group.y})`)
@@ -477,8 +487,8 @@ export function renderOrg(
       .append('rect')
       .attr('x', 0)
       .attr('y', 0)
-      .attr('width', group.width)
-      .attr('height', group.height)
+      .attr('width', renderW)
+      .attr('height', renderH)
       .attr('rx', LEGEND_RADIUS)
       .attr('fill', legendFill);
 
@@ -499,11 +509,14 @@ export function renderOrg(
       .append('text')
       .attr('x', LEGEND_PAD)
       .attr('y', LEGEND_HEADER_H / 2 + LEGEND_FONT_SIZE / 2 - 2)
-      .attr('fill', palette.text)
+      .attr('fill', isMinified ? palette.textMuted : palette.text)
       .attr('font-size', LEGEND_FONT_SIZE)
       .attr('font-weight', 'bold')
       .text(group.name);
 
+    // Minified groups only show the header — skip entries and eye icon
+    if (isMinified) continue;
+
     // Eye icon for visibility toggle (interactive only, not export)
     if (hiddenAttributes !== undefined && !exportDims) {
       const groupKey = group.name.toLowerCase();