@diagrammo/dgmo 0.8.19 → 0.8.21

package/src/boxes-and-lines/layout.ts

@@ -3,7 +3,7 @@
 // ============================================================
 
 import dagre from '@dagrejs/dagre';
-import type { ParsedBoxesAndLines, BLNode } from './types';
+import type { ParsedBoxesAndLines, BLNode, BLGroup } from './types';
 
 /**
  * Clip a point at (cx, cy) to the border of a rectangle centered at (cx, cy)
@@ -38,8 +38,7 @@ const CONTAINER_PAD_X = 30;
 const CONTAINER_PAD_TOP = 40;
 const CONTAINER_PAD_BOTTOM = 24;
 const MAX_PARALLEL_EDGES = 5;
-const PARALLEL_SPACING = 12;
-const PARALLEL_EDGE_MARGIN = 10;
+const PARALLEL_SPACING = 22;
 
 // ── Result types ───────────────────────────────────────────
 
@@ -116,12 +115,23 @@ export function layoutBoxesAndLines(
   });
   g.setDefaultEdgeLabel(() => ({}));
 
-  // Determine which groups are collapsed
+  // Determine which groups are collapsed (but not hidden inside a collapsed parent)
   const collapsedGroupLabels = new Set<string>();
   if (collapseInfo) {
+    // Build set of all groups that are missing from parsed (collapsed or hidden)
+    const missingGroups = new Set<string>();
     for (const og of collapseInfo.originalGroups) {
       if (!parsed.groups.some((g) => g.label === og.label)) {
-        collapsedGroupLabels.add(og.label);
+        missingGroups.add(og.label);
+      }
+    }
+    // Only show a collapsed group as a node if its parent is NOT also missing
+    // (i.e., it's a directly collapsed group, not one hidden inside a collapsed parent)
+    for (const label of missingGroups) {
+      const og = collapseInfo.originalGroups.find((g) => g.label === label);
+      const parentLabel = og?.parentGroup;
+      if (!parentLabel || !missingGroups.has(parentLabel)) {
+        collapsedGroupLabels.add(label);
       }
     }
   }
@@ -147,6 +157,25 @@ export function layoutBoxesAndLines(
     });
   }
 
+  // Re-establish parent relationships for collapsed groups
+  // (must run AFTER expanded groups are added to the graph)
+  const originalGroupByLabel = new Map<string, BLGroup>();
+  if (collapseInfo) {
+    for (const og of collapseInfo.originalGroups) {
+      originalGroupByLabel.set(og.label, og);
+    }
+  }
+  for (const label of collapsedGroupLabels) {
+    const og = originalGroupByLabel.get(label);
+    if (og?.parentGroup && !collapsedGroupLabels.has(og.parentGroup)) {
+      const gid = `__group_${label}`;
+      const parentGid = `__group_${og.parentGroup}`;
+      if (g.hasNode(parentGid)) {
+        g.setParent(gid, parentGid);
+      }
+    }
+  }
+
   // Add nodes
   for (const node of parsed.nodes) {
     const size = computeNodeSize(node);
@@ -157,10 +186,26 @@ export function layoutBoxesAndLines(
     });
   }
 
+  // Set parent relationships for nested groups
+  for (const group of parsed.groups) {
+    if (group.parentGroup) {
+      const childGid = `__group_${group.label}`;
+      const parentGid = `__group_${group.parentGroup}`;
+      if (g.hasNode(childGid) && g.hasNode(parentGid)) {
+        g.setParent(childGid, parentGid);
+      }
+    }
+  }
+
+  // Build set of group labels for skip-check below
+  const groupLabelSet = new Set(parsed.groups.map((gr) => gr.label));
+
   // Set parent relationships for nodes in groups
   for (const group of parsed.groups) {
     const gid = `__group_${group.label}`;
     for (const child of group.children) {
+      // Skip children that are sub-groups — their parent is set above
+      if (groupLabelSet.has(child)) continue;
       if (g.hasNode(child)) {
         g.setParent(child, gid);
       }
@@ -263,10 +308,7 @@ export function layoutBoxesAndLines(
       edgeParallelCounts[idx] = 0;
     }
     if (capped.length < 2) continue;
-    const effectiveSpacing = Math.min(
-      PARALLEL_SPACING,
-      (60 - PARALLEL_EDGE_MARGIN) / (capped.length - 1)
-    );
+    const effectiveSpacing = PARALLEL_SPACING;
     for (let j = 0; j < capped.length; j++) {
       edgeYOffsets[capped[j]] =
         (j - (capped.length - 1) / 2) * effectiveSpacing;

package/src/boxes-and-lines/parser.ts

@@ -4,6 +4,7 @@
 
 import { makeDgmoError, suggest } from '../diagnostics';
 import type { DgmoError } from '../diagnostics';
+import { parseInArrowLabel } from '../utils/arrows';
 import type { ParsedBoxesAndLines, BLNode, BLEdge, BLGroup } from './types';
 import {
   matchTagBlockHeading,
@@ -19,7 +20,7 @@ import {
   OPTION_NOCOLON_RE,
 } from '../utils/parsing';
 
-const MAX_GROUP_DEPTH = 1;
+const MAX_GROUP_DEPTH = 2;
 
 /** Boxes-and-lines requires explicit first line — no heuristic detection. */
 export function looksLikeBoxesAndLines(_content: string): boolean {
@@ -386,13 +387,20 @@ export function parseBoxesAndLines(content: string): ParsedBoxesAndLines {
         }
       }
 
+      const parentGs = currentGroupState();
       const group: BLGroup = {
         label,
         children: [],
         lineNumber: lineNum,
         metadata: groupMeta,
+        ...(parentGs ? { parentGroup: parentGs.group.label } : {}),
       };
 
+      // Add nested group as child of parent group
+      if (parentGs && indent > parentGs.indent) {
+        parentGs.group.children.push(label);
+      }
+
       groupLabels.add(label);
       groupStack.push({ group, indent, depth: currentDepth });
       lastNodeLabel = label;
@@ -607,7 +615,9 @@ function parseEdgeLine(
   const biLabeledMatch = trimmed.match(/^(.+?)\s*<-(.+)->\s*(.+)$/);
   if (biLabeledMatch) {
     const source = resolveEndpoint(biLabeledMatch[1].trim());
-    const label = biLabeledMatch[2].trim();
+    const labelResult = parseInArrowLabel(biLabeledMatch[2], lineNum);
+    diagnostics.push(...labelResult.diagnostics);
+    const label = labelResult.label;
     let rest = biLabeledMatch[3].trim();
 
     let metadata: Record<string, string> = {};
@@ -631,7 +641,7 @@ function parseEdgeLine(
     return {
       source,
       target: resolveEndpoint(rest),
-      label: label || undefined,
+      label,
       bidirectional: true,
       lineNumber: lineNum,
       metadata,
@@ -675,7 +685,9 @@ function parseEdgeLine(
   const labeledMatch = trimmed.match(/^(.+?)\s+-(.+)->\s*(.+)$/);
   if (labeledMatch) {
     const source = resolveEndpoint(labeledMatch[1].trim());
-    const label = labeledMatch[2].trim();
+    const labelResult = parseInArrowLabel(labeledMatch[2], lineNum);
+    diagnostics.push(...labelResult.diagnostics);
+    const label = labelResult.label;
     let rest = labeledMatch[3].trim();
 
     if (label) {

package/src/boxes-and-lines/renderer.ts

@@ -36,6 +36,7 @@ const CHAR_WIDTH_RATIO = 0.6;
 const NODE_TEXT_PADDING = 12;
 const GROUP_RX = 8;
 const GROUP_LABEL_FONT_SIZE = 14;
+const GROUP_LABEL_ZONE = 32;
 
 type D3G = d3Selection.Selection<SVGGElement, unknown, null, undefined>;
 type D3Svg = d3Selection.Selection<SVGSVGElement, unknown, null, undefined>;
@@ -45,19 +46,13 @@ const lineGeneratorLR = d3Shape
   .line<{ x: number; y: number }>()
   .x((d) => d.x)
   .y((d) => d.y)
-  .curve(d3Shape.curveMonotoneX);
+  .curve(d3Shape.curveBasis);
 
 const lineGeneratorTB = d3Shape
   .line<{ x: number; y: number }>()
   .x((d) => d.x)
   .y((d) => d.y)
-  .curve(d3Shape.curveMonotoneY);
-
-const lineGeneratorLinear = d3Shape
-  .line<{ x: number; y: number }>()
-  .x((d) => d.x)
-  .y((d) => d.y)
-  .curve(d3Shape.curveLinear);
+  .curve(d3Shape.curveBasis);
 
 // ── Text fitting ───────────────────────────────────────────
 
@@ -336,8 +331,18 @@ export function renderBoxesAndLines(
   // Compute diagram bounds for scaling
   const titleOffset = parsed.title ? 40 : 0;
   const legendH = parsed.tagGroups.length > 0 ? LEGEND_HEIGHT + 8 : 0;
+
+  // Account for group label zone extensions (renderer-only, not in layout.height)
+  const groupLabelsSet = new Set(layout.groups.map((g) => g.label));
+  let labelZoneExtension = 0;
+  for (const group of parsed.groups) {
+    if (group.children.some((c) => groupLabelsSet.has(c))) {
+      labelZoneExtension += GROUP_LABEL_ZONE;
+    }
+  }
+
   const contentW = layout.width;
-  const contentH = layout.height + titleOffset + legendH;
+  const contentH = layout.height + titleOffset + legendH + labelZoneExtension;
 
   const scaleX = width / (contentW + DIAGRAM_PADDING * 2);
   const scaleY = height / (contentH + DIAGRAM_PADDING * 2);
@@ -390,10 +395,29 @@ export function renderBoxesAndLines(
   }
   ensureArrowMarkers(defs, arrowColors);
 
-  // ── Render groups (bottom layer) ───────────────────────
-  for (const group of layout.groups) {
+  // ── Render groups (bottom layer, largest first for nesting) ──
+  const sortedGroups = [...layout.groups].sort(
+    (a, b) => b.width * b.height - a.width * a.height
+  );
+  // Identify groups that contain sub-groups — only those need extra label space
+  const groupLabels = new Set(layout.groups.map((g) => g.label));
+  const hasSubGroups = new Set<string>();
+  for (const group of parsed.groups) {
+    for (const child of group.children) {
+      if (groupLabels.has(child)) hasSubGroups.add(group.label);
+    }
+  }
+
+  for (const group of sortedGroups) {
     const gx = group.x - group.width / 2;
-    const gy = group.y - group.height / 2;
+    // Only extend top for groups that contain sub-groups (dagre under-pads these)
+    const needsExtra = !group.collapsed && hasSubGroups.has(group.label);
+    const gy = needsExtra
+      ? group.y - group.height / 2 - GROUP_LABEL_ZONE
+      : group.y - group.height / 2;
+    const groupHeight = needsExtra
+      ? group.height + GROUP_LABEL_ZONE
+      : group.height;
 
     const groupG = diagramG
       .append('g')
@@ -464,7 +488,7 @@ export function renderBoxesAndLines(
         .attr('x', gx)
         .attr('y', gy)
         .attr('width', group.width)
-        .attr('height', group.height)
+        .attr('height', groupHeight)
         .attr('rx', GROUP_RX)
         .attr('ry', GROUP_RX)
         .attr('fill', mix(palette.surface, palette.bg, 40))
@@ -516,8 +540,73 @@ export function renderBoxesAndLines(
       if (isHidden) continue;
     }
 
-    // Apply parallel y-offset to points
-    const points = le.points.map((p) => ({ x: p.x, y: p.y + le.yOffset }));
+    // Self-loop: render as a smooth circular arc below the node
+    if (le.source === le.target) {
+      const nodeLayout = layoutNodeMap.get(le.source);
+      if (nodeLayout) {
+        const edgeG = diagramG
+          .append('g')
+          .attr('class', 'bl-edge-group')
+          .attr('data-line-number', String(le.lineNumber));
+        edgeGroups.set(i, edgeG as unknown as D3G);
+
+        const markerId = `bl-arrow-${color.replace('#', '')}`;
+        const cx = nodeLayout.x;
+        const cy = nodeLayout.y;
+        const hw = nodeLayout.width / 2;
+        const hh = nodeLayout.height / 2;
+        const pad = 20; // clearance from node edge
+
+        // Arc exits from bottom of right side, swings wide, returns to right of bottom side
+        const startX = cx + hw;
+        const startY = cy + hh * 0.4;
+        const endX = cx + hw * 0.4;
+        const endY = cy + hh;
+
+        // Control points swing far out to create a smooth circular arc
+        const cp1x = startX + hw + pad;
+        const cp1y = startY;
+        const cp2x = endX;
+        const cp2y = endY + hh + pad;
+
+        edgeG
+          .append('path')
+          .attr('class', 'bl-edge')
+          .attr(
+            'd',
+            `M ${startX} ${startY} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${endX} ${endY}`
+          )
+          .attr('fill', 'none')
+          .attr('stroke', color)
+          .attr('stroke-width', EDGE_STROKE_WIDTH)
+          .attr('marker-end', `url(#${markerId})`);
+      }
+      continue;
+    }
+
+    // Parallel edge fan: construct explicit 5-point geometry so lines
+    // bundle at ports and visibly spread apart in the middle.
+    let points: { x: number; y: number }[];
+    if (le.yOffset !== 0 && le.parallelCount > 1) {
+      const srcLayout = layoutNodeMap.get(le.source);
+      const tgtLayout = layoutNodeMap.get(le.target);
+      const srcY = srcLayout?.y ?? le.points[0]?.y ?? 0;
+      const tgtY = tgtLayout?.y ?? le.points[le.points.length - 1]?.y ?? 0;
+      const srcX = le.points[0]?.x ?? 0;
+      const tgtX = le.points[le.points.length - 1]?.x ?? 0;
+      const midX = (srcX + tgtX) / 2;
+      const midY = (srcY + tgtY) / 2;
+
+      points = [
+        { x: srcX, y: srcY }, // port (bundled)
+        { x: srcX + (midX - srcX) * 0.3, y: srcY + le.yOffset * 0.5 }, // separate
+        { x: midX, y: midY + le.yOffset }, // full spread
+        { x: tgtX - (tgtX - midX) * 0.3, y: tgtY + le.yOffset * 0.5 }, // converge
+        { x: tgtX, y: tgtY }, // port (bundled)
+      ];
+    } else {
+      points = le.points.map((p) => ({ x: p.x, y: p.y }));
+    }
     if (points.length < 2) continue;
 
     const edgeG = diagramG
@@ -527,11 +616,7 @@ export function renderBoxesAndLines(
     edgeGroups.set(i, edgeG as unknown as D3G);
 
     const markerId = `bl-arrow-${color.replace('#', '')}`;
-    const gen = le.deferred
-      ? lineGeneratorLinear
-      : parsed.direction === 'TB'
-        ? lineGeneratorTB
-        : lineGeneratorLR;
+    const gen = parsed.direction === 'TB' ? lineGeneratorTB : lineGeneratorLR;
     const path = edgeG
       .append('path')
       .attr('class', 'bl-edge')
@@ -546,14 +631,25 @@ export function renderBoxesAndLines(
       path.attr('marker-start', `url(#${revId})`);
     }
 
-    // Edge label
+    // Edge label — for parallel edges, place relative to each line:
+    // negative offset (top line) → label above, zero → on line, positive → below
     if (le.label && le.labelX != null && le.labelY != null) {
       const lw = le.label.length * EDGE_LABEL_FONT_SIZE * CHAR_WIDTH_RATIO;
+      const labelH = EDGE_LABEL_FONT_SIZE + 6;
+      let ly: number;
+      if (le.parallelCount > 1 && le.yOffset !== 0) {
+        // Position label on the line at midpoint, shifted above/below based on offset sign
+        const lineY = le.labelY + 10 + le.yOffset; // +10 to undo the -10 in layout
+        const labelShift = le.yOffset < 0 ? -labelH : labelH;
+        ly = lineY + labelShift * 0.5;
+      } else {
+        ly = le.labelY + le.yOffset;
+      }
       labelPositions.push({
         x: le.labelX,
-        y: le.labelY + le.yOffset,
+        y: ly,
         width: lw + 8,
-        height: EDGE_LABEL_FONT_SIZE + 6,
+        height: labelH,
         idx: i,
       });
     }
@@ -743,10 +839,12 @@ export function renderBoxesAndLinesForExport(
   options?: {
     exportDims?: { width: number; height: number };
     activeTagGroup?: string | null;
+    hiddenTagValues?: Map<string, Set<string>>;
   }
 ): void {
   renderBoxesAndLines(container, parsed, layout, palette, isDark, {
     exportDims: options?.exportDims,
     activeTagGroup: options?.activeTagGroup,
+    hiddenTagValues: options?.hiddenTagValues,
   });
 }

package/src/boxes-and-lines/types.ts

@@ -22,6 +22,7 @@ export interface BLGroup {
   children: string[];
   lineNumber: number;
   metadata: Record<string, string>;
+  parentGroup?: string;
 }
 
 export interface ParsedBoxesAndLines {

package/src/c4/parser.ts

@@ -4,6 +4,7 @@
 
 import type { PaletteColors } from '../palettes';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
+import { parseInArrowLabel } from '../utils/arrows';
 import type { TagGroup } from '../utils/tag-groups';
 import {
   matchTagBlockHeading,
@@ -519,14 +520,14 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
           break;
         }
 
-        // Extract [technology] from end of label
-        let label: string | undefined = rawLabel;
+        // TD-5: the trailing `[tech]` sugar is no longer extracted from the
+        // in-arrow label. The entire label stays as the label. Technology
+        // metadata comes from post-colon or pipe metadata on the target.
+        // Also run TD-13/TD-14 validation on the label characters.
+        const labelResult = parseInArrowLabel(rawLabel, lineNumber);
+        labelResult.diagnostics.forEach((d) => result.diagnostics.push(d));
+        const label: string | undefined = labelResult.label;
         let technology: string | undefined;
-        const techMatch = rawLabel.match(/\[([^\]]+)\]\s*$/);
-        if (techMatch) {
-          label = rawLabel.substring(0, techMatch.index!).trim() || undefined;
-          technology = techMatch[1].trim();
-        }
 
         // Extract pipe metadata from target body (e.g. "Database | tech: SQL")
         let target = targetBody;

package/src/class/parser.ts

@@ -1,6 +1,7 @@
 import { resolveColorWithDiagnostic } from '../colors';
 import type { PaletteColors } from '../palettes';
 import { makeDgmoError, formatDgmoError } from '../diagnostics';
+import { validateLabelCharacters } from '../utils/arrows';
 import {
   measureIndent,
   parseFirstLine,
@@ -251,6 +252,11 @@ export function parseClassDiagram(
 
         getOrCreateClass(targetName, lineNumber);
 
+        if (label) {
+          result.diagnostics.push(
+            ...validateLabelCharacters(label, lineNumber)
+          );
+        }
         result.relationships.push({
           source: currentClass.id,
           target: classId(targetName),

package/src/cli.ts

@@ -160,7 +160,6 @@ Key options:
 - \`--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\`)
-- \`--branding\` — add diagrammo.app branding to exports
 - \`--chart-types\` — list all supported chart types
 
 ## Supported Chart Types
@@ -502,7 +501,6 @@ Options:
   --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
-  --branding           Add diagrammo.app branding to exports
   --copy               Copy URL to clipboard (only with -o url)
   --json               Output structured JSON to stdout
   --chart-types        List all supported chart types
@@ -532,7 +530,6 @@ function parseArgs(argv: string[]): {
   palette: string;
   help: boolean;
   version: boolean;
-  branding: boolean;
   copy: boolean;
   json: boolean;
   chartTypes: boolean;
@@ -553,7 +550,6 @@ function parseArgs(argv: string[]): {
     palette: 'nord',
     help: false,
     version: false,
-    branding: false,
     copy: false,
     json: false,
     chartTypes: false,
@@ -637,9 +633,6 @@ function parseArgs(argv: string[]): {
     } else if (arg === '--tag-group') {
       result.tagGroup = args[++i];
       i++;
-    } else if (arg === '--branding') {
-      result.branding = true;
-      i++;
     } else if (arg === '--json') {
       result.json = true;
       i++;
@@ -1251,10 +1244,9 @@ async function main(): Promise<void> {
     }
   }
 
-  const svg = await render(content, {
+  const { svg } = await render(content, {
     theme: opts.theme,
     palette: opts.palette,
-    branding: opts.branding,
     c4Level: opts.c4Level,
     c4System: opts.c4System,
     c4Container: opts.c4Container,

package/src/completion.ts

@@ -335,6 +335,20 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
       hide: { description: 'Hide tag:value pairs' },
     }),
   ],
+  [
+    'mindmap',
+    withGlobals({
+      'hide-descriptions': { description: 'Hide node descriptions' },
+      'active-tag': { description: 'Active tag group name' },
+    }),
+  ],
+  [
+    'wireframe',
+    withGlobals({
+      mobile: { description: 'Use mobile (narrow vertical) layout' },
+      'active-tag': { description: 'Active tag group name' },
+    }),
+  ],
 ]);
 
 // ============================================================
@@ -378,6 +392,8 @@ const CHART_TYPE_DESCRIPTIONS: Record<string, string> = {
   infra: 'Infrastructure diagram',
   gantt: 'Gantt chart',
   'boxes-and-lines': 'Boxes and lines diagram',
+  mindmap: 'Mindmap diagram',
+  wireframe: 'UI wireframe diagram',
 };
 
 /** All chart types with descriptions, for chart type autocomplete. Excludes `multi-line` alias. */
@@ -511,6 +527,16 @@ export const PIPE_METADATA = new Map<
       edge: {},
     },
   ],
+  [
+    'mindmap',
+    {
+      node: {
+        description: { description: 'Node description text' },
+        collapsed: { description: 'Collapse node subtree by default' },
+      },
+      edge: {},
+    },
+  ],
 ]);
 
 // ============================================================