@zombie-mermaid/ascii-renderer 3.0.0 → 3.2.0

package/src/__tests__/ascii-role-colors.test.ts

@@ -0,0 +1,328 @@
+/**
+ * Role-to-color mapping, checked glyph by glyph.
+ *
+ * The Playwright visual suite (`__tests__/visual/ascii-samples.visual.test.ts`)
+ * cannot see a line or arrowhead being recolored: both are a few thin pixels,
+ * under its font-jitter tolerance (recoloring every edge line failed 0 of 90
+ * samples; recoloring box borders failed 80 of 90). This test gives every role
+ * its own obviously different color and asserts, cell by cell, which role each
+ * glyph landed on, so a collapsed or swapped mapping fails without any pixels.
+ *
+ * The decisive property: `│` is a box side in a node (role `border`) and an
+ * edge segment between nodes (role `line`). With distinct role colors both
+ * colors must appear on that one glyph; if `line` is mapped to the border
+ * color (or the other way round) one of them disappears.
+ */
+import { describe, it, expect } from 'vitest'
+import {
+  renderMermaidASCII,
+  diagramColorsToAsciiTheme,
+  DEFAULT_ASCII_THEME,
+  type AsciiTheme,
+} from '@zombie-mermaid/ascii-renderer'
+import { CHART_ACCENT_FALLBACK } from '@zombie-mermaid/mermaid-parser'
+
+/** One distinct, easy-to-tell-apart color per role. */
+const ROLE_COLORS = {
+  fg: '#101010',
+  border: '#202020',
+  line: '#303030',
+  arrow: '#404040',
+  accent: '#505050',
+  corner: '#606060',
+  junction: '#707070',
+} as const
+
+type RoleName = keyof typeof ROLE_COLORS
+
+const ROLE_BY_HEX = new Map<string, RoleName>(
+  (Object.entries(ROLE_COLORS) as [RoleName, string][]).map(([role, hex]) => [
+    hex,
+    role,
+  ]),
+)
+
+const THEME: AsciiTheme = {
+  fg: ROLE_COLORS.fg,
+  border: ROLE_COLORS.border,
+  line: ROLE_COLORS.line,
+  arrow: ROLE_COLORS.arrow,
+  accent: ROLE_COLORS.accent,
+  bg: '#000000',
+  corner: ROLE_COLORS.corner,
+  junction: ROLE_COLORS.junction,
+}
+
+/** Corner and junction omitted: the default theme's colors fill them in. */
+const THEME_WITHOUT_OPTIONAL_ROLES: AsciiTheme = {
+  fg: ROLE_COLORS.fg,
+  border: ROLE_COLORS.border,
+  line: ROLE_COLORS.line,
+  arrow: ROLE_COLORS.arrow,
+  accent: ROLE_COLORS.accent,
+  bg: '#000000',
+}
+
+/** Role given to a glyph that carries no color at all. */
+const UNCOLORED = 'uncolored'
+
+interface Cell {
+  ch: string
+  /** Role name, the raw hex when it is none of ROLE_COLORS, or UNCOLORED. */
+  role: string
+}
+
+const decode = (s: string): string =>
+  s.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&')
+
+const hex2 = (n: number): string => n.toString(16).padStart(2, '0')
+
+/**
+ * Every non-space glyph in the output, with the role its color maps to, or
+ * UNCOLORED when the glyph carries no color. Uncolored glyphs must be kept: a
+ * role that loses its color emits its glyphs bare, and a parser that skipped
+ * them would let every per-glyph assertion pass with nothing left to check.
+ */
+function glyphCells(output: string, mode: 'html' | 'truecolor'): Cell[] {
+  const cells: Cell[] = []
+  const push = (hex: string | undefined, text: string): void => {
+    const role =
+      hex === undefined
+        ? UNCOLORED
+        : (ROLE_BY_HEX.get(hex.toLowerCase()) ?? hex.toLowerCase())
+    for (const ch of text) if (ch.trim() !== '') cells.push({ ch, role })
+  }
+  if (mode === 'html') {
+    // <span style="color:#rrggbb...">text</span>, or bare text between spans
+    const part =
+      /<span style="color:(#[0-9a-fA-F]{6})[^"]*">([^<]*)<\/span>|([^<]+)/g
+    for (const m of output.matchAll(part)) {
+      if (m[1] === undefined) push(undefined, decode(m[3]!))
+      else push(m[1], decode(m[2]!))
+    }
+  } else {
+    // ESC [ 38;2;R;G;B m <text> ESC [ 0 m, or bare text between them
+    const part = /\x1b\[38;2;(\d+);(\d+);(\d+)m([^\x1b]*)\x1b\[0m|([^\x1b]+)/g
+    for (const m of output.matchAll(part)) {
+      if (m[1] === undefined) push(undefined, m[5]!)
+      else push(`#${hex2(+m[1])}${hex2(+m[2]!)}${hex2(+m[3]!)}`, m[4]!)
+    }
+  }
+  return cells
+}
+
+const DIAGRAMS = {
+  'straight flowchart': 'graph TD\n  A[Start] -->|go| B[End]\n  B --> C[Done]',
+  // Bends in the routed edges, so the `corner` role is exercised.
+  'flowchart with bends':
+    'graph TD\n  A[Top] --> B[Left]\n  A --> C[Right]\n  B --> D[Join]\n  C --> D',
+  'left-to-right flowchart':
+    'graph LR\n  A[One] --> B[Two]\n  A --> C[Three]\n  B --> D[Four]\n  C --> D',
+  'sequence diagram':
+    'sequenceDiagram\n  participant Alice\n  participant Bob\n  Alice->>Bob: Hello\n  Bob-->>Alice: Hi',
+} as const
+
+const ARROWHEADS = new Set('▲▼◄►◀▶△▽◁▷')
+const ALNUM = /^[\p{L}\p{N}]$/u
+
+for (const mode of ['html', 'truecolor'] as const) {
+  describe(`ASCII role colors (${mode})`, () => {
+    const render = (src: string, theme: AsciiTheme = THEME): Cell[] =>
+      glyphCells(renderMermaidASCII(src, { theme, colorMode: mode }), mode)
+
+    for (const [name, src] of Object.entries(DIAGRAMS)) {
+      describe(name, () => {
+        const cells = render(src)
+
+        it('colors every glyph with one of the theme role colors', () => {
+          // Includes UNCOLORED: a glyph with no color at all is a failure too.
+          const stray = cells.filter((c) => !(c.role in ROLE_COLORS))
+          expect(stray).toEqual([])
+        })
+
+        it('draws letters and digits in the text color', () => {
+          const letters = cells.filter((c) => ALNUM.test(c.ch))
+          // Guard against passing with nothing to check.
+          expect(letters.length).toBeGreaterThan(0)
+          expect(letters.filter((c) => c.role !== 'fg')).toEqual([])
+        })
+
+        it('draws arrowheads in the arrow color, and only arrowheads', () => {
+          const arrowheads = cells.filter((c) => ARROWHEADS.has(c.ch))
+          expect(arrowheads.length).toBeGreaterThan(0)
+          expect(arrowheads.filter((c) => c.role !== 'arrow')).toEqual([])
+          expect(
+            cells.filter((c) => c.role === 'arrow' && !ARROWHEADS.has(c.ch)),
+          ).toEqual([])
+        })
+
+        it('uses a line color distinct from the border color', () => {
+          const roles = new Set(cells.map((c) => c.role))
+          expect(roles.has('line')).toBe(true)
+          expect(roles.has('border')).toBe(true)
+        })
+      })
+    }
+
+    it('draws a vertical stroke as border in a box and as line on an edge', () => {
+      const bars = new Set(
+        render(DIAGRAMS['straight flowchart'])
+          .filter((c) => c.ch === '│')
+          .map((c) => c.role),
+      )
+      expect(bars).toEqual(new Set(['border', 'line']))
+    })
+
+    it('draws box sides and corners in the border color', () => {
+      const boxGlyphs = new Set('┌┐└┘')
+      const cells = render(DIAGRAMS['straight flowchart'])
+      const boxCorners = cells.filter((c) => boxGlyphs.has(c.ch))
+      expect(boxCorners.length).toBeGreaterThan(0)
+      expect(boxCorners.every((c) => c.role === 'border')).toBe(true)
+    })
+
+    it('uses the junction color where an edge meets a box', () => {
+      const roles = render(DIAGRAMS['straight flowchart'])
+        .filter((c) => c.ch === '┬')
+        .map((c) => c.role)
+      expect(roles.length).toBeGreaterThan(0)
+      expect(new Set(roles)).toEqual(new Set(['junction']))
+    })
+
+    it('uses the corner color where a routed edge bends', () => {
+      const corners = render(DIAGRAMS['flowchart with bends']).filter(
+        (c) => c.role === 'corner',
+      )
+      expect(corners.length).toBeGreaterThan(0)
+      expect(corners.every((c) => '┐┘└┌'.includes(c.ch))).toBe(true)
+    })
+
+    it('uses the accent color for bars, and only for bars', () => {
+      const cells = render('xychart-beta\n  x-axis [A, B, C]\n  bar [3, 5, 2]')
+      const accent = cells.filter((c) => c.role === 'accent')
+      expect(accent.length).toBeGreaterThan(0)
+      expect(accent.every((c) => c.ch === '█')).toBe(true)
+    })
+
+    it("takes the default theme's corner and junction colors when the theme omits them", () => {
+      // renderMermaidASCII merges the given theme over DEFAULT_ASCII_THEME, so
+      // an omitted `corner` or `junction` gets the default theme's color (not
+      // the custom `line` or `border`).
+      const cells = render(
+        DIAGRAMS['flowchart with bends'],
+        THEME_WITHOUT_OPTIONAL_ROLES,
+      )
+      const defaults = new Set([
+        DEFAULT_ASCII_THEME.corner!.toLowerCase(),
+        DEFAULT_ASCII_THEME.junction!.toLowerCase(),
+      ])
+      // Cells that are none of the custom role colors can only be the
+      // defaulted corner and junction roles.
+      const defaulted = cells.filter((c) => !(c.role in ROLE_COLORS))
+      expect(defaulted.length).toBeGreaterThan(0)
+      expect(defaulted.every((c) => defaults.has(c.role))).toBe(true)
+      expect(defaulted.every((c) => '┐┘└┌┬┴├┤┼'.includes(c.ch))).toBe(true)
+      // The custom roles are unaffected by the omission.
+      expect(cells.some((c) => c.role === 'line')).toBe(true)
+      expect(cells.some((c) => c.role === 'border')).toBe(true)
+    })
+  })
+}
+
+// ---------------------------------------------------------------------------
+// The accent role. Charts do not take it from `getRoleColor`: xychart.ts has
+// its own series-color derivation (`getSeriesColors`) and its own copy of the
+// role-to-color mapping (`roleToHex`) for axes, grid and labels, so neither is
+// covered by the tests above.
+// ---------------------------------------------------------------------------
+
+const ONE_BAR_SERIES = 'xychart-beta\n  x-axis [A, B, C]\n  bar [3, 5, 2]'
+const TWO_BAR_SERIES =
+  'xychart-beta\n  title "Sales"\n  x-axis [Q1, Q2, Q3, Q4]\n  bar [200, 250, 300, 280]\n  bar [230, 280, 320, 350]'
+const TWO_LINE_SERIES =
+  'xychart-beta\n  x-axis [A, B, C, D]\n  line [3, 5, 2, 6]\n  line [1, 2, 4, 3]'
+
+/** A role-color theme without an accent, to exercise the chart's fallback. */
+const THEME_WITHOUT_ACCENT: AsciiTheme = {
+  fg: ROLE_COLORS.fg,
+  border: ROLE_COLORS.border,
+  line: ROLE_COLORS.line,
+  arrow: ROLE_COLORS.arrow,
+  bg: '#000000',
+  corner: ROLE_COLORS.corner,
+  junction: ROLE_COLORS.junction,
+}
+
+for (const mode of ['html', 'truecolor'] as const) {
+  describe(`xychart accent and role colors (${mode})`, () => {
+    const render = (src: string, theme: AsciiTheme = THEME): Cell[] =>
+      glyphCells(renderMermaidASCII(src, { theme, colorMode: mode }), mode)
+    const colorsOf = (cells: Cell[], glyphs: string): Set<string> =>
+      new Set(cells.filter((c) => glyphs.includes(c.ch)).map((c) => c.role))
+
+    it('draws a single bar series in exactly the accent color', () => {
+      const bars = render(ONE_BAR_SERIES).filter((c) => c.ch === '█')
+      expect(bars.length).toBeGreaterThan(0)
+      expect(colorsOf(bars, '█')).toEqual(new Set(['accent']))
+    })
+
+    it('draws series 0 in the accent and later series in a different derived color', () => {
+      const barColors = colorsOf(render(TWO_BAR_SERIES), '█')
+      expect(barColors.size).toBe(2)
+      expect(barColors.has('accent')).toBe(true)
+      // The other series is a derived shade: neither the accent nor any role color.
+      const derived = [...barColors].filter((r) => r !== 'accent')
+      expect(derived).toHaveLength(1)
+      expect(derived[0]! in ROLE_COLORS).toBe(false)
+      expect(derived[0]).toMatch(/^#[0-9a-f]{6}$/)
+    })
+
+    it('draws line series with the same accent and derived colors', () => {
+      const cells = render(TWO_LINE_SERIES)
+      const lineGlyphs = '─╭│╮╯╰'
+      const roles = colorsOf(cells, lineGlyphs)
+      expect(roles.has('accent')).toBe(true)
+      // Series 0 (accent), series 1 (derived), and the axis (border): the same
+      // glyphs appear in all three, so the accent is not the border color.
+      expect([...roles].some((r) => !(r in ROLE_COLORS))).toBe(true)
+      expect(roles.has('border')).toBe(true)
+      expect(ROLE_COLORS.accent).not.toBe(ROLE_COLORS.border)
+    })
+
+    it('draws the axes in the border color, the grid in the line color and labels in the text color', () => {
+      const cells = render(ONE_BAR_SERIES)
+      expect(colorsOf(cells, '│┤┼┬─')).toEqual(new Set(['border']))
+      expect(colorsOf(cells, '·')).toEqual(new Set(['line']))
+      const labels = cells.filter((c) => ALNUM.test(c.ch))
+      expect(labels.length).toBeGreaterThan(0)
+      expect(labels.every((c) => c.role === 'fg')).toBe(true)
+    })
+
+    it('falls back to the default chart blue when the theme has no accent', () => {
+      const bars = render(ONE_BAR_SERIES, THEME_WITHOUT_ACCENT).filter(
+        (c) => c.ch === '█',
+      )
+      expect(bars.length).toBeGreaterThan(0)
+      expect(colorsOf(bars, '█')).toEqual(
+        new Set([CHART_ACCENT_FALLBACK.toLowerCase()]),
+      )
+    })
+  })
+}
+
+describe('diagramColorsToAsciiTheme accent', () => {
+  const colors = { bg: '#000000', fg: '#ffffff' }
+
+  it('passes the accent through and uses it for arrowheads', () => {
+    const theme = diagramColorsToAsciiTheme({ ...colors, accent: '#123456' })
+    expect(theme.accent).toBe('#123456')
+    expect(theme.arrow).toBe('#123456')
+  })
+
+  it('derives the arrow color from fg and bg when there is no accent', () => {
+    const theme = diagramColorsToAsciiTheme(colors)
+    expect(theme.accent).toBeUndefined()
+    expect(theme.arrow).not.toBe(theme.fg)
+    expect(theme.arrow).toMatch(/^#[0-9a-fA-F]{6}$/)
+  })
+})

package/src/__tests__/ascii-subgraph-back-edge-1197.test.ts

@@ -0,0 +1,212 @@
+/**
+ * Regression tests for #1197: a flowchart whose edges form a cycle across
+ * sibling subgraphs (`A --> C --> E --> A`, each node in its own subgraph)
+ * threw `Node "A" has no gridCoord` from `renderMermaidASCII`.
+ *
+ * Cause: `createMapping` seeds a cycle that has no true root with a
+ * pseudo-root, then dropped any root with an incoming edge from outside its
+ * own subgraph — which, in a cross-subgraph cycle, is always the pseudo-root,
+ * so nothing seeded the component and no node was ever placed.
+ */
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+import { parseMermaid } from '../../../../src/parser.ts'
+import { convertToAsciiGraph } from '../converter.ts'
+import { createMapping, gridToDrawingCoord } from '../grid.ts'
+import {
+  DEFAULT_PADDING_X,
+  DEFAULT_PADDING_Y,
+  DEFAULT_BOX_BORDER_PADDING,
+} from '../types.ts'
+
+const lines = (s: string): string[] => s.split('\n')
+
+const cases: Record<string, string> = {}
+for (const dir of ['TD', 'LR']) {
+  for (const lbl of [false, true]) {
+    const l = (s: string): string => (lbl ? `|${s}|` : '')
+    const tag = `${dir}${lbl ? ' labelled' : ''}`
+    cases[`two sibling subgraphs ${tag}`] =
+      `graph ${dir}\nsubgraph S1[One]\nA\nend\nsubgraph S2[Two]\nB\nend\nA -->${l('x')} B\nB -->${l('y')} A`
+    cases[`three sibling subgraphs ${tag}`] =
+      `graph ${dir}\nsubgraph S1[One]\nA\nend\nsubgraph S2[Two]\nC\nend\nsubgraph S3[Three]\nE\nend\nA -->${l('x')} C\nC -->${l('y')} E\nE -->${l('z')} A`
+    cases[`nested subgraphs ${tag}`] =
+      `graph ${dir}\nsubgraph O[Outer]\nsubgraph I1[In1]\nA\nend\nsubgraph I2[In2]\nB\nend\nend\nsubgraph P[Pee]\nC\nend\nA -->${l('x')} B\nB --> C\nC --> A`
+  }
+}
+
+/** Node ids declared as a bare line or edge endpoint, per the sources above. */
+const NODES = ['A', 'B', 'C', 'E']
+
+describe('#1197: cycle across sibling subgraphs', () => {
+  for (const [name, src] of Object.entries(cases)) {
+    describe(name, () => {
+      for (const useAscii of [false, true]) {
+        it(`renders without throwing, one box per node (${useAscii ? 'ascii' : 'unicode'})`, () => {
+          const out = renderMermaidASCII(src, { useAscii, colorMode: 'none' })
+          for (const id of NODES) {
+            if (!new RegExp(`^\\s*${id}\\b`, 'm').test(src)) continue
+            // each node label appears exactly once (titles never contain it)
+            const hits = out.match(new RegExp(`\\s${id}\\s`, 'g')) ?? []
+            expect(hits, `node ${id}`).toHaveLength(1)
+          }
+        })
+      }
+      // A mutual `A --> B`, `B --> A` pair with labels shares one corridor and
+      // the label overwrites the next frame's title — an independent
+      // edge-routing defect that also reproduces on main when an unrelated root
+      // seeds the layout, so it is not asserted here.
+      const mutualLabelled =
+        name.startsWith('two sibling') && name.endsWith('labelled')
+      if (!mutualLabelled) {
+        it('every declared subgraph title is drawn', () => {
+          const out = renderMermaidASCII(src, { colorMode: 'none' })
+          for (const m of src.matchAll(/subgraph \w+\[(\w+)\]/g)) {
+            expect(out).toContain(m[1]!)
+          }
+        })
+      }
+    })
+  }
+
+  it('the issue example (Layer One/Two/Three) renders every box inside its subgraph frame', () => {
+    const src = `graph TD
+subgraph L1[Layer One]
+  A
+end
+subgraph L2[Layer Two]
+  C
+end
+subgraph L3[Layer Three]
+  E
+end
+A --> C
+C --> E
+E --> A`
+    const out = lines(renderMermaidASCII(src, { colorMode: 'none' }))
+    for (const [title, id] of [
+      ['Layer One', 'A'],
+      ['Layer Two', 'C'],
+      ['Layer Three', 'E'],
+    ] as const) {
+      // a forward edge entering the frame may split the title (#1222)
+      const titleRow = out.findIndex((ln) =>
+        ln.replace(/│/g, ' ').includes(title),
+      )
+      const nodeRow = out.findIndex((ln) =>
+        new RegExp(`│\\s+${id}\\s+[│├]`).test(ln),
+      )
+      expect(titleRow, title).toBeGreaterThanOrEqual(0)
+      expect(nodeRow, id).toBeGreaterThan(titleRow)
+      // the next subgraph title (if any) comes after the node: box is inside its own frame
+      const nextTitleRow = out.findIndex(
+        (ln, i) => i > titleRow && /Layer (One|Two|Three)/.test(ln),
+      )
+      if (nextTitleRow !== -1) expect(nodeRow).toBeLessThan(nextTitleRow)
+    }
+  })
+})
+
+/**
+ * Defects found reviewing the #1197 render in a real terminal: the back-edge
+ * ran up through the interior of the frames it merely passes (so it read as
+ * belonging to them) and through their titles. Mermaid routes it outside.
+ */
+function drawnEdgeCells(src: string) {
+  const graph = convertToAsciiGraph(parseMermaid(src), {
+    useAscii: false,
+    paddingX: DEFAULT_PADDING_X,
+    paddingY: DEFAULT_PADDING_Y,
+    boxBorderPadding: DEFAULT_BOX_BORDER_PADDING,
+    graphDirection: /^\s*graph\s+LR/.test(src) ? 'LR' : 'TD',
+  })
+  createMapping(graph)
+  const out: { edge: string; x: number; y: number; sg: string }[] = []
+  for (const edge of graph.edges) {
+    const pts = edge.path.map((c) => gridToDrawingCoord(graph, c))
+    for (let i = 1; i < pts.length; i++) {
+      const a = pts[i - 1]!
+      const b = pts[i]!
+      const n = Math.max(Math.abs(a.x - b.x), Math.abs(a.y - b.y))
+      for (let k = 0; k <= n; k++) {
+        const x = a.x + Math.sign(b.x - a.x) * Math.min(k, Math.abs(b.x - a.x))
+        const y = a.y + Math.sign(b.y - a.y) * Math.min(k, Math.abs(b.y - a.y))
+        for (const sg of graph.subgraphs) {
+          // Unrelated frame: neither endpoint lives in it.
+          if (sg.nodes.includes(edge.from) || sg.nodes.includes(edge.to)) {
+            continue
+          }
+          if (x > sg.minX && x < sg.maxX && y > sg.minY && y < sg.maxY) {
+            out.push({
+              edge: `${edge.from.name}->${edge.to.name}`,
+              x,
+              y,
+              sg: sg.name,
+            })
+          }
+        }
+      }
+    }
+  }
+  return out
+}
+
+const LAYERS = (dir: string): string => `graph ${dir}
+subgraph L1[Layer One]
+  A
+end
+subgraph L2[Layer Two]
+  C
+end
+subgraph L3[Layer Three]
+  E
+end
+A --> C
+C --> E
+E --> A`
+
+const outsideCases: Record<string, string> = {
+  ...cases,
+  'issue example TD (long titles)': LAYERS('TD'),
+  'issue example LR (long titles)': LAYERS('LR'),
+  'nested, long titles': `graph TD
+subgraph O[Outer Frame]
+subgraph I1[Inner One]
+A
+end
+subgraph I2[Inner Two]
+B
+end
+end
+subgraph P[Peer Frame]
+C
+end
+A --> B
+B --> C
+C --> A`,
+  'four layers, long titles': `graph TD
+subgraph L1[Layer One]
+  A
+end
+subgraph L2[Layer Two]
+  B
+end
+subgraph L3[Layer Three]
+  C
+end
+subgraph L4[Layer Four]
+  D
+end
+A --> B
+B --> C
+C --> D
+D --> A`,
+}
+
+describe('#1197: edges stay out of frames they neither start nor end in', () => {
+  for (const [name, src] of Object.entries(outsideCases)) {
+    it(`no edge cell (hence no title overdraw) inside an unrelated frame: ${name}`, () => {
+      expect(drawnEdgeCells(src)).toEqual([])
+    })
+  }
+})

package/src/__tests__/ascii-subgraph-label-border-clip.test.ts

@@ -121,13 +121,15 @@ describe('ASCII subgraph label does not truncate a label wider than its child no
   D --> F[Sink]`
     const output = renderMermaidASCII(mermaid)
 
-    expect(output).toContain('Processing Pipeline')
+    // A forward edge entering the frame may split the title on its space (#1222).
+    const flat = output.replace(/│/g, ' ')
+    expect(flat).toContain('Processing Pipeline')
     expect(output).not.toContain('Processing Pipe│')
     expect(output).not.toContain('Processing Pipe\n')
 
     const titleLine = output
       .split('\n')
-      .find((l) => l.includes('Processing Pipeline'))
+      .find((l) => l.replace(/│/g, ' ').includes('Processing Pipeline'))
     expect(titleLine).toBeDefined()
     // The label sits fully inside the border on both sides, not clipped
     // against (or spilling onto) either one.

package/src/__tests__/ascii-subgraph-title-edge-1222.test.ts

@@ -0,0 +1,106 @@
+/**
+ * Regression tests for #1222 (follow-up to #1197): a forward edge entering a
+ * titled subgraph frame from above must stay continuous through the title
+ * row. The title used to be drawn on top of the edge column (titles are
+ * centred, the entry column usually is too), so the edge showed a junction
+ * tick on the border, vanished behind the title, and resumed below.
+ *
+ * Titles now slide aside, or split on a space ("Layer│Three"), instead of
+ * covering the stroke. When neither is possible without dropping a letter the
+ * title still wins and stays intact (asserted separately).
+ */
+import { describe, it, expect } from 'vitest'
+import { renderMermaidASCII } from '@zombie-mermaid/ascii-renderer'
+
+interface Case {
+  name: string
+  src: string
+  /** Title text left / right of the stroke on the title row ('' = no split). */
+  left: string
+  right: string
+}
+
+const chain = (second: string, third: string): string =>
+  `graph TD\nsubgraph L1[One]\nA\nend\nsubgraph L2[${second}]\nC\nend\nsubgraph L3[${third}]\nE\nend\nA --> C\nC --> E\nE --> A`
+
+const cases: Case[] = [
+  {
+    name: 'title splits on its centre space',
+    src: chain('x', 'Layer Three'),
+    left: 'Layer',
+    right: 'Three',
+  },
+  {
+    name: 'a title filling the frame widens it so the stroke lands on a space',
+    src: chain('Layer Two', 'Layer Three'),
+    left: 'Layer',
+    right: 'Two',
+  },
+  {
+    name: 'short title slides aside',
+    src: 'graph TD\nsubgraph O[Outer]\nsubgraph I1[In1]\nA\nend\nsubgraph I2[In2]\nB\nend\nend\nsubgraph P[Pee]\nC\nend\nA --> B\nB --> C\nC --> A',
+    left: 'In2',
+    right: '',
+  },
+  {
+    name: 'architecture-beta group title splits on its space',
+    src: 'architecture-beta\ngroup g1(cloud)[Group One]\ngroup g2(cloud)[Group Two]\ngroup g3(cloud)[Group Three]\nservice a(server)[A] in g1\nservice b(server)[B] in g2\nservice c(server)[C] in g3\na:B --> T:b\nb:B --> T:c',
+    left: 'Group',
+    right: 'Three',
+  },
+]
+
+const STROKES = new Set(['│', '|'])
+const ARROWS = new Set(['▼', 'v'])
+
+describe('#1222: forward edge stays continuous through a frame title row', () => {
+  for (const c of cases) {
+    for (const useAscii of [false, true]) {
+      it(`${c.name} (${useAscii ? 'ascii' : 'unicode'})`, () => {
+        const stroke = useAscii ? '|' : '│'
+        const lines = renderMermaidASCII(c.src, {
+          useAscii,
+          colorMode: 'none',
+        }).split('\n')
+        const title = lines.findIndex((l) =>
+          l.includes(`${c.left}${c.right ? stroke : ''}${c.right}`),
+        )
+        // the title is intact on one row, with at most the stroke inside it
+        expect(title, 'title row present and not garbled').toBeGreaterThan(0)
+        const edgeCol = lines[title]!.indexOf(c.left) + c.left.length
+        // the border tick above, the title row, then every row down to the arrow
+        expect(
+          STROKES.has(lines[title - 1]![edgeCol]!) ||
+            lines[title - 1]![edgeCol] === '┼',
+        ).toBe(true)
+        expect(STROKES.has(lines[title]![edgeCol]!)).toBe(true)
+        let j = title + 1
+        while (!ARROWS.has(lines[j]![edgeCol]!)) {
+          expect(STROKES.has(lines[j]![edgeCol]!), `row ${j}`).toBe(true)
+          j++
+          expect(j - title).toBeLessThan(8)
+        }
+      })
+    }
+  }
+
+  it('slides a short title aside, leaving one clear column before the stroke', () => {
+    const src =
+      'graph TD\nsubgraph F[Frontend]\nA[React App] --> B[State Manager]\nend\nsubgraph K[Backend]\nC[API Server]\nend\nB --> C'
+    const out = renderMermaidASCII(src, { colorMode: 'none' })
+    expect(out).toContain('│ Backend │')
+  })
+
+  it('does not resize a frame that has no collision', () => {
+    const src =
+      'graph TD\nsubgraph F[Frontend]\nA[React App] --> B[State Manager]\nend\nsubgraph K[Backend]\nC[API Server]\nend\nB --> C'
+    const out = renderMermaidASCII(src, { colorMode: 'none' })
+    expect(out.split('\n')[0]).toBe('┌───────────────────┐')
+  })
+
+  it('leaves LR frames alone (edges enter on the node row)', () => {
+    const src = chain('Layer Two', 'Layer Three').replace('TD', 'LR')
+    const out = renderMermaidASCII(src, { colorMode: 'none' })
+    expect(out).not.toMatch(/Layer│/)
+  })
+})