@diagrammo/dgmo 0.6.0 → 0.6.2

package/src/infra/types.ts

@@ -99,13 +99,6 @@ export interface InfraTagGroup {
   lineNumber: number;
 }
 
-export interface InfraScenario {
-  name: string;
-  /** Node property overrides: nodeId -> { key: value } */
-  overrides: Record<string, Record<string, string | number>>;
-  lineNumber: number;
-}
-
 export interface ParsedInfra {
   type: 'infra';
   title: string | null;
@@ -115,7 +108,6 @@ export interface ParsedInfra {
   edges: InfraEdge[];
   groups: InfraGroup[];
   tagGroups: InfraTagGroup[];
-  scenarios: InfraScenario[];
   options: Record<string, string>;
   diagnostics: DgmoError[];
   error: string | null;
@@ -128,9 +120,7 @@ export interface ParsedInfra {
 export interface InfraComputeParams {
   rps?: number; // override edge rps (for slider)
   instanceOverrides?: Record<string, number>; // nodeId -> instance count override
-  scenario?: InfraScenario | null; // apply a named scenario's overrides
-  /** Per-node property overrides: nodeId -> { propertyKey: numericValue }.
-   *  Applied after scenario overrides. Lets sliders adjust cache-hit, etc. */
+  /** Per-node property overrides: nodeId -> { propertyKey: numericValue }. */
   propertyOverrides?: Record<string, Record<string, number>>;
   /** Set of group IDs that should be treated as collapsed (virtual nodes). */
   collapsedGroups?: Set<string>;

package/src/initiative-status/layout.ts

@@ -28,8 +28,8 @@ export interface ISLayoutEdge {
   status: import('./types').InitiativeStatus;
   lineNumber: number;
   // Layout contract for points[]:
-  //   Back-edges:       3 points — [src.bottom/top_center, arc_control, tgt.bottom/top_center]
-  //   Y-displaced:      3 points — [src.bottom/top_center, diagonal_mid, tgt.left_center]
+  //   Back-edges:       5 points — [src.top/bottom_center, depart_ctrl, arc_control, approach_ctrl, tgt.top/bottom_center]
+  //   Top/bottom-exit:  4 points — [src.top/bottom_center, depart_ctrl, tgt_approach, tgt.left_center]
   //   4-point elbow:    points[0] and points[last] pinned at node center Y; interior fans via yOffset
   //   fixedDagrePoints: points[0]=src.right, points[last]=tgt.left; interior from dagre
   points: { x: number; y: number }[];
@@ -81,6 +81,7 @@ const PARALLEL_EDGE_MARGIN = 12; // total vertical margin reserved at top+bottom
 const MAX_PARALLEL_EDGES = 5; // at most this many edges rendered between any directed source→target pair
 const BACK_EDGE_MARGIN = 40; // clearance below/above nodes for back-edge arcs (~half NODESEP)
 const BACK_EDGE_MIN_SPREAD = Math.round(NODE_WIDTH * 0.75); // minimum horizontal arc spread for near-same-X back-edges
+const TOP_EXIT_STEP = 10; // px: control-point offset giving near-vertical departure tangent for top/bottom-exit elbows
 const CHAR_WIDTH_RATIO = 0.6;
 const NODE_FONT_SIZE = 13;
 const NODE_TEXT_PADDING = 12;
@@ -221,15 +222,14 @@ export function layoutInitiativeStatus(
     const dagreEdge = g.edge(edge.source, edge.target, `e${i}`);
     const dagrePoints: { x: number; y: number }[] = dagreEdge?.points ?? [];
     const hasIntermediateRank = allNodeX.some((x) => x > src.x + 20 && x < tgt.x - 20);
-    const step = Math.min((enterX - exitX) * 0.15, 20);
+    const step = Math.max(0, Math.min((enterX - exitX) * 0.15, 20)); // clamped ≥0: guards overlapping nodes
 
-    // 4-branch routing: isBackEdge → isYDisplaced → 4-point elbow → fixedDagrePoints
-    const isBackEdge = tgt.x < src.x - 5; // 5px epsilon: same-rank same-X nodes must not false-match
-    const isYDisplaced = !isBackEdge
-      && Math.abs(tgt.y - src.y) > NODESEP;
-    // Note: hasIntermediateRank guard intentionally omitted from isYDisplaced — the > NODESEP threshold
-    // already filters normal adjacent-rank fans (which spread by ~NODESEP); the guard would block the
-    // original use case (fan targets far below source in the same adjacent rank).
+    // 5-branch routing: isBackEdge → isTopExit → isBottomExit → 4-point elbow → fixedDagrePoints
+    const isBackEdge   = tgt.x < src.x - 5; // 5px epsilon: same-rank same-X nodes must not false-match
+    // Guards: tgt.x > src.x (strict) keeps step positive; !hasIntermediateRank defers multi-rank
+    // displaced edges to fixedDagrePoints so dagre can route around intermediate nodes.
+    const isTopExit    = !isBackEdge && tgt.x > src.x && !hasIntermediateRank && tgt.y < src.y - NODESEP;
+    const isBottomExit = !isBackEdge && tgt.x > src.x && !hasIntermediateRank && tgt.y > src.y + NODESEP;
 
     let points: { x: number; y: number }[];
 
@@ -248,33 +248,52 @@ export function layoutInitiativeStatus(
         ? rawMidX + spreadDir * BACK_EDGE_MIN_SPREAD
         : rawMidX;
       const midX = Math.min(src.x, Math.max(tgt.x, unclamped));
+      // Clamped departure/approach control points give near-orthogonal tangents at node edges.
+      // For narrow back-edges (|src.x - tgt.x| < 2*TOP_EXIT_STEP), clamps degrade to midX±1 — valid.
+      const srcDepart   = Math.max(midX + 1, src.x - TOP_EXIT_STEP);
+      const tgtApproach = Math.min(midX - 1, tgt.x + TOP_EXIT_STEP);
       if (routeAbove) {
         const arcY = Math.min(src.y - srcHalfH, tgt.y - tgtHalfH) - BACK_EDGE_MARGIN;
         points = [
-          { x: src.x, y: src.y - srcHalfH },
-          { x: midX,  y: arcY },
-          { x: tgt.x, y: tgt.y - tgtHalfH },
+          { x: src.x,       y: src.y - srcHalfH },
+          { x: srcDepart,   y: src.y - srcHalfH - TOP_EXIT_STEP },
+          { x: midX,        y: arcY },
+          { x: tgtApproach, y: tgt.y - tgtHalfH - TOP_EXIT_STEP },
+          { x: tgt.x,       y: tgt.y - tgtHalfH },
         ];
       } else {
         const arcY = Math.max(src.y + srcHalfH, tgt.y + tgtHalfH) + BACK_EDGE_MARGIN;
         points = [
-          { x: src.x, y: src.y + srcHalfH },
-          { x: midX,  y: arcY },
-          { x: tgt.x, y: tgt.y + tgtHalfH },
+          { x: src.x,       y: src.y + srcHalfH },
+          { x: srcDepart,   y: src.y + srcHalfH + TOP_EXIT_STEP },
+          { x: midX,        y: arcY },
+          { x: tgtApproach, y: tgt.y + tgtHalfH + TOP_EXIT_STEP },
+          { x: tgt.x,       y: tgt.y + tgtHalfH },
         ];
       }
-    } else if (isYDisplaced) {
-      // 3-point diagonal: exit bottom/top-center of source, enter left-center of target.
-      // Using src.x (center) not exitX (right side) avoids overlapping the parallel bundle.
-      const exitY = tgt.y > src.y + NODESEP
-        ? src.y + src.height / 2   // target is below — exit bottom
-        : src.y - src.height / 2;  // target is above — exit top
-      const midX = Math.max(src.x + 1, (src.x + enterX) / 2); // +1 ensures strictly increasing X
-      const midY = (exitY + tgt.y) / 2;
+    } else if (isTopExit) {
+      // 4-point top-exit elbow: exits top of source ~vertically, arrives left of target horizontally.
+      // Top exit keeps this edge ABOVE the horizontal right-exit bundle → avoids crossings.
+      // yOffset repurposed as X-spread for top/bottom-exit branches (same magnitude, different axis).
+      // p1x: floor at src.x prevents negative-yOffset edges from going left of origin (breaks monotone X);
+      // ceiling at midpoint-1 prevents overshooting for large positive yOffset (±32px for 5 parallel edges).
+      const exitY = src.y - src.height / 2;
+      const p1x = Math.min(Math.max(src.x, src.x + yOffset + TOP_EXIT_STEP), (src.x + enterX) / 2 - 1);
       points = [
-        { x: src.x,  y: exitY },
-        { x: midX,   y: midY },
-        { x: enterX, y: tgt.y },
+        { x: src.x,         y: exitY },
+        { x: p1x,           y: exitY - TOP_EXIT_STEP },
+        { x: enterX - step, y: tgt.y + yOffset },
+        { x: enterX,        y: tgt.y },
+      ];
+    } else if (isBottomExit) {
+      // 4-point bottom-exit elbow: mirror of top-exit. Keeps edge BELOW the horizontal bundle.
+      const exitY = src.y + src.height / 2;
+      const p1x = Math.min(Math.max(src.x, src.x + yOffset + TOP_EXIT_STEP), (src.x + enterX) / 2 - 1);
+      points = [
+        { x: src.x,         y: exitY },
+        { x: p1x,           y: exitY + TOP_EXIT_STEP },
+        { x: enterX - step, y: tgt.y + yOffset },
+        { x: enterX,        y: tgt.y },
       ];
     } else if (tgt.x > src.x && !hasIntermediateRank) {
       // 4-point elbow: adjacent-rank forward edges (unchanged)

package/src/kanban/renderer.ts

@@ -10,6 +10,13 @@ import { renderInlineText } from '../utils/inline-markdown';
 import type { ParsedKanban, KanbanColumn, KanbanCard, KanbanTagGroup } from './types';
 import { parseKanban } from './parser';
 import { isArchiveColumn } from './mutations';
+import {
+  LEGEND_HEIGHT,
+  LEGEND_PILL_FONT_SIZE,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_CAPSULE_PAD,
+} from '../utils/legend-constants';
 
 // ============================================================
 // Constants
@@ -36,10 +43,6 @@ const CARD_META_FONT_SIZE = 10;
 const WIP_FONT_SIZE = 10;
 const COLUMN_RADIUS = 8;
 const COLUMN_HEADER_RADIUS = 8;
-const LEGEND_HEIGHT = 28;
-const LEGEND_FONT_SIZE = 11;
-const LEGEND_DOT_R = 4;
-const LEGEND_ENTRY_FONT_SIZE = 10;
 
 // ============================================================
 // Tag color resolution
@@ -106,9 +109,8 @@ function computeLayout(
   parsed: ParsedKanban,
   _palette: PaletteColors
 ): { columns: ColumnLayout[]; totalWidth: number; totalHeight: number } {
-  // Title and legend share one row
-  const hasHeader = !!parsed.title || parsed.tagGroups.length > 0;
-  const headerHeight = hasHeader ? Math.max(TITLE_HEIGHT, LEGEND_HEIGHT) + 8 : 0;
+  // Title row
+  const headerHeight = parsed.title ? TITLE_HEIGHT + 8 : 0;
   const startY = DIAGRAM_PADDING + headerHeight;
 
   // Estimate column widths based on content
@@ -189,7 +191,8 @@ function computeLayout(
   }
 
   const totalWidth = currentX - COLUMN_GAP + DIAGRAM_PADDING;
-  const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING;
+  const legendSpace = parsed.tagGroups.length > 0 ? LEGEND_HEIGHT : 0;
+  const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING + legendSpace;
 
   return { columns: columnLayouts, totalWidth, totalHeight };
 }
@@ -237,18 +240,19 @@ export function renderKanban(
       .text(parsed.title);
   }
 
-  // Legend (same row as title)
+  // Legend (bottom of diagram)
   if (parsed.tagGroups.length > 0) {
-    const legendY = DIAGRAM_PADDING;
-    // Start legend after title text
-    const titleTextWidth = parsed.title
-      ? parsed.title.length * TITLE_FONT_SIZE * 0.6 + 16
-      : 0;
-    let legendX = DIAGRAM_PADDING + titleTextWidth;
+    const legendY = height - LEGEND_HEIGHT;
+    let legendX = DIAGRAM_PADDING;
     const groupBg = isDark
       ? mix(palette.surface, palette.bg, 50)
       : mix(palette.surface, palette.bg, 30);
-    const capsulePad = 4;
+    const capsulePad = LEGEND_CAPSULE_PAD;
+
+    const legendContainer = svg.append('g').attr('class', 'kanban-legend');
+    if (activeTagGroup) {
+      legendContainer.attr('data-legend-active', activeTagGroup.toLowerCase());
+    }
 
     for (const group of parsed.tagGroups) {
       const isActive =
@@ -257,7 +261,7 @@ export function renderKanban(
       // When a group is active, skip all other groups entirely
       if (activeTagGroup != null && !isActive) continue;
 
-      const pillTextWidth = group.name.length * LEGEND_FONT_SIZE * 0.6;
+      const pillTextWidth = group.name.length * LEGEND_PILL_FONT_SIZE * 0.6;
       const pillWidth = pillTextWidth + 16;
 
       // Measure total capsule width for active groups (pill + entries)
@@ -272,7 +276,7 @@ export function renderKanban(
 
       // Outer capsule background for active group
       if (isActive) {
-        svg
+        legendContainer
           .append('rect')
           .attr('x', legendX)
           .attr('y', legendY)
@@ -286,7 +290,7 @@ export function renderKanban(
 
       // Pill background
       const pillBg = isActive ? palette.bg : groupBg;
-      svg
+      legendContainer
         .append('rect')
         .attr('x', pillX)
         .attr('y', legendY + (isActive ? capsulePad : 0))
@@ -298,7 +302,7 @@ export function renderKanban(
         .attr('data-legend-group', group.name.toLowerCase());
 
       if (isActive) {
-        svg
+        legendContainer
           .append('rect')
           .attr('x', pillX)
           .attr('y', legendY + capsulePad)
@@ -311,11 +315,11 @@ export function renderKanban(
       }
 
       // Pill text
-      svg
+      legendContainer
         .append('text')
         .attr('x', pillX + pillWidth / 2)
-        .attr('y', legendY + LEGEND_HEIGHT / 2 + LEGEND_FONT_SIZE / 2 - 2)
-        .attr('font-size', LEGEND_FONT_SIZE)
+        .attr('y', legendY + 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')
@@ -325,7 +329,7 @@ export function renderKanban(
       if (isActive) {
         let entryX = pillX + pillWidth + 4;
         for (const entry of group.entries) {
-          const entryG = svg
+          const entryG = legendContainer
             .append('g')
             .attr('data-legend-entry', entry.value.toLowerCase())
             .style('cursor', 'pointer');

package/src/org/renderer.ts

@@ -10,6 +10,23 @@ import type { ParsedOrg } from './parser';
 import type { OrgLayoutResult, OrgLayoutNode } from './layout';
 import { parseOrg } from './parser';
 import { layoutOrg } from './layout';
+import {
+  LEGEND_HEIGHT,
+  LEGEND_PILL_PAD,
+  LEGEND_PILL_FONT_SIZE,
+  LEGEND_PILL_FONT_W,
+  LEGEND_CAPSULE_PAD,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_ENTRY_FONT_W,
+  LEGEND_ENTRY_DOT_GAP,
+  LEGEND_ENTRY_TRAIL,
+  LEGEND_GROUP_GAP,
+  LEGEND_EYE_SIZE,
+  LEGEND_EYE_GAP,
+  EYE_OPEN_PATH,
+  EYE_CLOSED_PATH,
+} from '../utils/legend-constants';
 
 // ============================================================
 // Constants
@@ -37,27 +54,7 @@ const CONTAINER_HEADER_HEIGHT = 28;
 const COLLAPSE_BAR_HEIGHT = 6;
 const COLLAPSE_BAR_INSET = 0;
 
-// Legend (kanban-style pills)
-const LEGEND_HEIGHT = 28;
-const LEGEND_PILL_PAD = 16;
-const LEGEND_PILL_FONT_SIZE = 11;
-const LEGEND_PILL_FONT_W = LEGEND_PILL_FONT_SIZE * 0.6;
-const LEGEND_CAPSULE_PAD = 4;
-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_GROUP_GAP = 12;
-const LEGEND_EYE_SIZE = 14;
-const LEGEND_EYE_GAP = 6;
-const LEGEND_FIXED_GAP = 8; // gap between fixed legend and scaled diagram
-
-// Eye icon SVG paths (14×14 viewBox)
-const EYE_OPEN_PATH =
-  'M1 7s2.5-5 6-5 6 5 6 5-2.5 5-6 5-6-5-6-5z M7 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z';
-const EYE_CLOSED_PATH =
-  'M2.5 2.5l9 9 M1.5 7s2.2-4 5.5-4c1.2 0 2.2.5 3 1.1 M12.5 7s-2.2 4-5.5 4c-1.2 0-2.2-.5-3-1.1';
+const LEGEND_FIXED_GAP = 8; // gap between fixed legend and scaled diagram — local, not shared
 
 // ============================================================
 // Color helpers
@@ -117,7 +114,7 @@ export function renderOrg(
 
   const titleOffset = parsed.title ? TITLE_HEIGHT : 0;
   const legendOnly = layout.nodes.length === 0;
-  const legendPosition = parsed.options?.['legend-position'] ?? 'top';
+  const legendPosition = parsed.options?.['legend-position'] ?? 'bottom';
   const hasLegend = layout.legend.length > 0;
 
   // In app mode (not export), render the legend at a fixed size outside the
@@ -512,7 +509,7 @@ export function renderOrg(
     }
 
     // Choose parent: unscaled group for fixedLegend, contentG for legend-only
-    const legendParent = fixedLegend
+    const legendParentBase = fixedLegend
       ? svg
           .append('g')
           .attr('class', 'org-legend-fixed')
@@ -523,6 +520,10 @@ export function renderOrg(
               : `translate(0, ${DIAGRAM_PADDING + titleReserve})`
           )
       : contentG;
+    const legendParent = legendParentBase;
+    if (fixedLegend && activeTagGroup) {
+      legendParentBase.attr('data-legend-active', activeTagGroup.toLowerCase());
+    }
 
     for (const group of visibleGroups) {
       const isActive =

package/src/render.ts

@@ -52,7 +52,7 @@ export async function render(
     c4Level?: 'context' | 'containers' | 'components' | 'deployment';
     c4System?: string;
     c4Container?: string;
-    scenario?: string;
+    tagGroup?: string;
   },
 ): Promise<string> {
   const theme = options?.theme ?? 'light';
@@ -75,6 +75,6 @@ export async function render(
     c4Level: options?.c4Level,
     c4System: options?.c4System,
     c4Container: options?.c4Container,
-    scenario: options?.scenario,
+    tagGroup: options?.tagGroup,
   });
 }

package/src/sequence/renderer.ts

@@ -25,6 +25,19 @@ import type {
 import { isSequenceBlock, isSequenceSection, isSequenceNote } from './parser';
 import { resolveSequenceTags } from './tag-resolution';
 import type { ResolvedTagMap } from './tag-resolution';
+import {
+  LEGEND_HEIGHT,
+  LEGEND_PILL_PAD,
+  LEGEND_PILL_FONT_SIZE,
+  LEGEND_PILL_FONT_W,
+  LEGEND_CAPSULE_PAD,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_ENTRY_FONT_W,
+  LEGEND_ENTRY_DOT_GAP,
+  LEGEND_ENTRY_TRAIL,
+  LEGEND_GROUP_GAP,
+} from '../utils/legend-constants';
 
 // ============================================================
 // Layout Constants
@@ -54,19 +67,6 @@ const NOTE_CHARS_PER_LINE = Math.floor((NOTE_MAX_W - NOTE_PAD_H * 2 - NOTE_FOLD)
 const COLLAPSED_NOTE_H = 20;
 const COLLAPSED_NOTE_W = 40;
 
-// Legend rendering constants (consistent with org chart legend)
-const LEGEND_HEIGHT = 28;
-const LEGEND_PILL_PAD = 16;
-const LEGEND_PILL_FONT_SIZE = 11;
-const LEGEND_PILL_FONT_W = LEGEND_PILL_FONT_SIZE * 0.6;
-const LEGEND_CAPSULE_PAD = 4;
-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_GROUP_GAP = 12;
-const LEGEND_BOTTOM_GAP = 8;
 
 
 function wrapTextLines(text: string, maxChars: number): string[] {
@@ -1282,12 +1282,10 @@ export function renderSequenceDiagram(
 
   // Compute cumulative Y positions for each step, with section dividers as stable anchors
   const titleOffset = title ? TITLE_HEIGHT : 0;
-  const legendOffset =
-    parsed.tagGroups.length > 0 ? LEGEND_HEIGHT + LEGEND_BOTTOM_GAP : 0;
   const groupOffset =
     groups.length > 0 ? GROUP_PADDING_TOP + GROUP_LABEL_SIZE : 0;
   const participantStartY =
-    TOP_MARGIN + titleOffset + legendOffset + PARTICIPANT_Y_OFFSET + groupOffset;
+    TOP_MARGIN + titleOffset + PARTICIPANT_Y_OFFSET + groupOffset;
   const lifelineStartY0 = participantStartY + PARTICIPANT_BOX_HEIGHT;
   const hasActors = participants.some((p) => p.type === 'actor');
   const messageStartOffset = MESSAGE_START_OFFSET + (hasActors ? 20 : 0);
@@ -1388,11 +1386,13 @@ export function renderSequenceDiagram(
     participants.length * PARTICIPANT_GAP,
     PARTICIPANT_BOX_WIDTH + 40
   );
-  const totalHeight =
+  const contentHeight =
     participantStartY +
     PARTICIPANT_BOX_HEIGHT +
     Math.max(lifelineLength, 40) +
     40;
+  const legendSpace = parsed.tagGroups.length > 0 ? LEGEND_HEIGHT : 0;
+  const totalHeight = contentHeight + legendSpace;
 
   const containerWidth = options?.exportWidth ?? container.getBoundingClientRect().width;
   const svgWidth = Math.max(totalWidth, containerWidth);
@@ -1571,7 +1571,7 @@ export function renderSequenceDiagram(
 
   // Render legend pills for tag groups
   if (parsed.tagGroups.length > 0) {
-    const legendY = TOP_MARGIN + titleOffset;
+    const legendY = contentHeight;
     const groupBg = isDark
       ? mix(palette.surface, palette.bg, 50)
       : mix(palette.surface, palette.bg, 30);
@@ -1615,8 +1615,13 @@ export function renderSequenceDiagram(
       (legendItems.length - 1) * LEGEND_GROUP_GAP;
     let legendX = (svgWidth - totalLegendWidth) / 2;
 
+    const legendContainer = svg.append('g').attr('class', 'sequence-legend');
+    if (activeTagGroup) {
+      legendContainer.attr('data-legend-active', activeTagGroup.toLowerCase());
+    }
+
     for (const item of legendItems) {
-      const gEl = svg
+      const gEl = legendContainer
         .append('g')
         .attr('transform', `translate(${legendX}, ${legendY})`)
         .attr('class', 'sequence-legend-group')

package/src/sitemap/layout.ts

@@ -699,32 +699,25 @@ export function layoutSitemap(
     activeTagGroup != null || allExpanded ? g.width : g.minifiedWidth;
 
   if (visibleGroups.length > 0) {
-    // Top position: horizontal row above chart
+    // Bottom position: horizontal row below chart content
     const legendShift = LEGEND_HEIGHT + LEGEND_GROUP_GAP;
 
-    // Push chart content down
-    for (const n of layoutNodes) n.y += legendShift;
-    for (const c of layoutContainers) c.y += legendShift;
-    for (const e of layoutEdges) {
-      for (const p of e.points) p.y += legendShift;
-    }
-
     const totalGroupsWidth =
       visibleGroups.reduce((s, g) => s + effectiveW(g), 0) +
       (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
 
-    let cx = MARGIN;
+    // Center legend groups horizontally
+    const neededWidth = totalGroupsWidth + MARGIN * 2;
+    if (neededWidth > totalWidth) totalWidth = neededWidth;
+    let cx = (totalWidth - totalGroupsWidth) / 2;
+    const legendY = totalHeight + LEGEND_GROUP_GAP;
     for (const g of visibleGroups) {
       g.x = cx;
-      g.y = MARGIN;
+      g.y = legendY;
       cx += effectiveW(g) + LEGEND_GROUP_GAP;
     }
 
     totalHeight += legendShift;
-    const neededWidth = totalGroupsWidth + MARGIN * 2;
-    if (neededWidth > totalWidth) {
-      totalWidth = neededWidth;
-    }
   }
 
   return {

package/src/sitemap/renderer.ts

@@ -15,6 +15,23 @@ import type {
   SitemapContainerBounds,
   SitemapLegendGroup,
 } from './layout';
+import {
+  LEGEND_HEIGHT,
+  LEGEND_PILL_PAD,
+  LEGEND_PILL_FONT_SIZE,
+  LEGEND_PILL_FONT_W,
+  LEGEND_CAPSULE_PAD,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_ENTRY_FONT_W,
+  LEGEND_ENTRY_DOT_GAP,
+  LEGEND_ENTRY_TRAIL,
+  LEGEND_GROUP_GAP,
+  LEGEND_EYE_SIZE,
+  LEGEND_EYE_GAP,
+  EYE_OPEN_PATH,
+  EYE_CLOSED_PATH,
+} from '../utils/legend-constants';
 
 // ============================================================
 // Constants
@@ -44,21 +61,7 @@ const EDGE_LABEL_FONT_SIZE = 11;
 // Collapsed-node accent bar
 const COLLAPSE_BAR_HEIGHT = 6;
 
-// Legend
-const LEGEND_HEIGHT = 28;
-const LEGEND_FIXED_GAP = 8;
-const LEGEND_PILL_PAD = 16;
-const LEGEND_PILL_FONT_SIZE = 11;
-const LEGEND_PILL_FONT_W = LEGEND_PILL_FONT_SIZE * 0.6;
-const LEGEND_CAPSULE_PAD = 4;
-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_GROUP_GAP = 12;
-const LEGEND_EYE_SIZE = 14;
-const LEGEND_EYE_GAP = 6;
+const LEGEND_FIXED_GAP = 8; // gap between fixed legend and scaled diagram — local, not shared
 
 // ============================================================
 // Color helpers
@@ -119,16 +122,17 @@ export function renderSitemap(
 
   const hasLegend = layout.legend.length > 0;
 
-  // In app mode (not export), render the title and legend at fixed size
-  // outside the scaled group so they stay legible on large sitemaps.
-  // Layout order: Title → Legend → Diagram content.
+  // In app mode (not export), render the title at fixed size outside the scaled group
+  // and legend at fixed size at the bottom.
+  // Layout order: Title → Diagram content → Legend (bottom).
   const layoutLegendShift = LEGEND_HEIGHT + LEGEND_GROUP_GAP; // 40px — what layout added
   const fixedLegend = !exportDims && hasLegend;
   const fixedTitle = fixedLegend && !!parsed.title;
   const fixedTitleH = fixedTitle ? TITLE_HEIGHT : 0;
   const legendReserveH = fixedLegend ? LEGEND_HEIGHT + LEGEND_FIXED_GAP : 0;
-  // Total fixed pixel space above the scaled content
-  const fixedReserve = fixedTitleH + legendReserveH;
+  // Space reserved above content (title only), and below content (legend)
+  const fixedReserveTop = fixedTitleH;
+  const fixedReserveBottom = legendReserveH;
   // Title inside scaled group only when legend is NOT fixed
   const titleOffset = !fixedTitle && parsed.title ? TITLE_HEIGHT : 0;
 
@@ -139,14 +143,14 @@ export function renderSitemap(
     // Remove the legend space from diagram height — legend is rendered separately
     diagramH -= layoutLegendShift;
   }
-  const availH = height - DIAGRAM_PADDING * 2 - fixedReserve;
+  const availH = height - DIAGRAM_PADDING * 2 - fixedReserveTop - fixedReserveBottom;
   const scaleX = (width - DIAGRAM_PADDING * 2) / diagramW;
   const scaleY = availH / diagramH;
   const scale = Math.min(MAX_SCALE, scaleX, scaleY);
 
   const scaledW = diagramW * scale;
   const offsetX = (width - scaledW) / 2;
-  const offsetY = DIAGRAM_PADDING + fixedReserve;
+  const offsetY = DIAGRAM_PADDING + fixedReserveTop;
 
   // Create SVG
   const svg = d3Selection
@@ -542,7 +546,10 @@ export function renderSitemap(
     const legendParent = svg
       .append('g')
       .attr('class', 'sitemap-legend-fixed')
-      .attr('transform', `translate(0, ${DIAGRAM_PADDING + fixedTitleH})`);
+      .attr('transform', `translate(0, ${height - DIAGRAM_PADDING - LEGEND_HEIGHT})`);
+    if (activeTagGroup) {
+      legendParent.attr('data-legend-active', activeTagGroup.toLowerCase());
+    }
     renderLegend(legendParent, layout.legend, palette, isDark, activeTagGroup, width, hiddenAttributes);
   }
 }
@@ -551,12 +558,6 @@ export function renderSitemap(
 // Legend rendering
 // ============================================================
 
-// Eye icon SVG paths (14×14 viewBox)
-const EYE_OPEN_PATH =
-  'M1 7s2.5-5 6-5 6 5 6 5-2.5 5-6 5-6-5-6-5z M7 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z';
-const EYE_CLOSED_PATH =
-  'M2.5 2.5l9 9 M1.5 7s2.2-4 5.5-4c1.2 0 2.2.5 3 1.1 M12.5 7s-2.2 4-5.5 4c-1.2 0-2.2-.5-3-1.1';
-
 function renderLegend(
   parent: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
   legendGroups: SitemapLegendGroup[],

package/src/utils/legend-constants.ts

@@ -0,0 +1,25 @@
+// ============================================================
+// Shared legend rendering constants
+// All renderers import from here to stay in sync.
+// ============================================================
+
+export const LEGEND_HEIGHT = 28;
+export const LEGEND_PILL_PAD = 16;
+export const LEGEND_PILL_FONT_SIZE = 11;
+export const LEGEND_PILL_FONT_W = LEGEND_PILL_FONT_SIZE * 0.6;
+export const LEGEND_CAPSULE_PAD = 4;
+export const LEGEND_DOT_R = 4;
+export const LEGEND_ENTRY_FONT_SIZE = 10;
+export const LEGEND_ENTRY_FONT_W = LEGEND_ENTRY_FONT_SIZE * 0.6;
+export const LEGEND_ENTRY_DOT_GAP = 4;
+export const LEGEND_ENTRY_TRAIL = 8;
+export const LEGEND_GROUP_GAP = 12;
+export const LEGEND_EYE_SIZE = 14;
+export const LEGEND_EYE_GAP = 6;
+
+// Eye icon SVG paths (14×14 viewBox)
+// Present only in org and sitemap legends (metadata visibility toggle)
+export const EYE_OPEN_PATH =
+  'M1 7s2.5-5 6-5 6 5 6 5-2.5 5-6 5-6-5-6-5z M7 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z';
+export const EYE_CLOSED_PATH =
+  'M2.5 2.5l9 9 M1.5 7s2.2-4 5.5-4c1.2 0 2.2.5 3 1.1 M12.5 7s-2.2 4-5.5 4c-1.2 0-2.2-.5-3-1.1';