@zombie-mermaid/ascii-renderer 2.2.1

package/src/__tests__/ascii-edge-routing-single-point-path.test.ts

@@ -0,0 +1,103 @@
+/**
+ * Regression test for #153 — `determineLabelLine`'s final fallback assumed
+ * a routed edge's path always has at least 2 points:
+ *
+ *   largestLine = segments[0]?.line ?? [edge.path[0]!, edge.path[1]!]
+ *
+ * `pathfinder.ts`'s `getPath` can legitimately return a single-point path
+ * when a routed edge's preferred from/to grid coordinates coincide (e.g.
+ * closely-spaced/adjacent nodes). With a 1-element `edge.path`, `segments`
+ * stays empty (the `for (let i = 1; i < pathLen; i++)` loop never runs),
+ * so the fallback read `edge.path[1]` — actually `undefined`, mistyped as
+ * `GridCoord` — and crashed a few lines later when it was dereferenced.
+ *
+ * Fixed by treating a path with fewer than 2 points as a degenerate
+ * zero-length line at that single point instead of indexing past the end.
+ */
+import { describe, it, expect } from 'vitest'
+import { determineLabelLine } from '../edge-routing.ts'
+import { Down } from '../types.ts'
+import type { AsciiEdge, AsciiGraph, AsciiNode } from '../types.ts'
+import { createGrid } from '../grid-occupancy.ts'
+
+function makeNode(name: string, x: number, y: number): AsciiNode {
+  return {
+    name,
+    displayLabel: name,
+    shape: 'rectangle',
+    index: 0,
+    gridCoord: { x, y },
+    drawingCoord: null,
+    drawing: null,
+    drawn: false,
+    styleClassName: '',
+    styleClass: { name: '', styles: {} },
+  }
+}
+
+function makeGraph(nodes: AsciiNode[]): AsciiGraph {
+  return {
+    nodes,
+    edges: [],
+    canvas: [],
+    roleCanvas: [],
+    grid: createGrid(),
+    columnWidth: new Map(),
+    rowHeight: new Map(),
+    subgraphs: [],
+    config: {
+      useAscii: false,
+      paddingX: 5,
+      paddingY: 5,
+      boxBorderPadding: 1,
+      graphDirection: 'TD',
+    },
+    offsetX: 0,
+    offsetY: 0,
+    bundles: [],
+  }
+}
+
+describe('determineLabelLine handles a single-point edge path (#153)', () => {
+  it('does not throw when edge.path has exactly one point', () => {
+    const from = makeNode('A', 0, 0)
+    const to = makeNode('B', 4, 0)
+    const graph = makeGraph([from, to])
+
+    const edge: AsciiEdge = {
+      from,
+      to,
+      text: 'label',
+      path: [{ x: 2, y: 0 }], // single-point path — the coinciding-endpoint case
+      labelLine: [],
+      startDir: Down,
+      endDir: Down,
+      style: 'solid',
+      hasArrowStart: false,
+      hasArrowEnd: true,
+    }
+
+    expect(() => determineLabelLine(graph, edge)).not.toThrow()
+  })
+
+  it('does not throw when edge.path is empty', () => {
+    const from = makeNode('A', 0, 0)
+    const to = makeNode('B', 4, 0)
+    const graph = makeGraph([from, to])
+
+    const edge: AsciiEdge = {
+      from,
+      to,
+      text: 'label',
+      path: [],
+      labelLine: [],
+      startDir: Down,
+      endDir: Down,
+      style: 'solid',
+      hasArrowStart: false,
+      hasArrowEnd: true,
+    }
+
+    expect(() => determineLabelLine(graph, edge)).not.toThrow()
+  })
+})

package/src/__tests__/ascii-edge-style-consistency-1067.test.ts

@@ -0,0 +1,89 @@
+/**
+ * Regression test for #1067 ("All Edge Styles" form-judge finding): a
+ * same-source fan-out with three distinct edge styles (`-->`, `-.->`,
+ * `==>`) could render one edge's own line as a mix of two different
+ * styles — e.g. the dotted `A -.-> C` edge's horizontal leg drawing as
+ * heavy box-drawing characters (borrowed from the thick `A ==> D` edge's
+ * overlapping route) before switching to its own dashed vertical leg.
+ *
+ * Root cause: `A ==> D`'s route fell through to `determinePath`'s Case-4
+ * direct fallback (edge-routing.ts), which used to hand back a raw
+ * two-point diagonal segment (`[prefFrom, prefTo]`) instead of the
+ * axis-aligned corner `drawLine` (draw-lines.ts) actually draws for it.
+ * That mismatch meant `edge-cell-styles.ts`'s cross-style conflict
+ * detection — which walks `edge.path` assuming it already matches the
+ * drawn geometry — never saw the real overlap with the dotted edge's own
+ * (properly routed) horizontal leg, so nothing rerouted around it and the
+ * later-drawn thick edge's canvas simply overwrote the dotted edge's
+ * glyphs where the two coincided.
+ *
+ * Two changes fix it:
+ *  - `determinePath`'s Case-4 fallback now runs its diagonal segment
+ *    through `expandDiagonalSegments` before assigning `edge.path`, so the
+ *    recorded path always matches what `drawLine` actually draws.
+ *  - `canvas.ts`'s `firstClaimWins` resolves any leftover overlap between
+ *    edges' own line canvases before they're merged: whichever edge's line
+ *    reaches a cell first (by `graph.edges` order) keeps it, instead of
+ *    `mergeCanvases`' normal last-overlay-wins behavior silently splicing
+ *    a later sibling's style into an earlier edge's own line.
+ */
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+
+const ALL_EDGE_STYLES = `graph TD
+  A[Source] -->|solid| B[Target 1]
+  A -.->|dotted| C[Target 2]
+  A ==>|thick| D[Target 3]`
+
+const HEAVY_CHARS = /[━┃]/
+const DASHED_CHARS = /[┄┆]/
+
+describe('edge line style consistency on a same-source mixed-style fan-out (#1067)', () => {
+  const lines = renderMermaidASCII(ALL_EDGE_STYLES, { colorMode: 'none' })
+    .split('\n')
+    .map((l) => l.replace(/\s+$/, ''))
+
+  it('renders every label and does not throw', () => {
+    const out = lines.join('\n')
+    for (const label of ['Source', 'Target 1', 'Target 2', 'Target 3']) {
+      expect(out).toContain(label)
+    }
+  })
+
+  it("keeps the dotted edge's own horizontal leg entirely dashed, never heavy", () => {
+    const sourceRow = lines.find((l) => l.includes('Source'))!
+    const afterBoxStart = sourceRow.slice(sourceRow.indexOf('├') + 1)
+    // The dotted edge's own corner is the *first* turn ('┐') on this row —
+    // the thick edge's route continues past it to a second, later corner.
+    const dottedCornerIndex = afterBoxStart.indexOf('┐')
+    expect(dottedCornerIndex).toBeGreaterThan(-1)
+    const dottedSegment = afterBoxStart.slice(0, dottedCornerIndex + 1)
+
+    expect(dottedSegment).not.toMatch(HEAVY_CHARS)
+    expect(dottedSegment).toMatch(DASHED_CHARS)
+  })
+
+  it("keeps the dotted edge's own vertical leg entirely dashed", () => {
+    const dottedLabelRow = lines.findIndex((l) => l.includes('dotted'))
+    expect(dottedLabelRow).toBeGreaterThan(-1)
+    // The vertical run is drawn on the rows immediately above and below
+    // the label.
+    for (const row of [
+      lines[dottedLabelRow - 1]!,
+      lines[dottedLabelRow + 1]!,
+    ]) {
+      const col = row.indexOf('┆')
+      expect(col).toBeGreaterThan(-1)
+      expect(row[col + 1] ?? '').not.toMatch(HEAVY_CHARS)
+    }
+  })
+
+  it("keeps the thick edge's own vertical leg entirely heavy, never dashed", () => {
+    const thickLabelRow = lines.findIndex((l) => l.includes('thick'))
+    expect(thickLabelRow).toBeGreaterThan(-1)
+    for (const row of [lines[thickLabelRow - 1]!, lines[thickLabelRow + 1]!]) {
+      const col = row.indexOf('┃')
+      expect(col).toBeGreaterThan(-1)
+    }
+  })
+})

package/src/__tests__/ascii-edge-styles.test.ts

@@ -0,0 +1,149 @@
+// ============================================================================
+// ASCII edge style tests — dotted and thick line rendering
+// ============================================================================
+
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+
+describe('ASCII edge styles', () => {
+  describe('solid edges (default)', () => {
+    it('renders solid edges with ─ in unicode mode', () => {
+      const result = renderMermaidASCII(`
+        graph LR
+          A --> B
+      `)
+      expect(result).toContain('─')
+      expect(result).not.toContain('┄')
+      expect(result).not.toContain('━')
+    })
+
+    it('renders solid edges with - in ascii mode', () => {
+      const result = renderMermaidASCII(
+        `
+        graph LR
+          A --> B
+      `,
+        { useAscii: true },
+      )
+      expect(result).toContain('-')
+    })
+  })
+
+  describe('dotted edges (-.->)', () => {
+    it('renders dotted edges with ┄ in unicode mode', () => {
+      const result = renderMermaidASCII(`
+        graph LR
+          A -.-> B
+      `)
+      // Should contain dotted horizontal line character
+      expect(result).toContain('┄')
+    })
+
+    it('renders dotted edges with . in ascii mode', () => {
+      const result = renderMermaidASCII(
+        `
+        graph LR
+          A -.-> B
+      `,
+        { useAscii: true },
+      )
+      // Should contain dots for dotted lines
+      expect(result).toContain('.')
+    })
+
+    it('renders dotted vertical edges with ┆ in unicode mode', () => {
+      const result = renderMermaidASCII(`
+        graph TD
+          A -.-> B
+      `)
+      // Should contain dotted vertical line character
+      expect(result).toContain('┆')
+    })
+
+    it('renders dotted vertical edges with : in ascii mode', () => {
+      const result = renderMermaidASCII(
+        `
+        graph TD
+          A -.-> B
+      `,
+        { useAscii: true },
+      )
+      // Should contain colons for dotted vertical lines
+      expect(result).toContain(':')
+    })
+
+    it('renders dotted edges with labels', () => {
+      const result = renderMermaidASCII(`
+        graph LR
+          A -.->|optional| B
+      `)
+      expect(result).toContain('┄')
+      expect(result).toContain('optional')
+    })
+  })
+
+  describe('thick edges (==>)', () => {
+    it('renders thick edges with ━ in unicode mode', () => {
+      const result = renderMermaidASCII(`
+        graph LR
+          A ==> B
+      `)
+      // Should contain thick horizontal line character
+      expect(result).toContain('━')
+    })
+
+    it('renders thick edges with = in ascii mode', () => {
+      const result = renderMermaidASCII(
+        `
+        graph LR
+          A ==> B
+      `,
+        { useAscii: true },
+      )
+      // Should contain equals for thick lines
+      expect(result).toContain('=')
+    })
+
+    it('renders thick vertical edges with ┃ in unicode mode', () => {
+      const result = renderMermaidASCII(`
+        graph TD
+          A ==> B
+      `)
+      // Should contain thick vertical line character
+      expect(result).toContain('┃')
+    })
+  })
+
+  describe('mixed edge styles', () => {
+    it('renders different styles in the same diagram', () => {
+      const result = renderMermaidASCII(`
+        graph LR
+          A --> B
+          B -.-> C
+          C ==> D
+      `)
+      // Should have all three line types
+      expect(result).toContain('─') // solid
+      expect(result).toContain('┄') // dotted
+      expect(result).toContain('━') // thick
+    })
+
+    it('renders mixed styles in ascii mode', () => {
+      const result = renderMermaidASCII(
+        `
+        graph LR
+          A --> B
+          B -.-> C
+          C ==> D
+      `,
+        { useAscii: true },
+      )
+      // Note: ASCII mode uses - for solid, . for dotted, = for thick
+      // We just check that the diagram renders without error
+      expect(result).toContain('A')
+      expect(result).toContain('B')
+      expect(result).toContain('C')
+      expect(result).toContain('D')
+    })
+  })
+})

package/src/__tests__/ascii-emoji-cluster-width.test.ts

@@ -0,0 +1,101 @@
+/**
+ * Regression tests for issue #214 — ASCII renderer boxes several columns too
+ * wide for composed emoji / grapheme clusters (ZWJ sequences, flags,
+ * skin-tone modifiers).
+ *
+ * `displayWidth()` used to add up "wide" columns per JS code point rather
+ * than per rendered grapheme cluster, so a multi-code-point emoji sequence —
+ * which a real terminal renders as a single glyph occupying at most 2
+ * columns — was counted once per code point:
+ *
+ *   | Input                    | Code points | old displayWidth | actual columns |
+ *   |---------------------------|------------|-------------------|-----------------|
+ *   | 👨‍👩‍👧 (ZWJ family)         | 5          | 8                 | 2               |
+ *   | 🇺🇸 (regional indicators) | 2          | 4                 | 2               |
+ *   | 👍🏽 (skin-tone modifier)  | 2          | 4                 | 2               |
+ *   | 日本 (plain CJK, contrast) | 2          | 4                 | 4               |
+ *
+ * `terminalDisplayWidth` re-implements the "how many terminal columns does
+ * this string occupy" calculation independently of
+ * `src/ascii/display-width.ts`, so these tests verify the *rendered output*
+ * against an authority separate from the implementation under test.
+ */
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+import { displayWidth } from '../display-width.ts'
+import {
+  terminalDisplayWidth,
+  assertUniformDisplayWidth,
+} from './helpers/terminal-display-width.ts'
+
+// 👨‍👩‍👧 — MAN, ZWJ, WOMAN, ZWJ, GIRL (5 code points, 1 grapheme cluster).
+const ZWJ_FAMILY = '\u{1F468}' + '‍' + '\u{1F469}' + '‍' + '\u{1F467}'
+// 🇺🇸 — REGIONAL INDICATOR U + REGIONAL INDICATOR S (2 code points, 1 cluster).
+const FLAG_US = '\u{1F1FA}' + '\u{1F1F8}'
+// 👍🏽 — THUMBS UP + MEDIUM SKIN TONE modifier (2 code points, 1 cluster).
+const THUMB_MEDIUM = '\u{1F44D}' + '\u{1F3FD}'
+
+describe('ASCII renderer — composed emoji cluster width (issue #214)', () => {
+  it.each([
+    ['ZWJ family emoji', ZWJ_FAMILY, 5, 2],
+    ['regional-indicator flag', FLAG_US, 2, 2],
+    ['skin-tone-modified emoji', THUMB_MEDIUM, 2, 2],
+    ['plain CJK (contrast)', '日本', 2, 4],
+  ])(
+    '%s: %j has %i code points and measures as %i columns',
+    (_label, text, codePointCount, expectedWidth) => {
+      expect([...text].length).toBe(codePointCount)
+      expect(displayWidth(text)).toBe(expectedWidth)
+      expect(terminalDisplayWidth(text)).toBe(expectedWidth)
+    },
+  )
+
+  for (const useAscii of [false, true]) {
+    describe(useAscii ? 'ASCII charset' : 'Unicode charset', () => {
+      it('renders the issue repro (family emoji + CJK) with all rows at equal terminal width', () => {
+        const mermaid = `flowchart TD\n  A[${ZWJ_FAMILY} team] --> B[日本]`
+        const ascii = renderMermaidASCII(mermaid, {
+          useAscii,
+          colorMode: 'none',
+        })
+        assertUniformDisplayWidth(ascii)
+        expect(ascii).toContain(ZWJ_FAMILY)
+        expect(ascii).toContain('日本')
+      })
+
+      it('sizes a flag-emoji label box to 2 columns, not 4', () => {
+        const mermaid = `flowchart TD\n  A[${FLAG_US}] --> B[ok]`
+        const ascii = renderMermaidASCII(mermaid, {
+          useAscii,
+          colorMode: 'none',
+        })
+        assertUniformDisplayWidth(ascii)
+        expect(ascii).toContain(FLAG_US)
+      })
+
+      it('sizes a skin-tone-modifier label box to 2 columns, not 4', () => {
+        const mermaid = `flowchart TD\n  A[${THUMB_MEDIUM}] --> B[ok]`
+        const ascii = renderMermaidASCII(mermaid, {
+          useAscii,
+          colorMode: 'none',
+        })
+        assertUniformDisplayWidth(ascii)
+        expect(ascii).toContain(THUMB_MEDIUM)
+      })
+    })
+  }
+
+  it('renders a class diagram compartment box with a composed emoji member at uniform width', () => {
+    const mermaid = `classDiagram\n  class Team {\n    +String ${ZWJ_FAMILY}\n  }`
+    const ascii = renderMermaidASCII(mermaid, { colorMode: 'none' })
+    assertUniformDisplayWidth(ascii)
+    expect(ascii).toContain(ZWJ_FAMILY)
+  })
+
+  it('renders an ER diagram compartment box with a composed emoji attribute at uniform width', () => {
+    const mermaid = `erDiagram\n  ITEM {\n    string ${FLAG_US}\n  }`
+    const ascii = renderMermaidASCII(mermaid, { colorMode: 'none' })
+    assertUniformDisplayWidth(ascii)
+    expect(ascii).toContain(FLAG_US)
+  })
+})

package/src/__tests__/ascii-er-box-occupancy.test.ts

@@ -0,0 +1,251 @@
+// ============================================================================
+// ASCII ER diagram box-occupancy invariants
+//
+// Generalizes issue #350's fix (src/ascii/er-diagram.ts's `setCGuarded`/
+// `boxCells`/`regionClear` occupancy guard — see
+// ascii-er-relationship-label-corruption-350.test.ts for the original fixed
+// repro) from a single fixed repro into a swept matrix: no two entity boxes
+// ever overlap, and no relationship label ever lands inside an entity box it
+// isn't attached to. svg-samples.visual.test.ts / ascii-samples.visual.test.ts
+// only self-diff against a committed baseline screenshot, so they can't catch
+// this shape of regression on their own — these assertions check the
+// renderer's own occupancy guarantee directly, on any diagram shape, not just
+// the one screenshot on file.
+// ============================================================================
+
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+import {
+  findBoxRect,
+  findTextRect,
+  rectsOverlap,
+} from './helpers/ascii-form.ts'
+
+/** Assert no two named entity boxes in `ascii` overlap. */
+function expectNoBoxOverlap(ascii: string, names: string[]): void {
+  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)
+    }
+  }
+}
+
+/** Assert `label` doesn't land inside any of `names`' boxes. */
+function expectLabelOutsideBoxes(
+  ascii: string,
+  label: string,
+  names: string[],
+): void {
+  const labelRect = findTextRect(ascii, label)
+  for (const name of names) {
+    const boxRect = findBoxRect(ascii, name)
+    expect(
+      rectsOverlap(labelRect, boxRect),
+      `label "${label}" lands inside ${name}'s box`,
+    ).toBe(false)
+  }
+}
+
+describe('ASCII ER diagrams — entity boxes never overlap (issue #350 family)', () => {
+  it('2 entities, 1 direct relationship, short label', () => {
+    const src = `erDiagram
+  A ||--o{ B : owns`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    expectNoBoxOverlap(ascii, ['A', 'B'])
+  })
+
+  it('2 entities, direct, long label', () => {
+    const src = `erDiagram
+  A ||--o{ B : ships_to_a_regional_warehouse`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    expectNoBoxOverlap(ascii, ['A', 'B'])
+  })
+
+  it('2 entities, direct, long identifier names', () => {
+    const src = `erDiagram
+  CUSTOMER_ACCOUNT_PROFILE ||--o{ SHIPPING_ADDRESS_RECORD : has`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    expectNoBoxOverlap(ascii, [
+      'CUSTOMER_ACCOUNT_PROFILE',
+      'SHIPPING_ADDRESS_RECORD',
+    ])
+  })
+
+  it('3 entities, adjacent-only chain (smoke case)', () => {
+    const src = `erDiagram
+  A ||--o{ B : one
+  B ||--o{ C : two`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    expectNoBoxOverlap(ascii, ['A', 'B', 'C'])
+  })
+
+  it('3 entities same row, A-C skipping B (direct issue #350 shape)', () => {
+    const src = `erDiagram
+  A ||--o{ B : one
+  A ||--o| C : skips_b`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    expectNoBoxOverlap(ascii, ['A', 'B', 'C'])
+    expectLabelOutsideBoxes(ascii, 'skips_b', ['B'])
+  })
+
+  it('3 entities, A-C skip B, long multi-word label', () => {
+    const src = `erDiagram
+  A ||--o{ B : one
+  A ||--o| C : a_very_long_descriptive_relationship_name`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    expectNoBoxOverlap(ascii, ['A', 'B', 'C'])
+    expectLabelOutsideBoxes(
+      ascii,
+      'a_very_long_descriptive_relationship_name',
+      ['B'],
+    )
+  })
+
+  it('3 entities, A-C skip B, long names', () => {
+    const src = `erDiagram
+  ALPHA_ENTITY ||--o{ BRAVO_ENTITY : one
+  ALPHA_ENTITY ||--o| CHARLIE_ENTITY : skips_b`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    expectNoBoxOverlap(ascii, [
+      'ALPHA_ENTITY',
+      'BRAVO_ENTITY',
+      'CHARLIE_ENTITY',
+    ])
+  })
+
+  it('5 entities, 3-per-row layout, A-C skip B in row 1', () => {
+    const src = `erDiagram
+  A ||--o{ B : one
+  A ||--o| C : skips_b
+  A ||--o{ D : two
+  A ||--o{ E : three`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    expectNoBoxOverlap(ascii, ['A', 'B', 'C', 'D', 'E'])
+  })
+
+  it('5 entities, two same-row obstructed pairs sharing the row-gap band', () => {
+    const src = `erDiagram
+  A ||--o{ B : one
+  A ||--o| C : first_skip
+  D ||--o{ E : two
+  A ||--o{ D : bridge
+  D ||--o| B : second_skip`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    expectNoBoxOverlap(ascii, ['A', 'B', 'C', 'D', 'E'])
+    const firstSkip = findTextRect(ascii, 'first_skip')
+    const secondSkip = findTextRect(ascii, 'second_skip')
+    expect(
+      rectsOverlap(firstSkip, secondSkip),
+      'first_skip and second_skip labels overlap each other',
+    ).toBe(false)
+  })
+
+  it('5 entities, vertical relationship whose row-mate is taller', () => {
+    const src = `erDiagram
+  A ||--o{ B : one
+  A {
+    string id
+    string a1
+    string a2
+    string a3
+    string a4
+    string a5
+  }
+  C ||--o{ D : two
+  A ||--o| D : cross_row`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    expectNoBoxOverlap(ascii, ['A', 'B', 'C', 'D'])
+  })
+
+  it('7 entities, multi-row skip spanning 3 rows', () => {
+    const src = `erDiagram
+  A ||--o{ B : r1a
+  A ||--o{ C : r1b
+  D ||--o{ E : r2a
+  D ||--o{ F : r2b
+  G ||--o{ A : r3
+  G ||--o| D : long_skip_across_rows`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    expectNoBoxOverlap(ascii, ['A', 'B', 'C', 'D', 'E', 'F', 'G'])
+  })
+
+  it('4 entities, mixed same-row + cross-row + diagonal relationship', () => {
+    const src = `erDiagram
+  A ||--o{ B : same_row
+  C ||--o{ D : same_row_2
+  A ||--o| D : diagonal`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    expectNoBoxOverlap(ascii, ['A', 'B', 'C', 'D'])
+  })
+
+  it('2 entities, parallel relationships (2 labels, same pair)', () => {
+    const src = `erDiagram
+  A ||--o{ B : places_order
+  A ||--o{ B : returns_item`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    const label1 = findTextRect(ascii, 'places_order')
+    const label2 = findTextRect(ascii, 'returns_item')
+    expect(
+      rectsOverlap(label1, label2),
+      'the two relationship labels overlap',
+    ).toBe(false)
+  })
+
+  it("3 entities, two-char crow's-foot markers, minimal gap", () => {
+    const src = `erDiagram
+  A }o--o{ B : m2m
+  B }o--o{ C : m2m2`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    expectNoBoxOverlap(ascii, ['A', 'B', 'C'])
+  })
+
+  it('6 entities, 2 disconnected components, each with same-row obstruction', () => {
+    const src = `erDiagram
+  A ||--o{ B : one
+  A ||--o| C : skip_1
+
+  D ||--o{ E : two
+  D ||--o| F : skip_2`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    expectNoBoxOverlap(ascii, ['A', 'B', 'C', 'D', 'E', 'F'])
+  })
+
+  it('3 entities, A-C skip B, B has zero attributes (short box)', () => {
+    const src = `erDiagram
+  A ||--o{ B : one
+  A ||--o| C : skip_short_b`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    expectNoBoxOverlap(ascii, ['A', 'B', 'C'])
+  })
+
+  it('3 entities, A-C skip B, B has 8 attributes (tall box)', () => {
+    const src = `erDiagram
+  A ||--o{ B : one
+  B {
+    string id
+    string b1
+    string b2
+    string b3
+    string b4
+    string b5
+    string b6
+    string b7
+  }
+  A ||--o| C : skip_tall_b`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    expectNoBoxOverlap(ascii, ['A', 'B', 'C'])
+  })
+
+  it('4 entities in one row, A-D skipping 2 (B and C)', () => {
+    const src = `erDiagram
+  A ||--o{ B : one
+  B ||--o{ C : two
+  A ||--o| D : skip_two`
+    const ascii = renderMermaidASCII(src, { useAscii: true })
+    expectNoBoxOverlap(ascii, ['A', 'B', 'C', 'D'])
+  })
+})