@diagrammo/dgmo 0.2.20 → 0.2.22

package/src/org/layout.ts

@@ -52,10 +52,12 @@ export interface OrgContainerBounds {
 export interface OrgLegendEntry {
   value: string;
   color: string;
+  isDefault?: boolean;
 }
 
 export interface OrgLegendGroup {
   name: string;
+  alias?: string;
   entries: OrgLegendEntry[];
   x: number;
   y: number;
@@ -97,18 +99,17 @@ const CONTAINER_META_LINE_HEIGHT = 16;
 const STACK_V_GAP = 20;
 
 
-// Legend
+// Legend (kanban-style pills)
 const LEGEND_GAP = 30;
-const LEGEND_DOT_R = 5;
-const LEGEND_DOT_TEXT_GAP = 6;
-const LEGEND_ENTRY_GAP = 12;
-const LEGEND_PAD = 10;
-const LEGEND_HEADER_H = 20;
-const LEGEND_ENTRY_H = 18;
-const LEGEND_MAX_PER_ROW = 3;
-const LEGEND_V_GAP = 12;
-const EYE_ICON_WIDTH = 16;
-const EYE_ICON_GAP = 6;
+const LEGEND_HEIGHT = 28;
+const LEGEND_PILL_PAD = 16;
+const LEGEND_PILL_FONT_W = 11 * 0.6;
+const LEGEND_CAPSULE_PAD = 4;
+const LEGEND_DOT_R = 4;
+const LEGEND_ENTRY_FONT_W = 10 * 0.6;
+const LEGEND_ENTRY_DOT_GAP = 4;
+const LEGEND_ENTRY_TRAIL = 8;
+const LEGEND_GROUP_GAP = 12;
 
 // ============================================================
 // Helpers
@@ -271,49 +272,48 @@ function centerHeavyChildren(node: TreeNode): void {
 // Layout
 // ============================================================
 
-function computeLegendGroups(tagGroups: OrgTagGroup[], showEyeIcons: boolean): OrgLegendGroup[] {
+function computeLegendGroups(tagGroups: OrgTagGroup[], _showEyeIcons: boolean): OrgLegendGroup[] {
   const groups: OrgLegendGroup[] = [];
 
   for (const group of tagGroups) {
     if (group.entries.length === 0) continue;
 
-    const entryWidths = group.entries.map(
-      (e) =>
-        LEGEND_DOT_R * 2 + LEGEND_DOT_TEXT_GAP + e.value.length * CHAR_WIDTH
-    );
-
-    // Compute max width per column so columns align across rows
-    const numRows = Math.ceil(entryWidths.length / LEGEND_MAX_PER_ROW);
-    const colWidths: number[] = [];
-    for (let col = 0; col < LEGEND_MAX_PER_ROW; col++) {
-      let maxW = 0;
-      for (let row = 0; row < numRows; row++) {
-        const idx = row * LEGEND_MAX_PER_ROW + col;
-        if (idx < entryWidths.length && entryWidths[idx] > maxW) {
-          maxW = entryWidths[idx];
-        }
-      }
-      if (maxW > 0) colWidths.push(maxW);
+    // Pill label includes alias if present (e.g., "Rank (r)")
+    const pillLabel = group.alias ? `${group.name} (${group.alias})` : group.name;
+    const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+    // Minified pill shows just the group name (no alias)
+    const minPillWidth = group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+
+    // Capsule: pad + pill + gap + entries + pad
+    const isDefaultValue = group.defaultValue?.toLowerCase();
+    let entriesWidth = 0;
+    for (const entry of group.entries) {
+      const entryLabel = isDefaultValue === entry.value.toLowerCase()
+        ? `${entry.value} (default)`
+        : entry.value;
+      entriesWidth +=
+        LEGEND_DOT_R * 2 +
+        LEGEND_ENTRY_DOT_GAP +
+        entryLabel.length * LEGEND_ENTRY_FONT_W +
+        LEGEND_ENTRY_TRAIL;
     }
-
-    const eyeExtra = showEyeIcons ? EYE_ICON_GAP + EYE_ICON_WIDTH : 0;
-    const headerWidth = group.name.length * CHAR_WIDTH + eyeExtra;
-    const totalColumnsWidth =
-      colWidths.reduce((s, w) => s + w, 0) +
-      (colWidths.length - 1) * LEGEND_ENTRY_GAP;
-    const maxRowWidth = Math.max(headerWidth, totalColumnsWidth);
-
-    const minifiedWidth = group.name.length * CHAR_WIDTH + LEGEND_PAD * 2;
+    const capsuleWidth =
+      LEGEND_CAPSULE_PAD * 2 + pillWidth + 4 + entriesWidth;
 
     groups.push({
       name: group.name,
-      entries: group.entries.map((e) => ({ value: e.value, color: e.color })),
+      alias: group.alias,
+      entries: group.entries.map((e) => ({
+        value: e.value,
+        color: e.color,
+        isDefault: group.defaultValue?.toLowerCase() === e.value.toLowerCase() || undefined,
+      })),
       x: 0,
       y: 0,
-      width: maxRowWidth + LEGEND_PAD * 2,
-      height: LEGEND_HEADER_H + numRows * LEGEND_ENTRY_H + LEGEND_PAD,
-      minifiedWidth,
-      minifiedHeight: LEGEND_HEADER_H + LEGEND_PAD,
+      width: capsuleWidth,
+      height: LEGEND_HEIGHT,
+      minifiedWidth: minPillWidth,
+      minifiedHeight: LEGEND_HEIGHT,
     });
   }
 
@@ -356,7 +356,30 @@ export function layoutOrg(
   hiddenAttributes?: Set<string>
 ): OrgLayoutResult {
   if (parsed.roots.length === 0) {
-    return { nodes: [], edges: [], containers: [], legend: [], width: 0, height: 0 };
+    // Legend-only: compute and position legend groups even without nodes
+    const showEyeIcons = hiddenAttributes !== undefined;
+    const legendGroups = computeLegendGroups(parsed.tagGroups, showEyeIcons);
+    if (legendGroups.length === 0) {
+      return { nodes: [], edges: [], containers: [], legend: [], width: 0, height: 0 };
+    }
+
+    // Legend-only mode: stack groups vertically, all expanded
+    let cy = MARGIN;
+    let maxWidth = 0;
+    for (const g of legendGroups) {
+      g.x = MARGIN;
+      g.y = cy;
+      cy += LEGEND_HEIGHT + LEGEND_GROUP_GAP;
+      if (g.width > maxWidth) maxWidth = g.width;
+    }
+    return {
+      nodes: [],
+      edges: [],
+      containers: [],
+      legend: legendGroups,
+      width: maxWidth + MARGIN * 2,
+      height: cy - LEGEND_GROUP_GAP + MARGIN,
+    };
   }
 
   // Inject default tag group values into node metadata for display.
@@ -1084,7 +1107,7 @@ export function layoutOrg(
   let finalWidth = totalWidth;
   let finalHeight = totalHeight;
 
-  const legendPosition = parsed.options?.['legend-position'] ?? 'bottom';
+  const legendPosition = parsed.options?.['legend-position'] ?? 'top';
 
   // When a tag group is active, only that group is laid out (full size).
   // When none is active, all groups are laid out minified.
@@ -1101,7 +1124,7 @@ export function layoutOrg(
       // Bottom: center legend groups horizontally below diagram content
       const totalGroupsWidth =
         visibleGroups.reduce((s, g) => s + effectiveW(g), 0) +
-        (visibleGroups.length - 1) * H_GAP;
+        (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
       const neededWidth = totalGroupsWidth + MARGIN * 2;
 
       if (neededWidth > totalWidth) {
@@ -1119,36 +1142,39 @@ export function layoutOrg(
       const startX = (finalWidth - totalGroupsWidth) / 2;
 
       let cx = startX;
-      let maxH = 0;
       for (const g of visibleGroups) {
         g.x = cx;
         g.y = legendY;
-        cx += effectiveW(g) + H_GAP;
-        const h = effectiveH(g);
-        if (h > maxH) maxH = h;
+        cx += effectiveW(g) + LEGEND_GROUP_GAP;
       }
 
-      finalHeight = totalHeight + LEGEND_GAP + maxH;
+      finalHeight = totalHeight + LEGEND_GAP + LEGEND_HEIGHT;
     } else {
-      // Top (default): stack legend groups vertically at top-right
-      const maxLegendWidth = Math.max(...visibleGroups.map((g) => effectiveW(g)));
-      const legendStartX = totalWidth - MARGIN + LEGEND_GAP;
-      let legendY = MARGIN;
-
-      for (const g of visibleGroups) {
-        g.x = legendStartX;
-        g.y = legendY;
-        legendY += effectiveH(g) + LEGEND_V_GAP;
+      // Top: horizontal row above chart content, left-aligned
+      const legendShift = LEGEND_HEIGHT + LEGEND_GROUP_GAP;
+
+      // Push all chart content down
+      for (const n of layoutNodes) n.y += legendShift;
+      for (const c of containers) c.y += legendShift;
+      for (const e of layoutEdges) {
+        for (const p of e.points) p.y += legendShift;
       }
 
-      const legendRight = legendStartX + maxLegendWidth + MARGIN;
-      if (legendRight > finalWidth) {
-        finalWidth = legendRight;
+      const totalGroupsWidth =
+        visibleGroups.reduce((s, g) => s + effectiveW(g), 0) +
+        (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
+
+      let cx = MARGIN;
+      for (const g of visibleGroups) {
+        g.x = cx;
+        g.y = MARGIN;
+        cx += effectiveW(g) + LEGEND_GROUP_GAP;
       }
 
-      const legendBottom = legendY - LEGEND_V_GAP + MARGIN;
-      if (legendBottom > finalHeight) {
-        finalHeight = legendBottom;
+      finalHeight += legendShift;
+      const neededWidth = totalGroupsWidth + MARGIN * 2;
+      if (neededWidth > finalWidth) {
+        finalWidth = neededWidth;
       }
     }
   }

package/src/org/parser.ts

@@ -79,6 +79,20 @@ const CHART_TYPE_RE = /^chart\s*:\s*(.+)/i;
 const TITLE_RE = /^title\s*:\s*(.+)/i;
 const OPTION_RE = /^([a-z][a-z0-9-]*)\s*:\s*(.+)$/i;
 
+// ============================================================
+// Inference
+// ============================================================
+
+/** Returns true if content contains tag group headings (`## ...`), suggesting an org chart. */
+export function looksLikeOrg(content: string): boolean {
+  for (const line of content.split('\n')) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith('//')) continue;
+    if (GROUP_HEADING_RE.test(trimmed)) return true;
+  }
+  return false;
+}
+
 // ============================================================
 // Parser
 // ============================================================
@@ -301,7 +315,7 @@ export function parseOrg(
     }
   }
 
-  if (result.roots.length === 0 && !result.error) {
+  if (result.roots.length === 0 && result.tagGroups.length === 0 && !result.error) {
     const diag = makeDgmoError(1, 'No nodes found in org chart');
     result.diagnostics.push(diag);
     result.error = formatDgmoError(diag);

package/src/org/renderer.ts

@@ -36,29 +36,17 @@ const CONTAINER_HEADER_HEIGHT = 28;
 const COLLAPSE_BAR_HEIGHT = 6;
 const COLLAPSE_BAR_INSET = 0;
 
-// Legend
-const LEGEND_RADIUS = 6;
-const LEGEND_DOT_R = 5;
-const LEGEND_DOT_TEXT_GAP = 6;
-const LEGEND_ENTRY_GAP = 12;
-const LEGEND_PAD = 10;
-const LEGEND_HEADER_H = 20;
-const LEGEND_ENTRY_H = 18;
-const LEGEND_FONT_SIZE = 11;
-const LEGEND_MAX_PER_ROW = 3;
-const LEGEND_CHAR_WIDTH = 7.5;
-
-// Eye icon (12×12 viewBox, scaled from 0,0 to 12,12)
-const EYE_ICON_SIZE = 12;
-const EYE_ICON_GAP = 6;
-// Open eye: elliptical outline + circle pupil
-const EYE_OPEN_PATH =
-  'M1 6C1 6 3 2 6 2C9 2 11 6 11 6C11 6 9 10 6 10C3 10 1 6 1 6Z';
-const EYE_PUPIL_CX = 6;
-const EYE_PUPIL_CY = 6;
-const EYE_PUPIL_R = 1.8;
-// Closed eye: same outline + diagonal slash
-const EYE_SLASH_PATH = 'M2 2L10 10';
+// 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;
 
 // ============================================================
 // Color helpers (inline to avoid cross-module import issues)
@@ -457,170 +445,109 @@ export function renderOrg(
 
   }
 
-  // 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) {
+  // Render legend — kanban-style pills.
+  // Skip in export mode (unless legend-only chart).
+  // Legend-only (no nodes): all groups rendered as expanded capsules.
+  // Active group: only that group rendered as capsule (pill + entries).
+  // No active group: all groups rendered as standalone pills.
+  const legendOnly = layout.nodes.length === 0;
+  if (!exportDims || legendOnly) for (const group of layout.legend) {
     const isActive =
-      activeTagGroup != null &&
-      group.name.toLowerCase() === activeTagGroup.toLowerCase();
+      legendOnly ||
+      (activeTagGroup != null &&
+        group.name.toLowerCase() === activeTagGroup.toLowerCase());
 
-    // When a group is active, skip all other groups entirely
-    if (activeTagGroup != null && !isActive) continue;
+    // When a group is active, skip all other groups entirely (not in legend-only mode)
+    if (!legendOnly && activeTagGroup != null && !isActive) continue;
 
-    // No active group → minified; active group → full
-    const isMinified = activeTagGroup == null;
+    const groupBg = isDark
+      ? mix(palette.surface, palette.bg, 50)
+      : mix(palette.surface, palette.bg, 30);
 
-    const renderW = isMinified ? group.minifiedWidth : group.width;
-    const renderH = isMinified ? group.minifiedHeight : group.height;
+    // Pill label: include alias when expanded (e.g., "Rank (r)")
+    const pillLabel = isActive && group.alias ? `${group.name} (${group.alias})` : 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', 'org-legend-group')
       .attr('data-legend-group', group.name.toLowerCase())
-      .style('cursor', 'pointer');
+      .style('cursor', legendOnly ? 'default' : 'pointer');
 
-    // Background rect
-    const legendFill = mix(palette.surface, palette.bg, 40);
-    const bgRect = gEl
-      .append('rect')
-      .attr('x', 0)
-      .attr('y', 0)
-      .attr('width', renderW)
-      .attr('height', renderH)
-      .attr('rx', LEGEND_RADIUS)
-      .attr('fill', legendFill);
+    // Outer capsule background (active only)
+    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);
+
+    // Pill background
+    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);
+
+    // Active pill border
     if (isActive) {
-      bgRect
-        .attr('stroke', palette.primary)
-        .attr('stroke-opacity', 0.8)
-        .attr('stroke-width', 2);
-    } else {
-      bgRect
-        .attr('stroke', palette.textMuted)
-        .attr('stroke-opacity', 0.35)
-        .attr('stroke-width', NODE_STROKE_WIDTH);
+      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);
     }
 
-    // Group name header
+    // Pill text
     gEl
       .append('text')
-      .attr('x', LEGEND_PAD)
-      .attr('y', LEGEND_HEADER_H / 2 + LEGEND_FONT_SIZE / 2 - 2)
-      .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();
-      const isHidden = hiddenAttributes.has(groupKey);
-      const eyeX =
-        LEGEND_PAD + group.name.length * LEGEND_CHAR_WIDTH + EYE_ICON_GAP;
-      const eyeY = (LEGEND_HEADER_H - EYE_ICON_SIZE) / 2;
-
-      const eyeG = gEl
-        .append('g')
-        .attr('class', 'org-legend-eye')
-        .attr('data-legend-visibility', groupKey)
-        .attr('transform', `translate(${eyeX}, ${eyeY})`);
-
-      // Transparent hit area
-      eyeG
-        .append('rect')
-        .attr('x', -4)
-        .attr('y', -4)
-        .attr('width', EYE_ICON_SIZE + 8)
-        .attr('height', EYE_ICON_SIZE + 8)
-        .attr('fill', 'transparent');
-
-      // Eye outline
-      eyeG
-        .append('path')
-        .attr('d', EYE_OPEN_PATH)
-        .attr('fill', isHidden ? 'none' : palette.textMuted)
-        .attr('fill-opacity', isHidden ? 0 : 0.15)
-        .attr('stroke', palette.textMuted)
-        .attr('stroke-width', 1.2)
-        .attr('opacity', isHidden ? 0.5 : 0.7);
-
-      if (!isHidden) {
-        // Pupil (only when visible)
-        eyeG
+      .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);
+
+    // Entries inside capsule (active only)
+    if (isActive) {
+      let entryX = pillX + pillWidth + 4;
+      for (const entry of group.entries) {
+        gEl
           .append('circle')
-          .attr('cx', EYE_PUPIL_CX)
-          .attr('cy', EYE_PUPIL_CY)
-          .attr('r', EYE_PUPIL_R)
+          .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;
+        const entryLabel = entry.isDefault ? `${entry.value} (default)` : entry.value;
+        gEl
+          .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)
-          .attr('opacity', 0.7);
-      } else {
-        // Slash through the eye (hidden state)
-        eyeG
-          .append('line')
-          .attr('x1', 2)
-          .attr('y1', 2)
-          .attr('x2', 10)
-          .attr('y2', 10)
-          .attr('stroke', palette.textMuted)
-          .attr('stroke-width', 1.5)
-          .attr('opacity', 0.5);
-      }
-    }
+          .text(entryLabel);
 
-    // Pre-compute column widths so dots align across rows
-    const entryWidths = group.entries.map(
-      (e) =>
-        LEGEND_DOT_R * 2 + LEGEND_DOT_TEXT_GAP + e.value.length * LEGEND_CHAR_WIDTH
-    );
-    const numRows = Math.ceil(group.entries.length / LEGEND_MAX_PER_ROW);
-    const colWidths: number[] = [];
-    for (let col = 0; col < LEGEND_MAX_PER_ROW; col++) {
-      let maxW = 0;
-      for (let r = 0; r < numRows; r++) {
-        const idx = r * LEGEND_MAX_PER_ROW + col;
-        if (idx < entryWidths.length && entryWidths[idx] > maxW) {
-          maxW = entryWidths[idx];
-        }
+        entryX = textX + entryLabel.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
       }
-      if (maxW > 0) colWidths.push(maxW);
-    }
-    const colX: number[] = [LEGEND_PAD];
-    for (let c = 1; c < colWidths.length; c++) {
-      colX.push(colX[c - 1] + colWidths[c - 1] + LEGEND_ENTRY_GAP);
-    }
-
-    // Entries: colored dot + value label
-    for (let i = 0; i < group.entries.length; i++) {
-      const entry = group.entries[i];
-      const row = Math.floor(i / LEGEND_MAX_PER_ROW);
-      const col = i % LEGEND_MAX_PER_ROW;
-      const entryX = colX[col];
-
-      const entryY =
-        LEGEND_HEADER_H + row * LEGEND_ENTRY_H + LEGEND_ENTRY_H / 2;
-
-      // Colored dot
-      gEl
-        .append('circle')
-        .attr('cx', entryX + LEGEND_DOT_R)
-        .attr('cy', entryY)
-        .attr('r', LEGEND_DOT_R)
-        .attr('fill', entry.color);
-
-      // Value label
-      gEl
-        .append('text')
-        .attr('x', entryX + LEGEND_DOT_R * 2 + LEGEND_DOT_TEXT_GAP)
-        .attr('y', entryY + LEGEND_FONT_SIZE / 2 - 2)
-        .attr('fill', palette.text)
-        .attr('font-size', LEGEND_FONT_SIZE)
-        .text(entry.value);
     }
   }
 }
@@ -635,7 +562,7 @@ export function renderOrgForExport(
   palette: PaletteColors
 ): string {
   const parsed = parseOrg(content, palette);
-  if (parsed.error || parsed.roots.length === 0) return '';
+  if (parsed.error) return '';
 
   // Extract hide option for export: cards sized without hidden attributes
   const hideOption = parsed.options?.['hide'];

package/src/sequence/renderer.ts

@@ -911,11 +911,13 @@ export function renderSequenceDiagram(
     msgToLastStep.set(step.messageIndex, si);
   });
 
-  // Map a note to the first render-step index of its preceding message
-  // (the forward/call arrow, not the return arrow).
+  // Map a note to the last render-step index of its preceding message
+  // (the return arrow if present, otherwise the call arrow).
+  // This ensures notes are positioned below the return arrow so they
+  // don't overlap it.
   // If the note's closest preceding message is hidden (collapsed section), return -1
   // so the note is hidden along with its section.
-  const findAssociatedFirstStep = (note: SequenceNote): number => {
+  const findAssociatedLastStep = (note: SequenceNote): number => {
     // First find the closest preceding message (ignoring hidden filter)
     let closestMsgIndex = -1;
     let closestLine = -1;
@@ -933,7 +935,7 @@ export function renderSequenceDiagram(
       return -1;
     }
     if (closestMsgIndex < 0) return -1;
-    return msgToFirstStep.get(closestMsgIndex) ?? -1;
+    return msgToLastStep.get(closestMsgIndex) ?? -1;
   };
 
   // Find the first visible message index in an element subtree
@@ -1259,7 +1261,7 @@ export function renderSequenceDiagram(
       for (let i = 0; i < els.length; i++) {
         const el = els[i];
         if (isSequenceNote(el)) {
-          const si = findAssociatedFirstStep(el);
+          const si = findAssociatedLastStep(el);
           if (si < 0) continue;
           // Check if there's a preceding note that we should stack below
           const prevNote = i > 0 && isSequenceNote(els[i - 1]) ? (els[i - 1] as SequenceNote) : null;