@zombie-mermaid/ascii-renderer 2.2.1

package/src/__tests__/ascii-class-padding.test.ts

@@ -0,0 +1,104 @@
+// ============================================================================
+// ASCII class diagram padding tests (issue #343)
+//
+// `-x`/`-y`/`-p` (AsciiRenderOptions.paddingX/paddingY/boxBorderPadding)
+// previously only affected the flowchart/state grid layout — class diagrams
+// ignored them entirely (hGap/vGap were fixed constants, and drawMultiBox
+// was always called with its implicit default padding). This file verifies
+// the fix, and that a render with no explicit padding option still renders
+// byte-for-byte identical to before the fix (see the DEFAULT_PADDING_*
+// comment in src/ascii/types.ts for why that matters).
+// ============================================================================
+
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+
+// Two independent, same-level classes — exercises the horizontal gap.
+const SIDE_BY_SIDE = `classDiagram
+  class Foo
+  class Bar`
+
+// A parent/child pair — exercises the vertical gap between levels.
+const STACKED = `classDiagram
+  class Animal
+  class Dog
+  Animal <|-- Dog`
+
+function colOf(ascii: string, lineIndex: number, needle: string): number {
+  const line = ascii.split('\n')[lineIndex]
+  if (line === undefined) throw new Error(`no line ${lineIndex}`)
+  const idx = line.indexOf(needle)
+  if (idx === -1) throw new Error(`"${needle}" not found on line ${lineIndex}`)
+  return idx
+}
+
+function lineCount(ascii: string): number {
+  return ascii.split('\n').filter((l) => l.length > 0).length
+}
+
+function borderWidth(ascii: string, lineIndex: number): number {
+  const line = ascii.split('\n')[lineIndex]
+  const match = line ? /\+-+\+/.exec(line) : null
+  if (!match) throw new Error(`no border run on line ${lineIndex}: ${line}`)
+  return match[0].length
+}
+
+describe('ASCII class diagrams — padding (issue #343)', () => {
+  it('renders identically with no padding options and with explicit defaults', () => {
+    const withoutOptions = renderMermaidASCII(SIDE_BY_SIDE, {
+      useAscii: true,
+    })
+    const withDefaults = renderMermaidASCII(SIDE_BY_SIDE, {
+      useAscii: true,
+      paddingX: 5,
+      paddingY: 5,
+      boxBorderPadding: 1,
+    })
+    expect(withDefaults).toBe(withoutOptions)
+  })
+
+  it('paddingX widens the gap between same-level class boxes', () => {
+    const base = renderMermaidASCII(SIDE_BY_SIDE, { useAscii: true })
+    const wide = renderMermaidASCII(SIDE_BY_SIDE, {
+      useAscii: true,
+      paddingX: 25,
+    })
+    const baseCol = colOf(base, 1, '| Bar |')
+    const wideCol = colOf(wide, 1, '| Bar |')
+    expect(wideCol).toBeGreaterThan(baseCol)
+    const mid = renderMermaidASCII(SIDE_BY_SIDE, {
+      useAscii: true,
+      paddingX: 15,
+    })
+    const midCol = colOf(mid, 1, '| Bar |')
+    expect(midCol - baseCol).toBe(wideCol - midCol)
+  })
+
+  it('a very small paddingX tightens the gap below the default', () => {
+    const base = renderMermaidASCII(SIDE_BY_SIDE, { useAscii: true })
+    const tight = renderMermaidASCII(SIDE_BY_SIDE, {
+      useAscii: true,
+      paddingX: -10,
+    })
+    expect(colOf(tight, 1, '| Bar |')).toBeLessThan(colOf(base, 1, '| Bar |'))
+  })
+
+  it('paddingY widens the vertical gap between inheritance levels', () => {
+    const base = renderMermaidASCII(STACKED, { useAscii: true })
+    const tall = renderMermaidASCII(STACKED, { useAscii: true, paddingY: 25 })
+    expect(lineCount(tall)).toBeGreaterThan(lineCount(base))
+    const mid = renderMermaidASCII(STACKED, { useAscii: true, paddingY: 15 })
+    expect(lineCount(mid) - lineCount(base)).toBe(
+      lineCount(tall) - lineCount(mid),
+    )
+  })
+
+  it('boxBorderPadding widens class boxes by exactly 2 columns per unit', () => {
+    const base = renderMermaidASCII(SIDE_BY_SIDE, { useAscii: true })
+    const padded = renderMermaidASCII(SIDE_BY_SIDE, {
+      useAscii: true,
+      boxBorderPadding: 4,
+    })
+    expect(borderWidth(padded, 0) - borderWidth(base, 0)).toBe(6)
+  })
+})

package/src/__tests__/ascii-class-parent-alignment-971.test.ts

@@ -0,0 +1,139 @@
+/**
+ * Regression tests for issue #971 — "ASCII class-diagram layout: single-
+ * parent x-alignment," the first implementation stage of #964's fix
+ * (docs/decisions/ascii-class-diagram-x-coordinate-assignment-970.md).
+ *
+ * Before this fix, `class-diagram.ts` packed each level's classes strictly
+ * left-to-right in declaration order, with no reference to any parent's
+ * column — a level with exactly one occupant always landed at column 0,
+ * even when its real parent sat far to the right. This fix aligns a
+ * "singleton block" (no sibling at its level shares its exact parent-id
+ * set) with exactly one qualifying (strictly-shallower) parent under that
+ * parent's own box center instead. Every other shape (no parents, an
+ * all-same-level/rootless-cycle parent set, or more than one class sharing
+ * a parent set) is out of scope here — it keeps its pre-fix left-to-right
+ * position, tracked separately by issue #972.
+ */
+
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+import { findBoxRect } from './helpers/ascii-form.ts'
+
+describe('ASCII class diagram — single-parent x-alignment (issue #971)', () => {
+  it("#964's exact repro: a lone child aligns under its real parent's center, not the leftmost column", () => {
+    const src = `classDiagram
+  class Left
+  class TallMid {
+    +String b0
+    +String b1
+    +String b2
+    +String b3
+    +String b4
+    +String b5
+  }
+  class RightSrc
+  class Kid
+  RightSrc --> Kid`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+
+    const rightSrc = findBoxRect(ascii, 'RightSrc')
+    const kid = findBoxRect(ascii, 'Kid')
+    const rightSrcCenter =
+      rightSrc.x0 + Math.floor((rightSrc.x1 - rightSrc.x0) / 2)
+    const kidCenter = kid.x0 + Math.floor((kid.x1 - kid.x0) / 2)
+
+    // Kid's box center lands on (or within 1 cell of, for odd-width
+    // rounding) RightSrc's box center -- not at column 0, where every
+    // sole-occupant level used to land regardless of its real parent.
+    expect(Math.abs(kidCenter - rightSrcCenter)).toBeLessThanOrEqual(1)
+    expect(kid.x0).toBeGreaterThan(0)
+
+    // Left is the leftmost root and must stay exactly where declaration
+    // order has always put it -- this fix only ever moves a class that has
+    // a real single parent to align to.
+    const left = findBoxRect(ascii, 'Left')
+    expect(left.x0).toBe(0)
+  })
+
+  it('a root class with no parent at all is unaffected', () => {
+    const src = `classDiagram
+  class Lonely`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const lonely = findBoxRect(ascii, 'Lonely')
+    expect(lonely.x0).toBe(0)
+  })
+
+  it('a class whose only parent edges are same-level (a rootless relationship cycle) is unaffected', () => {
+    // A -> B -> C -> A has no external root: the level-BFS puts every
+    // member at level 0 together, but the `parents` map still records
+    // each one's in-cycle predecessor. That predecessor is same-level, not
+    // strictly shallower, so it doesn't qualify -- every member keeps its
+    // plain declaration-order position, same as before this fix.
+    const src = `classDiagram
+  class A
+  class B
+  class C
+  A --> B
+  B --> C
+  C --> A`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const a = findBoxRect(ascii, 'A')
+    const b = findBoxRect(ascii, 'B')
+    const c = findBoxRect(ascii, 'C')
+    expect(a.x0).toBe(0)
+    expect(a.x0).toBeLessThan(b.x0)
+    expect(b.x0).toBeLessThan(c.x0)
+  })
+
+  // Two children sharing the exact same single parent are a *multi-member*
+  // block -- explicitly out of #971's scope (see #972) -- so this sample
+  // must render byte-for-byte the way it always has. Chosen because
+  // docs/decisions/ascii-class-diagram-x-coordinate-assignment-970.md
+  // names this exact samples-data.ts sample ("Class: Inheritance (<|--)")
+  // as one it verified stays unchanged.
+  it('an existing catalog sample with a multi-child parent (Class: Inheritance) keeps its exact current positions', () => {
+    const src = `classDiagram
+  class Animal {
+    +String name
+    +eat() void
+  }
+  class Dog {
+    +String breed
+    +bark() void
+  }
+  class Cat {
+    +bool isIndoor
+    +meow() void
+  }
+  Animal <|-- Dog
+  Animal <|-- Cat`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const animal = findBoxRect(ascii, 'Animal')
+    const dog = findBoxRect(ascii, 'Dog')
+    const cat = findBoxRect(ascii, 'Cat')
+    expect(animal).toEqual({ x0: 0, x1: 17, y0: 0, y1: 6 })
+    expect(dog).toEqual({ x0: 0, x1: 18, y0: 10, y1: 16 })
+    expect(cat).toEqual({ x0: 23, x1: 42, y0: 10, y1: 16 })
+  })
+
+  it('two independent single-parent children at the same level both align, and compaction keeps them from overlapping', () => {
+    // ParentA and ParentB are both roots; KidA is ParentA's only child,
+    // KidB is ParentB's only child. Each is its own singleton block with
+    // exactly one qualifying parent, so both get a real desired center --
+    // this exercises the compaction pass itself (#971 must implement it
+    // for every block shape, not just multi-parent ones): two different
+    // singleton blocks can still want colliding desired positions.
+    const src = `classDiagram
+  class ParentA
+  class ParentB
+  class KidA
+  class KidB
+  ParentA --> KidA
+  ParentB --> KidB`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const kidA = findBoxRect(ascii, 'KidA')
+    const kidB = findBoxRect(ascii, 'KidB')
+    // Declaration order is preserved -- KidA never lands right of KidB.
+    expect(kidA.x1).toBeLessThan(kidB.x0)
+  })
+})

package/src/__tests__/ascii-class-parent-alignment-972.test.ts

@@ -0,0 +1,208 @@
+/**
+ * Regression tests for issue #972 — "ASCII class-diagram layout:
+ * multi-parent / overlap resolution," the second implementation stage of
+ * #964's fix (docs/decisions/ascii-class-diagram-x-coordinate-assignment-970.md),
+ * building on #971's single-parent alignment + universal compaction pass.
+ *
+ * #971 only computed a real desired position for a *singleton* block (no
+ * sibling at its level shares its exact parent-id set) with exactly one
+ * qualifying (strictly-shallower) parent. This fix adds the remaining
+ * block shapes #970's decision named: a block of more than one class
+ * sharing one qualifying-parent-set spreads evenly around that shared
+ * center; a block with more than one qualifying parent centers on the
+ * mean of their centers. Both reuse #971's exact compaction pass
+ * unchanged, which already handles "an aligned position collides with a
+ * sibling" — #972 does not add new nudging logic, only new
+ * desired-position computations for `if (qualifying.length === 0)` this
+ * pass now escapes into.
+ */
+
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+import { findBoxRect, rectsOverlap } from './helpers/ascii-form.ts'
+
+function boxCenter(rect: { x0: number; x1: number }): number {
+  return rect.x0 + Math.floor((rect.x1 - rect.x0 + 1) / 2)
+}
+
+describe('ASCII class diagram — multi-parent / overlap resolution (issue #972)', () => {
+  it('two children of the same parent spread evenly around its center, not packed from column 0', () => {
+    // WidePadding gives Animal real room on both sides -- proves genuine
+    // symmetric spreading, not just an edge-of-canvas clamp coincidence.
+    const src = `classDiagram
+  class WidePadding {
+    +String p0
+    +String p1
+    +String p2
+  }
+  class Animal
+  class Dog
+  class Cat
+  Animal <|-- Dog
+  Animal <|-- Cat`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const animal = findBoxRect(ascii, 'Animal')
+    const dog = findBoxRect(ascii, 'Dog')
+    const cat = findBoxRect(ascii, 'Cat')
+
+    // Declaration order preserved: Dog left of Cat, neither overlapping.
+    expect(dog.x1).toBeLessThan(cat.x0)
+    // The pair's combined footprint centers on Animal's own center.
+    const blockCenter = dog.x0 + Math.floor((cat.x1 - dog.x0 + 1) / 2)
+    expect(Math.abs(blockCenter - boxCenter(animal))).toBeLessThanOrEqual(1)
+    // Neither child sits at column 0 (the pre-#972 leftover artifact).
+    expect(dog.x0).toBeGreaterThan(0)
+  })
+
+  it('a child with two parents at different levels centers on the mean of their centers', () => {
+    // Controller (level 0) -> Model (level 1) -> View (level 2); View also
+    // has a direct edge from Controller. View's qualifying parents are
+    // both Controller and Model (both strictly shallower than View), so
+    // its desired center is their mean -- not just Controller's alone.
+    const src = `classDiagram
+  class Controller {
+    +handleInput() void
+  }
+  class Model {
+    +getData() void
+  }
+  class View {
+    +render() void
+  }
+  Controller --> Model
+  Controller --> View
+  Model ..> View`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const controller = findBoxRect(ascii, 'Controller')
+    const model = findBoxRect(ascii, 'Model')
+    const view = findBoxRect(ascii, 'View')
+
+    const expectedCenter = Math.round(
+      (boxCenter(controller) + boxCenter(model)) / 2,
+    )
+    expect(Math.abs(boxCenter(view) - expectedCenter)).toBeLessThanOrEqual(1)
+    // Not simply parked back at column 0 the way an unresolved block used to be.
+    expect(view.x0).toBeGreaterThan(0)
+  })
+
+  it('a multi-child block whose desired position collides with an earlier sibling is pushed right without overlapping it', () => {
+    // Two parents both near the canvas's left edge: EarlyParent's own
+    // child (EarlySibling) is placed first; WidePair's two children want
+    // to center on WidePair, which sits close enough that their desired
+    // block would otherwise land on top of EarlySibling. The universal
+    // compaction pass (#971, reused unchanged by #972) must push the
+    // whole block right of EarlySibling instead of overlapping it.
+    const src = `classDiagram
+  class EarlyParent
+  class WidePair
+  class EarlySibling
+  class ChildA
+  class ChildB
+  EarlyParent --> EarlySibling
+  WidePair --> ChildA
+  WidePair --> ChildB`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const names = [
+      'EarlyParent',
+      'WidePair',
+      'EarlySibling',
+      'ChildA',
+      'ChildB',
+    ]
+    const rects = names.map((n) => ({ n, r: findBoxRect(ascii, n) }))
+    for (let i = 0; i < rects.length; i++) {
+      for (let j = i + 1; j < rects.length; j++) {
+        expect(
+          rectsOverlap(rects[i]!.r, rects[j]!.r),
+          `${rects[i]!.n} and ${rects[j]!.n} boxes overlap`,
+        ).toBe(false)
+      }
+    }
+    // Declaration order preserved even after compaction pushes the block right.
+    const earlySibling = findBoxRect(ascii, 'EarlySibling')
+    const childA = findBoxRect(ascii, 'ChildA')
+    expect(earlySibling.x1).toBeLessThan(childA.x0)
+  })
+
+  it('a block with no qualifying parents (a rootless cycle with two same-level "parent" edges) keeps its plain baseline position', () => {
+    // A and B mutually reference each other with no external root: both
+    // land at level 0, and neither's same-level "parent" edge qualifies --
+    // #972 must not spread or converge this shape, only #971's untouched
+    // no-resolvable-parents fallback applies.
+    const src = `classDiagram
+  class A
+  class B
+  A --> B
+  B --> A`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const a = findBoxRect(ascii, 'A')
+    const b = findBoxRect(ascii, 'B')
+    expect(a.x0).toBe(0)
+    expect(a.x1).toBeLessThan(b.x0)
+  })
+
+  // Regression for a CodeRabbit finding on #972's own PR (thread
+  // PRRT_kwDOT5ndxc6hpu-C): two classes with no resolvable parents but the
+  // exact same (non-qualifying) parent-id set used to be merged into one
+  // joint placement unit the moment the *first* of them was reached in
+  // declaration order -- silently pulling an unrelated class declared
+  // *between* them ahead of its own position, since it hadn't been placed
+  // yet when the merged pair's combined placement consumed the columns it
+  // would have occupied.
+  it('an unrelated class declared between two same-parent-set siblings with no qualifying parent keeps its own declaration-order position', () => {
+    // Q and R share the exact same parent-id set ({P}), but P is at the
+    // same level as Q/R (a 3-way mutual-reference cycle), so neither
+    // qualifies -- both are "no resolvable parents" blocks on their own.
+    // Interloper is a plain, unrelated root declared between Q and R.
+    const src = `classDiagram
+  class P
+  class Q
+  class Interloper
+  class R
+  P --> Q
+  P --> R
+  Q --> P
+  R --> P`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const q = findBoxRect(ascii, 'Q')
+    const interloper = findBoxRect(ascii, 'Interloper')
+    const r = findBoxRect(ascii, 'R')
+    // Declared order Q, Interloper, R must survive as rendered left-to-right order.
+    expect(q.x1).toBeLessThan(interloper.x0)
+    expect(interloper.x1).toBeLessThan(r.x0)
+  })
+
+  // Regression for a CodeRabbit finding on #972's own PR (thread
+  // PRRT_kwDOT5ndxc6hpu-M): a multi-member block's desired left edge used
+  // to be derived from centering the *padded slot* span (every member's
+  // own reach padding, including the outermost edges with no neighbor to
+  // separate from) on the shared parent center, rather than the *visible
+  // box* span -- so a block whose first member has real reach padding
+  // (e.g. its own outgoing relationship carries a long label) and whose
+  // last member has none rendered visibly off-center from the parent it
+  // was supposed to align under.
+  it('a multi-child block with asymmetric reach padding on one child still visually centers on the shared parent', () => {
+    const src = `classDiagram
+  class Padding {
+    +String p0
+    +String p1
+    +String p2
+    +String p3
+  }
+  class Animal
+  class Dog
+  class Cat
+  class SomewhereElse
+  Animal <|-- Dog
+  Animal <|-- Cat
+  Dog --> SomewhereElse : a moderately long label`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const animal = findBoxRect(ascii, 'Animal')
+    const dog = findBoxRect(ascii, 'Dog')
+    const cat = findBoxRect(ascii, 'Cat')
+    const visibleBlockCenter = dog.x0 + Math.floor((cat.x1 - dog.x0 + 1) / 2)
+    expect(
+      Math.abs(visibleBlockCenter - boxCenter(animal)),
+    ).toBeLessThanOrEqual(1)
+  })
+})

package/src/__tests__/ascii-class-reciprocal-relationships-448.test.ts

@@ -0,0 +1,169 @@
+/**
+ * Regression test for #448 — "Class: MVC Architecture sample drops the
+ * `View --> Model : reads` edge."
+ *
+ * Root cause: `renderClassAscii` connected every relationship's line/arrow/
+ * label to its source and target boxes at a fixed box-center column, with
+ * no awareness of other relationships. When two relationships connect the
+ * same pair of classes in opposite directions (`View --> Model : reads`
+ * alongside `Model ..> View : notifies`), both computed the identical
+ * center column, so the later-drawn one silently overwrote the earlier
+ * one's line, arrowhead, and label.
+ *
+ * The fix groups relationships by unordered class-pair and gives each
+ * member of a multi-relationship group its own connection column. This
+ * test exercises that grouping/column-offset logic directly — no prior
+ * test in this repo did (verification for #448 was ad hoc/visual only via
+ * a real-terminal capture, never committed as a vitest case), which is
+ * exactly why this code path had gone completely uncovered.
+ *
+ * Uses the same source as the "Class: MVC Architecture" sample
+ * (samples-data.ts) that the original issue was reported against — a
+ * narrower repro with only short single-word labels and no other class
+ * members hits an unrelated, tighter label/border collision (also
+ * present, separately, in the pre-#448 code and out of scope here), so
+ * this keeps the box widths the real sample has.
+ */
+
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+
+const MVC_SOURCE = `classDiagram
+  class Model {
+    -data Map
+    +getData() Map
+    +setData(key, val) void
+    +notify() void
+  }
+  class View {
+    -model Model
+    +render() void
+    +update() void
+  }
+  class Controller {
+    -model Model
+    -view View
+    +handleInput(event) void
+    +updateModel(data) void
+  }
+  Controller --> Model : updates
+  Controller --> View : refreshes
+  View --> Model : reads
+  Model ..> View : notifies`
+
+describe('ASCII class diagram — reciprocal relationships (issue #448)', () => {
+  it('renders all four relationships, including both directions of the Model/View reciprocal pair', () => {
+    const ascii = renderMermaidASCII(MVC_SOURCE, { colorMode: 'none' })
+
+    for (const label of ['updates', 'refreshes', 'reads', 'notifies']) {
+      expect(ascii).toContain(label)
+    }
+  })
+
+  it('gives the reciprocal pair distinct connection columns instead of one overwriting the other', () => {
+    const ascii = renderMermaidASCII(MVC_SOURCE, { colorMode: 'none' })
+    const lines = ascii.split('\n')
+
+    const readsCol = lines.find((l) => l.includes('reads'))!.indexOf('reads')
+    const notifiesCol = lines
+      .find((l) => l.includes('notifies'))!
+      .indexOf('notifies')
+    expect(readsCol).not.toBe(notifiesCol)
+  })
+
+  it('leaves a single (non-reciprocal) relationship at the plain center column', () => {
+    const ascii = renderMermaidASCII(
+      `classDiagram
+  class A
+  class B
+  A --> B : uses`,
+      { colorMode: 'none' },
+    )
+    expect(ascii).toContain('uses')
+  })
+})
+
+/**
+ * Regression test for issue #632 — a weekly form-judge audit comparing this
+ * repo's ASCII output against real mermaid.js SVG flagged the "Class:
+ * Relationship Labels" sample (samples-data.ts): `Teacher --> Course` and
+ * `Student --> Course` are two *distinct* pairs (not a reciprocal pair
+ * between the same two classes, which #448 above already covers) that both
+ * terminate at the same target, `Course`.
+ *
+ * Root cause: `pairGroups` (the #448 fix, keyed by the unordered
+ * `[from, to]` pair) only fans relationships between the exact same two
+ * classes — it never grouped these, so both anchored at Course's identical
+ * center column, collapsing their arrowheads onto the same cell. Since
+ * both relationships' single horizontal jog then also landed on the exact
+ * same row, the later-drawn label (in the separate label-drawing pass)
+ * blotted out most of the visible line, so `Student --> Course` looked
+ * like it terminated in blank space short of Course instead of reaching it.
+ *
+ * The fix (`relFromOffset`/`relToOffset` in `class-diagram.ts`) fans a
+ * relationship at whichever single end it shares with another
+ * relationship, even when the two relationships are between otherwise
+ * unrelated classes — scoped to a direct, adjacent-level convergence (see
+ * that code's comment for why a level-skipping relationship, which already
+ * needs the separate box-collision detour routing, is excluded).
+ */
+describe('ASCII class diagram — relationships converging on a shared target from different sources (issue #632)', () => {
+  const STUDENT_COURSE_SOURCE = `classDiagram
+  class Teacher {
+    +String name
+  }
+  class Student {
+    +String name
+  }
+  class Course {
+    +String title
+  }
+  Teacher --> Course : teaches
+  Student --> Course : enrolled in`
+
+  it('renders both relationship labels', () => {
+    const ascii = renderMermaidASCII(STUDENT_COURSE_SOURCE, {
+      colorMode: 'none',
+    })
+    expect(ascii).toContain('teaches')
+    expect(ascii).toContain('enrolled in')
+  })
+
+  it('draws two distinct arrowheads into Course instead of collapsing both onto one shared cell', () => {
+    const ascii = renderMermaidASCII(STUDENT_COURSE_SOURCE, {
+      colorMode: 'none',
+    })
+    // Before the fix, both relationships anchored at the exact same
+    // column, so only a single '▼' was ever drawn for both of them
+    // combined — the `Student --> Course` connector had no arrowhead of
+    // its own at all.
+    const arrowCount = (ascii.match(/▼/g) ?? []).length
+    expect(arrowCount).toBe(2)
+  })
+
+  it('gives the two relationships distinct target columns, both landing on Course', () => {
+    const ascii = renderMermaidASCII(STUDENT_COURSE_SOURCE, {
+      colorMode: 'none',
+    })
+    const lines = ascii.split('\n')
+    const arrowCols = lines.flatMap((line) =>
+      [...line].map((ch, i) => (ch === '▼' ? i : -1)).filter((i) => i >= 0),
+    )
+    expect(arrowCols).toHaveLength(2)
+    expect(arrowCols[0]).not.toBe(arrowCols[1])
+
+    // Course's box must actually span both arrow columns — otherwise
+    // they've merely moved apart without both still landing on the target.
+    const courseRow = lines.findIndex((line) => line.includes('Course'))
+    expect(courseRow).toBeGreaterThan(0)
+    const boxRow = lines[courseRow - 1]!
+    const boxLeft = boxRow.indexOf('┌')
+    const boxRight = boxRow.indexOf('┐')
+    expect(boxLeft).toBeGreaterThanOrEqual(0)
+    expect(boxRight).toBeGreaterThan(boxLeft)
+    for (const col of arrowCols) {
+      expect(col).toBeGreaterThanOrEqual(boxLeft)
+      expect(col).toBeLessThanOrEqual(boxRight)
+    }
+  })
+})