@zombie-mermaid/ascii-renderer 2.2.1

package/src/__tests__/ascii-combining-mark-width.test.ts

@@ -0,0 +1,70 @@
+/**
+ * Regression tests for issue #205 — ASCII renderer box borders misaligned by
+ * zero-width Unicode combining marks.
+ *
+ * `displayWidth()` used to add 1 column for every code point that isn't
+ * "wide" (CJK etc), including combining marks (general categories Mn/Me,
+ * e.g. U+0300–U+036F COMBINING ACUTE ACCENT). A real terminal gives such a
+ * mark 0 columns — it attaches to the preceding base character. A decomposed
+ * string like "café" (e + U+0301) used to measure as 5 columns; a real
+ * terminal renders it as 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'
+
+// "café", decomposed: c a f e + COMBINING ACUTE ACCENT (U+0301) — 5 code
+// points, 4 grapheme clusters / terminal columns.
+const DECOMPOSED_CAFE = 'caf' + 'e' + '́'
+
+describe('ASCII renderer — combining mark box alignment (issue #205)', () => {
+  it('displayWidth("café") (decomposed) is 4, not 5', () => {
+    expect([...DECOMPOSED_CAFE].length).toBe(5)
+    expect(displayWidth(DECOMPOSED_CAFE)).toBe(4)
+    expect(terminalDisplayWidth(DECOMPOSED_CAFE)).toBe(4)
+  })
+
+  for (const useAscii of [false, true]) {
+    describe(useAscii ? 'ASCII charset' : 'Unicode charset', () => {
+      it('renders a flowchart node with a decomposed label at uniform row width', () => {
+        const mermaid = `flowchart TD\n  A[${DECOMPOSED_CAFE}] --> B[ok]`
+        const ascii = renderMermaidASCII(mermaid, {
+          useAscii,
+          colorMode: 'none',
+        })
+        assertUniformDisplayWidth(ascii)
+        expect(ascii).toContain(DECOMPOSED_CAFE)
+      })
+    })
+  }
+
+  it('renders a class diagram compartment box with a decomposed member name at uniform width', () => {
+    const mermaid = `classDiagram\n  class Person {\n    +String ${DECOMPOSED_CAFE}\n  }`
+    const ascii = renderMermaidASCII(mermaid, { colorMode: 'none' })
+    assertUniformDisplayWidth(ascii)
+    expect(ascii).toContain(DECOMPOSED_CAFE)
+  })
+
+  it('renders an ER diagram compartment box with a decomposed attribute name at uniform width', () => {
+    const mermaid = `erDiagram\n  ITEM {\n    string ${DECOMPOSED_CAFE}\n  }`
+    const ascii = renderMermaidASCII(mermaid, { colorMode: 'none' })
+    assertUniformDisplayWidth(ascii)
+    expect(ascii).toContain(DECOMPOSED_CAFE)
+  })
+
+  it('does not perturb the all-ASCII case', () => {
+    const ascii = renderMermaidASCII('flowchart TD\n  A[plain] --> B[ok]', {
+      colorMode: 'none',
+    })
+    assertUniformDisplayWidth(ascii)
+  })
+})

package/src/__tests__/ascii-coords-overlay.test.ts

@@ -0,0 +1,64 @@
+import { describe, it, expect } from 'vitest'
+import { addCoordsOverlay } from '../coords.ts'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+
+describe('addCoordsOverlay', () => {
+  it('prepends a two-row column ruler and a row-index gutter', () => {
+    const rendered = 'AB\nCD'
+    const result = addCoordsOverlay(rendered)
+    const lines = result.split('\n')
+
+    // Two ruler rows on top, then one gutter-prefixed row per original line.
+    expect(lines).toHaveLength(4)
+    expect(lines[0]).toBe('  00')
+    expect(lines[1]).toBe('  01')
+    expect(lines[2]).toBe('0 AB')
+    expect(lines[3]).toBe('1 CD')
+  })
+
+  it('pads the row gutter to fit multi-digit row indices', () => {
+    const rendered = Array.from({ length: 11 }, (_, i) => `row${i}`).join('\n')
+    const result = addCoordsOverlay(rendered)
+    const lines = result.split('\n')
+
+    // Row gutter width is 2 (since max row index is 10), so row 0's label
+    // is right-aligned as " 0" and row 10's as "10".
+    expect(lines[2]?.startsWith(' 0 ')).toBe(true)
+    expect(lines[lines.length - 1]?.startsWith('10 ')).toBe(true)
+  })
+
+  it('handles an empty string without throwing', () => {
+    expect(() => addCoordsOverlay('')).not.toThrow()
+  })
+
+  it('measures width by visible characters, not raw length with ANSI codes', () => {
+    // A 2-char-wide line wrapped in a color escape sequence is still only
+    // 2 columns wide on screen — the ruler must match that, not the ~10
+    // raw characters the escape codes add.
+    const colored = '\x1b[37mAB\x1b[0m'
+    const result = addCoordsOverlay(colored)
+    const lines = result.split('\n')
+    expect(lines[0]).toBe('  00')
+    expect(lines[1]).toBe('  01')
+  })
+})
+
+describe('renderMermaidASCII – showCoords', () => {
+  const DIAGRAM = 'graph LR\n  A --> B'
+
+  it('is off by default (no ruler in output)', () => {
+    const result = renderMermaidASCII(DIAGRAM)
+    // Without the overlay, the very first line is drawing content, not a
+    // row of digit-only ruler characters starting at the left margin.
+    expect(result.split('\n')[0]).not.toMatch(/^\s*0123456789/)
+  })
+
+  it('overlays coordinate rulers when showCoords is true', () => {
+    const plain = renderMermaidASCII(DIAGRAM)
+    const withCoords = renderMermaidASCII(DIAGRAM, { showCoords: true })
+
+    expect(withCoords).not.toBe(plain)
+    expect(withCoords.split('\n').length).toBe(plain.split('\n').length + 2)
+    expect(withCoords).toContain('0123456789')
+  })
+})

package/src/__tests__/ascii-decision-lr-box-start.test.ts

@@ -0,0 +1,106 @@
+/**
+ * Regression test for GitHub issue #86 — ASCII: stray ├ character on
+ * flowchart decision-node edge labels (LR, Unicode).
+ *
+ * Repro (from the issue): a decision node with two outgoing labeled edges,
+ * rendered LR with the default Unicode box-drawing charset. The box-start
+ * connector for the first ("Yes") edge landed on a blank grid cell — one
+ * that had no real vertical border line above or below it — and still
+ * unconditionally emitted a ├ tee character there, producing a stray,
+ * disconnected junction glyph instead of a plain horizontal line.
+ *
+ * Not reproducible in TD direction or with the ASCII charset (`useAscii:
+ * true`), since ASCII mode skips box-start connectors entirely.
+ */
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+import { findOrphanedJunctions } from '../validate.ts'
+import { readdirSync, readFileSync } from 'node:fs'
+import { join, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const ISSUE_86_REPRO = `flowchart LR
+  A{Decision} -->|Yes| B[Do thing]
+  A -->|No| C[Other thing]`
+
+describe('issue #86: stray ├ on decision-node edge labels (LR, Unicode)', () => {
+  it('does not emit an orphaned ├ where the "Yes" edge exits the decision box', () => {
+    const out = renderMermaidASCII(ISSUE_86_REPRO, { colorMode: 'none' })
+
+    const orphans = findOrphanedJunctions(out)
+    expect(orphans).toEqual([])
+  })
+
+  it('places the "Yes" edge box-start exactly on the decision box\'s real right border, not drifted onto a blank cell', () => {
+    // A sibling fix (issue #64 bug 5, box-start connector drift) re-anchors
+    // horizontal connectors to the node's *actual* rendered border column
+    // instead of a grid-centered position that a sibling label could widen.
+    // Combined with this fix's validation, the "Yes" connector now lands
+    // exactly on the decision box's real border — so the correct output
+    // *is* a genuine ├ junction there (replacing what's a plain │ on every
+    // other row of that same border column), not a stray one. The
+    // structural check above (findOrphanedJunctions) is what actually
+    // proves it's not orphaned; this test locks in that the junction's
+    // column lines up with the box's own border on adjacent rows, which is
+    // what "not drifted" means concretely.
+    const out = renderMermaidASCII(ISSUE_86_REPRO, { colorMode: 'none' })
+    const lines = out.split('\n')
+    const yesLineIdx = lines.findIndex((l) => l.includes('Yes'))
+    expect(yesLineIdx).toBeGreaterThanOrEqual(0)
+
+    const yesRow = lines[yesLineIdx]!
+    const junctionCol = yesRow.indexOf('├')
+    expect(junctionCol).toBeGreaterThanOrEqual(0)
+
+    // The same column on the rows immediately above/below must be the
+    // decision box's own plain vertical border — confirming the junction
+    // sits exactly on a real border line, not on a blank/drifted cell.
+    expect(lines[yesLineIdx - 1]?.[junctionCol]).toBe('│')
+    expect(lines[yesLineIdx + 1]?.[junctionCol]).toBe('│')
+  })
+
+  it('still renders a genuine ├ junction for a normal single-edge box-start', () => {
+    // Sanity check: the fix must not turn into a false negative that
+    // removes legitimate tee/junction characters where a real vertical
+    // border line does exist above and below.
+    const out = renderMermaidASCII(
+      `flowchart LR
+  A[Box A] --> B[Box B]`,
+      { colorMode: 'none' },
+    )
+    expect(out).toContain('├')
+    expect(findOrphanedJunctions(out)).toEqual([])
+  })
+
+  it('still renders a genuine ┬ junction for a TD fan-out box-start', () => {
+    // Labeled edges opt out of edge bundling (see analyzeEdgeBundles'
+    // canBundle check), so both edges go through the plain drawArrow /
+    // drawBoxStart path exercised by this fix rather than the separate
+    // fan-out bundle trunk/junction logic.
+    const out = renderMermaidASCII(
+      `flowchart TD
+  A[Box A] -->|one| B[Box B]
+  A -->|two| C[Box C]`,
+      { colorMode: 'none' },
+    )
+    expect(out).toContain('┬')
+    expect(findOrphanedJunctions(out)).toEqual([])
+  })
+
+  it('has no orphaned junctions across all Unicode golden fixtures', () => {
+    const dir = join(
+      dirname(fileURLToPath(import.meta.url)),
+      'testdata',
+      'unicode',
+    )
+    const files = readdirSync(dir).filter((f) => f.endsWith('.txt'))
+
+    for (const file of files) {
+      const content = readFileSync(join(dir, file), 'utf-8')
+      const expected = content.split('\n---\n')[1] ?? content.split('---')[1]
+      if (!expected) continue
+      const orphans = findOrphanedJunctions(expected)
+      expect(orphans, `orphaned junction(s) in fixture: ${file}`).toEqual([])
+    }
+  })
+})

package/src/__tests__/ascii-display-width-unit.test.ts

@@ -0,0 +1,154 @@
+/**
+ * Direct unit tests for `src/ascii/display-width.ts`'s grapheme-cluster-based
+ * width algorithm, covering both bugs it fixes:
+ *
+ *   - #205: a decomposed combining mark (base char + Mn/Me code point) must
+ *     contribute 0 columns of its own, not 1.
+ *   - #214: a composed multi-code-point grapheme cluster (ZWJ emoji sequence,
+ *     flag via regional indicators, skin-tone modifier) must be measured
+ *     once per cluster, not once per code point.
+ *
+ * The render-level regression suites (`ascii-combining-mark-width.test.ts`,
+ * `ascii-emoji-cluster-width.test.ts`) verify these against a fully
+ * independent oracle; this file tests the module's own public API directly,
+ * including the degenerate lone-combining-mark case that a full diagram
+ * render wouldn't naturally exercise.
+ *
+ * Strings are built from explicit `\u` code point escapes rather than typed
+ * accented/emoji literals, so the decomposed/precomposed and
+ * single-cluster/multi-code-point distinctions under test can't be silently
+ * altered by source-file Unicode normalization.
+ */
+import { describe, it, expect } from 'vitest'
+import {
+  charDisplayWidth,
+  displayWidth,
+  toDisplayCells,
+  WIDE_CHAR_PLACEHOLDER,
+} from '../display-width.ts'
+
+const COMBINING_ACUTE = '́'
+const COMBINING_GRAVE = '̀'
+// "café", decomposed: c a f e + COMBINING ACUTE ACCENT (5 code points).
+const DECOMPOSED_CAFE = 'caf' + 'e' + COMBINING_ACUTE
+// "café", precomposed: c a f é, where é is the single code point U+00E9
+// (4 code points).
+const PRECOMPOSED_CAFE = 'caf' + 'é'
+
+// 👨‍👩‍👧 — 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('displayWidth — combining marks (issue #205)', () => {
+  it('measures a decomposed "café" (e + U+0301) as 4 columns', () => {
+    expect([...DECOMPOSED_CAFE].length).toBe(5) // 5 code points
+    expect(displayWidth(DECOMPOSED_CAFE)).toBe(4)
+  })
+
+  it('measures the precomposed form identically', () => {
+    expect([...PRECOMPOSED_CAFE].length).toBe(4) // 4 code points already
+    expect(displayWidth(PRECOMPOSED_CAFE)).toBe(4)
+  })
+
+  it('does not add width for multiple stacked combining marks on one base', () => {
+    // "e" + combining acute + combining grave — still one grapheme cluster.
+    const stacked = 'e' + COMBINING_ACUTE + COMBINING_GRAVE
+    expect(displayWidth(stacked)).toBe(1)
+  })
+
+  it('treats a lone combining mark with no base character as zero-width', () => {
+    expect(charDisplayWidth(COMBINING_ACUTE)).toBe(0)
+    expect(displayWidth(COMBINING_ACUTE)).toBe(0)
+  })
+
+  it('produces no grid cell for a lone combining mark', () => {
+    expect(toDisplayCells(COMBINING_ACUTE)).toEqual([])
+  })
+})
+
+describe('displayWidth — composed grapheme clusters (issue #214)', () => {
+  it('measures a ZWJ family emoji as 2 columns, not 8', () => {
+    expect([...ZWJ_FAMILY].length).toBe(5) // 5 code points
+    expect(displayWidth(ZWJ_FAMILY)).toBe(2)
+  })
+
+  it('measures a regional-indicator flag as 2 columns, not 4', () => {
+    expect([...FLAG_US].length).toBe(2)
+    expect(displayWidth(FLAG_US)).toBe(2)
+  })
+
+  it('measures a skin-tone-modified emoji as 2 columns, not 4', () => {
+    expect([...THUMB_MEDIUM].length).toBe(2)
+    expect(displayWidth(THUMB_MEDIUM)).toBe(2)
+  })
+
+  it('still measures plain CJK correctly (contrast case)', () => {
+    expect(displayWidth('日本')).toBe(4) // 日本
+  })
+
+  it('measures a mixed string combining marks and emoji clusters', () => {
+    const text = DECOMPOSED_CAFE + ' ' + ZWJ_FAMILY
+    expect(displayWidth(text)).toBe(4 + 1 + 2)
+  })
+})
+
+describe('displayWidth — VS16 emoji-presentation override', () => {
+  // ▶️ / ◀️ — the arrowhead glyphs excluded from `isWideChar` as narrow
+  // Geometric Shapes characters (see text-metrics.ts), explicitly forced to
+  // emoji presentation via a trailing U+FE0F VARIATION SELECTOR-16.
+  const RIGHT_ARROW_VS16 = '▶' + '\u{FE0F}'
+  const LEFT_ARROW_VS16 = '◀' + '\u{FE0F}'
+
+  it('measures VS16-suffixed arrowheads as 2 columns despite the base character being narrow', () => {
+    expect(charDisplayWidth(RIGHT_ARROW_VS16)).toBe(2)
+    expect(charDisplayWidth(LEFT_ARROW_VS16)).toBe(2)
+  })
+
+  it('still measures the bare (VS16-less) arrowheads as narrow', () => {
+    expect(charDisplayWidth('▶')).toBe(1)
+    expect(charDisplayWidth('◀')).toBe(1)
+  })
+
+  it('keeps cell count in sync with displayWidth for a VS16 arrowhead', () => {
+    expect(toDisplayCells(RIGHT_ARROW_VS16)).toEqual([
+      RIGHT_ARROW_VS16,
+      WIDE_CHAR_PLACEHOLDER,
+    ])
+  })
+})
+
+describe('toDisplayCells — grid-cell/column-count invariant', () => {
+  it('keeps cell count in sync with displayWidth for a decomposed mark', () => {
+    expect(toDisplayCells(DECOMPOSED_CAFE).length).toBe(
+      displayWidth(DECOMPOSED_CAFE),
+    )
+  })
+
+  it('keeps cell count in sync with displayWidth for a ZWJ emoji', () => {
+    expect(toDisplayCells(ZWJ_FAMILY).length).toBe(displayWidth(ZWJ_FAMILY))
+  })
+
+  it('writes the whole composed cluster into a single cell, followed by a placeholder', () => {
+    const cells = toDisplayCells(ZWJ_FAMILY)
+    expect(cells).toEqual([ZWJ_FAMILY, WIDE_CHAR_PLACEHOLDER])
+  })
+
+  it('writes a base character + combining mark into a single cell with no placeholder', () => {
+    const decomposedE = 'e' + COMBINING_ACUTE
+    const cells = toDisplayCells(decomposedE)
+    expect(cells).toEqual([decomposedE])
+  })
+
+  it('leaves plain ASCII behavior unchanged', () => {
+    expect(toDisplayCells('ab')).toEqual(['a', 'b'])
+    expect(displayWidth('ab')).toBe(2)
+  })
+
+  it('leaves plain CJK behavior unchanged', () => {
+    const cells = toDisplayCells('日') // 日
+    expect(cells).toEqual(['日', WIDE_CHAR_PLACEHOLDER])
+  })
+})

package/src/__tests__/ascii-draw-arrows-coverage.test.ts

@@ -0,0 +1,224 @@
+// ============================================================================
+// ASCII arrow-drawing coverage — no-arrow edges, bidirectional arrowheads,
+// and upward labeled edges (src/ascii/draw-arrows.ts)
+// ============================================================================
+
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+import { unicodeArrowChar, asciiArrowChar } from '../draw-arrows.ts'
+import {
+  Up,
+  Down,
+  Left,
+  Right,
+  UpperRight,
+  UpperLeft,
+  LowerRight,
+  LowerLeft,
+  Middle,
+} from '../types.ts'
+
+describe('ASCII arrow drawing: no-arrow edges', () => {
+  it('renders a solid no-arrow edge without an arrowhead in unicode mode', () => {
+    const result = renderMermaidASCII(`
+      graph LR
+        A --- B
+    `)
+    expect(result).toContain('─')
+    expect(result).not.toMatch(/[►◄▲▼]/)
+  })
+
+  it('renders a solid no-arrow edge without an arrowhead in ascii mode', () => {
+    const result = renderMermaidASCII(
+      `
+      graph LR
+        A --- B
+    `,
+      { useAscii: true },
+    )
+    expect(result).not.toMatch(/[<>^v]/)
+  })
+
+  it('renders a dotted no-arrow edge without an arrowhead', () => {
+    const result = renderMermaidASCII(`
+      graph LR
+        A -.- B
+    `)
+    expect(result).toContain('┄')
+    expect(result).not.toMatch(/[►◄▲▼]/)
+  })
+
+  it('renders a thick no-arrow edge without an arrowhead', () => {
+    const result = renderMermaidASCII(`
+      graph LR
+        A === B
+    `)
+    expect(result).toContain('━')
+    expect(result).not.toMatch(/[►◄▲▼]/)
+  })
+
+  it('renders a vertical no-arrow edge without an arrowhead', () => {
+    const result = renderMermaidASCII(`
+      graph TD
+        A --- B
+    `)
+    expect(result).not.toMatch(/[►◄▲▼]/)
+  })
+
+  it('renders a labeled no-arrow edge', () => {
+    const result = renderMermaidASCII(`
+      graph LR
+        A ---|connects| B
+    `)
+    expect(result).toContain('connects')
+    expect(result).not.toMatch(/[►◄▲▼]/)
+  })
+})
+
+describe('ASCII arrow drawing: bidirectional edges', () => {
+  it('draws arrowheads at both ends of a solid bidirectional edge (LR, unicode)', () => {
+    const result = renderMermaidASCII(`
+      graph LR
+        A <--> B
+    `)
+    expect(result).toContain('◄')
+    expect(result).toContain('►')
+  })
+
+  it('draws arrowheads at both ends of a solid bidirectional edge (LR, ascii)', () => {
+    const result = renderMermaidASCII(
+      `
+      graph LR
+        A <--> B
+    `,
+      { useAscii: true },
+    )
+    expect(result).toContain('<')
+    expect(result).toContain('>')
+  })
+
+  it('draws arrowheads at both ends of a vertical bidirectional edge (TD, unicode)', () => {
+    const result = renderMermaidASCII(`
+      graph TD
+        A <--> B
+    `)
+    expect(result).toContain('▲')
+    expect(result).toContain('▼')
+  })
+
+  it('draws arrowheads at both ends of a vertical bidirectional edge (TD, ascii)', () => {
+    const result = renderMermaidASCII(
+      `
+      graph TD
+        A <--> B
+    `,
+      { useAscii: true },
+    )
+    expect(result).toContain('^')
+    expect(result).toContain('v')
+  })
+
+  it('draws arrowheads at both ends of a bidirectional edge reversed by layout (BT)', () => {
+    const result = renderMermaidASCII(`
+      graph BT
+        A <--> B
+    `)
+    expect(result).toContain('▲')
+    expect(result).toContain('▼')
+  })
+
+  it('draws arrowheads on a dotted bidirectional edge', () => {
+    const result = renderMermaidASCII(`
+      graph LR
+        A <-.-> B
+    `)
+    expect(result).toContain('┄')
+    expect(result).toContain('◄')
+    expect(result).toContain('►')
+  })
+
+  it('draws arrowheads on a thick bidirectional edge', () => {
+    const result = renderMermaidASCII(`
+      graph LR
+        A <==> B
+    `)
+    expect(result).toContain('━')
+    expect(result).toContain('◄')
+    expect(result).toContain('►')
+  })
+
+  it('draws both arrowheads on a bidirectional back-edge routed around other nodes', () => {
+    const result = renderMermaidASCII(`
+      graph LR
+        A --> B
+        B --> C
+        C <--> A
+    `)
+    expect(result).toContain('►')
+    expect(result).toContain('▲')
+  })
+
+  it('draws a labeled bidirectional edge', () => {
+    const result = renderMermaidASCII(`
+      graph LR
+        A <-->|sync| B
+    `)
+    expect(result).toContain('sync')
+    expect(result).toContain('◄')
+    expect(result).toContain('►')
+  })
+})
+
+describe('unicodeArrowChar / asciiArrowChar: direction-to-glyph mapping', () => {
+  // Direct unit coverage for every Direction, including LowerLeft — the
+  // ELK/pathfinder layout this module draws from only produces a diagonal
+  // direction via determinePath's rare Case-4 fallback, and every
+  // hand-written or gallery diagram that triggers it happens to need the
+  // target down-and-*right* of its source, never down-and-left. See
+  // issue #1062's drawArrowHead refactor.
+  it('maps all four orthogonal directions to filled triangles (unicode)', () => {
+    expect(unicodeArrowChar(Up)).toBe('▲')
+    expect(unicodeArrowChar(Down)).toBe('▼')
+    expect(unicodeArrowChar(Left)).toBe('◄')
+    expect(unicodeArrowChar(Right)).toBe('►')
+  })
+
+  it('maps all four diagonal directions to Arrows-block glyphs (unicode)', () => {
+    expect(unicodeArrowChar(UpperRight)).toBe('↗')
+    expect(unicodeArrowChar(UpperLeft)).toBe('↖')
+    expect(unicodeArrowChar(LowerRight)).toBe('↘')
+    expect(unicodeArrowChar(LowerLeft)).toBe('↙')
+  })
+
+  it('returns undefined for Middle (no arrowhead glyph)', () => {
+    expect(unicodeArrowChar(Middle)).toBeUndefined()
+    expect(asciiArrowChar(Middle)).toBeUndefined()
+  })
+
+  it('maps all four orthogonal directions to ASCII carets (ascii mode)', () => {
+    expect(asciiArrowChar(Up)).toBe('^')
+    expect(asciiArrowChar(Down)).toBe('v')
+    expect(asciiArrowChar(Left)).toBe('<')
+    expect(asciiArrowChar(Right)).toBe('>')
+  })
+
+  it('has no diagonal glyphs in ASCII mode', () => {
+    expect(asciiArrowChar(UpperRight)).toBeUndefined()
+    expect(asciiArrowChar(UpperLeft)).toBeUndefined()
+    expect(asciiArrowChar(LowerRight)).toBeUndefined()
+    expect(asciiArrowChar(LowerLeft)).toBeUndefined()
+  })
+})
+
+describe('ASCII arrow drawing: upward edge labels', () => {
+  it('offsets the label on an edge that routes upward', () => {
+    const result = renderMermaidASCII(`
+      graph TD
+        A --> B
+        B -->|back| A
+    `)
+    expect(result).toContain('back')
+    expect(result).toContain('▲')
+    expect(result).toContain('▼')
+  })
+})