@zombie-mermaid/ascii-renderer 2.2.1

package/src/draw-lines.ts

@@ -0,0 +1,174 @@
+// ============================================================================
+// ASCII renderer — line drawing (8-directional lines on the canvas)
+//
+// Split out of draw.ts.
+// ============================================================================
+
+import type { Canvas, DrawingCoord, AsciiEdgeStyle } from './types.ts'
+import {
+  Up,
+  Down,
+  Left,
+  Right,
+  UpperLeft,
+  UpperRight,
+  LowerLeft,
+  LowerRight,
+} from './types.ts'
+import { determineDirection, dirEquals } from './edge-routing.ts'
+import { write } from './canvas.ts'
+
+/**
+ * Line character sets for different edge styles.
+ * Each style has horizontal, vertical, and diagonal characters for both
+ * Unicode (box-drawing) and ASCII (basic punctuation) modes.
+ *
+ * Unicode dotted: ┄ (horizontal), ┆ (vertical) — U+2504, U+2506
+ * Unicode thick:  ━ (horizontal), ┃ (vertical) — U+2501, U+2503
+ */
+/**
+ * Line character sets for different edge styles.
+ * Only horizontal and vertical characters - no diagonals.
+ * All edges use orthogonal Manhattan routing (90° bends only).
+ */
+const LINE_CHARS = {
+  solid: {
+    h: { unicode: '─', ascii: '-' },
+    v: { unicode: '│', ascii: '|' },
+  },
+  dotted: {
+    h: { unicode: '┄', ascii: '.' },
+    v: { unicode: '┆', ascii: ':' },
+  },
+  thick: {
+    h: { unicode: '━', ascii: '=' },
+    v: { unicode: '┃', ascii: '‖' },
+  },
+  /*
+   * `A ~~~ B` — an invisible link. It routes and reserves grid cells like any
+   * other edge (so the nodes it connects stay ranked apart), but every cell it
+   * would occupy is written as a space, leaving no visible line.
+   */
+  invisible: {
+    h: { unicode: ' ', ascii: ' ' },
+    v: { unicode: ' ', ascii: ' ' },
+  },
+} as const
+
+/**
+ * Draw a line between two drawing coordinates using orthogonal Manhattan routing.
+ * Returns the list of coordinates that were drawn on.
+ * offsetFrom/offsetTo control how many cells to skip at the start/end.
+ *
+ * All lines use 90° bends only - no diagonal lines are produced.
+ * For diagonal directions, uses horizontal-first routing (draws horizontal
+ * segment, then vertical segment).
+ */
+export function drawLine(
+  canvas: Canvas,
+  from: DrawingCoord,
+  to: DrawingCoord,
+  offsetFrom: number,
+  offsetTo: number,
+  useAscii: boolean,
+  style: AsciiEdgeStyle = 'solid',
+): DrawingCoord[] {
+  const dir = determineDirection(from, to)
+  const drawnCoords: DrawingCoord[] = []
+
+  // Select character set based on style (horizontal and vertical only)
+  const chars = LINE_CHARS[style]
+  const hChar = useAscii ? chars.h.ascii : chars.h.unicode
+  const vChar = useAscii ? chars.v.ascii : chars.v.unicode
+
+  // Pure vertical directions
+  if (dirEquals(dir, Up)) {
+    for (let y = from.y - offsetFrom; y >= to.y - offsetTo; y--) {
+      drawnCoords.push({ x: from.x, y })
+      write(canvas, from.x, y, vChar)
+    }
+  } else if (dirEquals(dir, Down)) {
+    for (let y = from.y + offsetFrom; y <= to.y + offsetTo; y++) {
+      drawnCoords.push({ x: from.x, y })
+      write(canvas, from.x, y, vChar)
+    }
+  }
+  // Pure horizontal directions
+  else if (dirEquals(dir, Left)) {
+    for (let x = from.x - offsetFrom; x >= to.x - offsetTo; x--) {
+      drawnCoords.push({ x, y: from.y })
+      write(canvas, x, from.y, hChar)
+    }
+  } else if (dirEquals(dir, Right)) {
+    for (let x = from.x + offsetFrom; x <= to.x + offsetTo; x++) {
+      drawnCoords.push({ x, y: from.y })
+      write(canvas, x, from.y, hChar)
+    }
+  }
+  // Diagonal directions: use Manhattan routing (horizontal-first, then vertical)
+  // UpperLeft: go left first, then up
+  else if (dirEquals(dir, UpperLeft)) {
+    // Horizontal segment: from.x -> to.x (going left)
+    for (let x = from.x - offsetFrom; x >= to.x; x--) {
+      drawnCoords.push({ x, y: from.y })
+      write(canvas, x, from.y, hChar)
+    }
+    // Vertical segment: from.y -> to.y (going up)
+    for (let y = from.y - 1; y >= to.y - offsetTo; y--) {
+      drawnCoords.push({ x: to.x, y })
+      write(canvas, to.x, y, vChar)
+    }
+  }
+  // UpperRight: go right first, then up
+  else if (dirEquals(dir, UpperRight)) {
+    // Horizontal segment: from.x -> to.x (going right)
+    for (let x = from.x + offsetFrom; x <= to.x; x++) {
+      drawnCoords.push({ x, y: from.y })
+      write(canvas, x, from.y, hChar)
+    }
+    // Vertical segment: from.y -> to.y (going up)
+    for (let y = from.y - 1; y >= to.y - offsetTo; y--) {
+      drawnCoords.push({ x: to.x, y })
+      write(canvas, to.x, y, vChar)
+    }
+  }
+  // LowerLeft: go left first, then down
+  else if (dirEquals(dir, LowerLeft)) {
+    // Horizontal segment: from.x -> to.x (going left)
+    for (let x = from.x - offsetFrom; x >= to.x; x--) {
+      drawnCoords.push({ x, y: from.y })
+      write(canvas, x, from.y, hChar)
+    }
+    // Vertical segment: from.y -> to.y (going down)
+    for (let y = from.y + 1; y <= to.y + offsetTo; y++) {
+      drawnCoords.push({ x: to.x, y })
+      write(canvas, to.x, y, vChar)
+    }
+  }
+  // LowerRight: go right first, then down
+  // Special case: if x difference is small (1), draw straight vertical at from.x
+  // This keeps edges visually aligned with the source node
+  else if (dirEquals(dir, LowerRight)) {
+    const dx = to.x - from.x
+    if (dx <= 1) {
+      // Draw vertical line at from.x (source's x-coordinate)
+      for (let y = from.y + offsetFrom; y <= to.y + offsetTo; y++) {
+        drawnCoords.push({ x: from.x, y })
+        write(canvas, from.x, y, vChar)
+      }
+    } else {
+      // Horizontal segment: from.x -> to.x (going right)
+      for (let x = from.x + offsetFrom; x <= to.x; x++) {
+        drawnCoords.push({ x, y: from.y })
+        write(canvas, x, from.y, hChar)
+      }
+      // Vertical segment: from.y -> to.y (going down)
+      for (let y = from.y + 1; y <= to.y + offsetTo; y++) {
+        drawnCoords.push({ x: to.x, y })
+        write(canvas, to.x, y, vChar)
+      }
+    }
+  }
+
+  return drawnCoords
+}

package/src/draw-subgraphs.ts

@@ -0,0 +1,108 @@
+// ============================================================================
+// ASCII renderer — subgraph drawing (border rectangle + label)
+//
+// Split out of draw.ts.
+// ============================================================================
+
+import type {
+  Canvas,
+  DrawingCoord,
+  AsciiGraph,
+  AsciiSubgraph,
+} from './types.ts'
+import { mkCanvas, write } from './canvas.ts'
+import { splitLines } from './multiline-utils.ts'
+import { displayWidth, toDisplayCells } from './display-width.ts'
+
+/** Draw a subgraph border rectangle. */
+export function drawSubgraphBox(sg: AsciiSubgraph, graph: AsciiGraph): Canvas {
+  const width = sg.maxX - sg.minX
+  const height = sg.maxY - sg.minY
+  if (width <= 0 || height <= 0) return mkCanvas(0, 0)
+
+  const from: DrawingCoord = { x: 0, y: 0 }
+  const to: DrawingCoord = { x: width, y: height }
+  const canvas = mkCanvas(width, height)
+
+  if (!graph.config.useAscii) {
+    for (let x = from.x + 1; x < to.x; x++) write(canvas, x, from.y, '─')
+    for (let x = from.x + 1; x < to.x; x++) write(canvas, x, to.y, '─')
+    for (let y = from.y + 1; y < to.y; y++) write(canvas, from.x, y, '│')
+    for (let y = from.y + 1; y < to.y; y++) write(canvas, to.x, y, '│')
+    write(canvas, from.x, from.y, '┌')
+    write(canvas, to.x, from.y, '┐')
+    write(canvas, from.x, to.y, '└')
+    write(canvas, to.x, to.y, '┘')
+  } else {
+    for (let x = from.x + 1; x < to.x; x++) write(canvas, x, from.y, '-')
+    for (let x = from.x + 1; x < to.x; x++) write(canvas, x, to.y, '-')
+    for (let y = from.y + 1; y < to.y; y++) write(canvas, from.x, y, '|')
+    for (let y = from.y + 1; y < to.y; y++) write(canvas, to.x, y, '|')
+    write(canvas, from.x, from.y, '+')
+    write(canvas, to.x, from.y, '+')
+    write(canvas, from.x, to.y, '+')
+    write(canvas, to.x, to.y, '+')
+  }
+
+  return canvas
+}
+
+/**
+ * A single cell of a subgraph title's own footprint — including cells whose
+ * character is a literal space (e.g. the space inside "US West Region").
+ * Callers use this to force those cells to win over whatever was already
+ * drawn underneath (see the caller in `draw.ts` for why: `mergeCanvases`
+ * treats overlay spaces as transparent, which lets a connector line drawn
+ * earlier show through a label's internal spaces — issue #447).
+ */
+export interface SubgraphLabelCell {
+  x: number
+  y: number
+}
+
+/** Draw a subgraph label centered in its header area. Supports multi-line labels. */
+// `_graph` isn't read here but is kept to match the `(sg, graph)` signature
+// shared by the other `draw*` subgraph helpers in this file.
+export function drawSubgraphLabel(
+  sg: AsciiSubgraph,
+  _graph: AsciiGraph,
+): [Canvas, DrawingCoord, SubgraphLabelCell[]] {
+  const width = sg.maxX - sg.minX
+  const height = sg.maxY - sg.minY
+  if (width <= 0 || height <= 0) return [mkCanvas(0, 0), { x: 0, y: 0 }, []]
+
+  const canvas = mkCanvas(width, height)
+  const footprint: SubgraphLabelCell[] = []
+
+  // Support multi-line subgraph labels
+  const lines = splitLines(sg.name)
+
+  // Start at row 1 inside subgraph, expand downward for multiple lines
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]!
+    const labelY = 1 + i
+    // Center the label within the interior columns (1..width-1, i.e.
+    // excluding both border columns). When the interior width minus the
+    // label width is odd, the leftover column can't be split evenly — bias
+    // it to the right (keep >=1 space on the left) so the title never hugs
+    // the left border. Using floor(width/2) - floor(label/2) here instead
+    // biases the leftover to the left, which can zero out the left padding
+    // entirely for even-length labels in an odd-width interior.
+    let labelX = 1 + Math.ceil((width - 1 - displayWidth(line)) / 2)
+    if (labelX < 1) labelX = 1
+
+    // Unlike `write()`'s own bounds (inclusive of the canvas edge — correct
+    // for the border-drawing calls in `drawSubgraphBox` above, which write
+    // the border itself at x == width / y == height), the label must stay
+    // strictly inside the border, so this loop enforces the tighter,
+    // exclusive bound itself rather than relying on `write()`'s clip.
+    const cells = toDisplayCells(line)
+    for (let j = 0; j < cells.length; j++) {
+      if (labelX + j >= width || labelY >= height) continue
+      write(canvas, labelX + j, labelY, cells[j]!)
+      footprint.push({ x: labelX + j, y: labelY })
+    }
+  }
+
+  return [canvas, { x: sg.minX, y: sg.minY }, footprint]
+}

package/src/draw.ts

@@ -0,0 +1,350 @@
+// ============================================================================
+// ASCII renderer — drawing operations
+//
+// Ported from AlexanderGrooff/mermaid-ascii cmd/draw.go + cmd/arrow.go.
+// Contains the top-level draw orchestrator (drawGraph) that layers node,
+// edge, bundle, and subgraph canvases together, plus the character-role
+// tracking used for colored output.
+//
+// The individual drawing operations live in sibling modules, split out for
+// navigability:
+//   - draw-boxes.ts      node/box drawing, multi-section boxes
+//   - draw-lines.ts      8-directional line drawing
+//   - draw-arrows.ts     arrow paths, corners, arrowheads, labels
+//   - draw-bundles.ts    bundled (fan-in/fan-out) edge drawing
+//   - draw-subgraphs.ts  subgraph border + label drawing
+// This file re-exports their public entry points so `./draw.ts` remains a
+// stable import path for the rest of the ASCII renderer.
+// ============================================================================
+
+import type {
+  Canvas,
+  DrawingCoord,
+  AsciiGraph,
+  AsciiSubgraph,
+  EdgeBundle,
+} from './types.ts'
+import { mergeCanvases, firstClaimWins, write } from './canvas.ts'
+import type { RoleCanvas, CharRole } from './types.ts'
+import { setRole } from './canvas.ts'
+import { drawArrow } from './draw-arrows.ts'
+import {
+  drawBundledEdgeSegment,
+  drawBundleSharedPath,
+  drawBundleArrowhead,
+  drawBundleArrowheadStart,
+  drawBundledEdgeArrowhead,
+  drawBundledEdgeArrowheadStart,
+  drawJunctionCharacter,
+} from './draw-bundles.ts'
+import { drawSubgraphBox, drawSubgraphLabel } from './draw-subgraphs.ts'
+
+export {
+  drawNode,
+  drawBox,
+  drawMultiBox,
+  measureMultiBox,
+  classifyBoxChar,
+} from './draw-boxes.ts'
+export { drawLine } from './draw-lines.ts'
+export { drawArrow, drawSubgraphBox, drawSubgraphLabel }
+
+// ============================================================================
+// Top-level draw orchestrator
+// ============================================================================
+
+/** Sort subgraphs by nesting depth (shallowest first) for correct layered rendering. */
+function sortSubgraphsByDepth(subgraphs: AsciiSubgraph[]): AsciiSubgraph[] {
+  function getDepth(sg: AsciiSubgraph): number {
+    return sg.parent === null ? 0 : 1 + getDepth(sg.parent)
+  }
+  const sorted = [...subgraphs]
+  sorted.sort((a, b) => getDepth(a) - getDepth(b))
+  return sorted
+}
+
+// ============================================================================
+// Role tracking helpers for colored output
+// ============================================================================
+
+/**
+ * Fill roles for all non-space characters in a canvas region.
+ * Used after drawing a layer to record what role those characters have.
+ */
+function fillRolesFromCanvas(
+  roleCanvas: RoleCanvas,
+  canvas: Canvas,
+  offset: DrawingCoord,
+  role: CharRole,
+): void {
+  for (let x = 0; x < canvas.length; x++) {
+    for (let y = 0; y < (canvas[0]?.length ?? 0); y++) {
+      const char = canvas[x]?.[y]
+      if (char && char !== ' ') {
+        const rx = x + offset.x
+        const ry = y + offset.y
+        // Use setRole which auto-expands the role canvas if needed
+        if (rx >= 0 && ry >= 0) {
+          setRole(roleCanvas, rx, ry, role)
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Fill roles for multiple canvases with the same role.
+ */
+function fillRolesFromCanvases(
+  roleCanvas: RoleCanvas,
+  canvases: Canvas[],
+  offset: DrawingCoord,
+  role: CharRole,
+): void {
+  for (const canvas of canvases) {
+    fillRolesFromCanvas(roleCanvas, canvas, offset, role)
+  }
+}
+
+/**
+ * Special handling for node boxes: border chars get 'border' role, text gets 'text' role.
+ * Detects text by checking if character is alphanumeric or common punctuation.
+ */
+function fillRolesForNodeBox(
+  roleCanvas: RoleCanvas,
+  canvas: Canvas,
+  offset: DrawingCoord,
+): void {
+  const isBorderChar = (c: string) => /^[┌┐└┘├┤┬┴┼│─╭╮╰╯+\-|.':]$/.test(c)
+
+  for (let x = 0; x < canvas.length; x++) {
+    for (let y = 0; y < (canvas[0]?.length ?? 0); y++) {
+      const char = canvas[x]?.[y]
+      if (char && char !== ' ') {
+        const rx = x + offset.x
+        const ry = y + offset.y
+        // Use setRole which auto-expands the role canvas if needed
+        if (rx >= 0 && ry >= 0) {
+          setRole(roleCanvas, rx, ry, isBorderChar(char) ? 'border' : 'text')
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Main draw function — renders the entire graph onto the canvas.
+ * Drawing order matters for correct layering:
+ * 1. Subgraph borders (bottom layer)
+ * 2. Node boxes
+ * 3. Edge paths (lines)
+ * 4. Edge corners
+ * 5. Arrowheads
+ * 6. Box-start junctions
+ * 7. Edge labels
+ * 8. Subgraph labels (top layer)
+ *
+ * Also fills the roleCanvas with character roles for colored output.
+ */
+export function drawGraph(graph: AsciiGraph): Canvas {
+  const useAscii = graph.config.useAscii
+  const zero: DrawingCoord = { x: 0, y: 0 }
+
+  // Draw subgraph borders
+  const sortedSgs = sortSubgraphsByDepth(graph.subgraphs)
+  for (const sg of sortedSgs) {
+    const sgCanvas = drawSubgraphBox(sg, graph)
+    const offset: DrawingCoord = { x: sg.minX, y: sg.minY }
+    graph.canvas = mergeCanvases(graph.canvas, offset, useAscii, sgCanvas)
+    // Subgraph borders get 'border' role
+    fillRolesFromCanvas(graph.roleCanvas, sgCanvas, offset, 'border')
+  }
+
+  // Draw node boxes
+  for (const node of graph.nodes) {
+    if (!node.drawn && node.drawingCoord && node.drawing) {
+      graph.canvas = mergeCanvases(
+        graph.canvas,
+        node.drawingCoord,
+        useAscii,
+        node.drawing,
+      )
+      // Node boxes: detect border vs text characters
+      fillRolesForNodeBox(graph.roleCanvas, node.drawing, node.drawingCoord)
+      node.drawn = true
+    }
+  }
+
+  // Collect all edge drawing layers
+  const lineCanvases: Canvas[] = []
+  const cornerCanvases: Canvas[] = []
+  const arrowHeadEndCanvases: Canvas[] = []
+  const arrowHeadStartCanvases: Canvas[] = []
+  const boxStartCanvases: Canvas[] = []
+  const labelCanvases: Canvas[] = []
+  const junctionCanvases: Canvas[] = []
+
+  // Track which bundles have been processed (to draw shared paths only once)
+  const processedBundles = new Set<EdgeBundle>()
+
+  for (const edge of graph.edges) {
+    // Handle bundled edges specially
+    if (edge.bundle && edge.pathToJunction) {
+      const bundle = edge.bundle
+
+      // Draw this edge's individual path (source → junction for fan-in, junction → target for fan-out)
+      const [pathC, boxStartC, , , cornersC, labelC] = drawBundledEdgeSegment(
+        graph,
+        edge,
+        bundle,
+      )
+      lineCanvases.push(pathC)
+      cornerCanvases.push(cornersC)
+      boxStartCanvases.push(boxStartC)
+      labelCanvases.push(labelC)
+
+      // For fan-in bundles, draw a start arrowhead at each individual source
+      if (bundle.type === 'fan-in' && edge.hasArrowStart) {
+        const arrowHeadStartC = drawBundledEdgeArrowheadStart(graph, edge)
+        arrowHeadStartCanvases.push(arrowHeadStartC)
+      }
+
+      // Draw the bundle's shared path and arrowhead only once
+      if (!processedBundles.has(bundle)) {
+        processedBundles.add(bundle)
+
+        // Draw shared path (junction → target for fan-in, source → junction for fan-out)
+        const [sharedPathC, sharedCornersC] = drawBundleSharedPath(
+          graph,
+          bundle,
+        )
+        lineCanvases.push(sharedPathC)
+        cornerCanvases.push(sharedCornersC)
+
+        // Draw arrowhead at target for fan-in (once for all edges in bundle)
+        if (bundle.type === 'fan-in') {
+          const arrowHeadC = drawBundleArrowhead(graph, bundle)
+          arrowHeadEndCanvases.push(arrowHeadC)
+        }
+
+        // Draw start arrowhead at the shared source for fan-out (once for all
+        // edges in the bundle — the trunk leaving the source is drawn once,
+        // so it only gets a start arrowhead when every edge agrees on one).
+        if (
+          bundle.type === 'fan-out' &&
+          bundle.edges.every((e) => e.hasArrowStart)
+        ) {
+          const arrowHeadStartC = drawBundleArrowheadStart(graph, bundle)
+          arrowHeadStartCanvases.push(arrowHeadStartC)
+        }
+
+        // Draw junction character
+        const junctionC = drawJunctionCharacter(graph, bundle)
+        junctionCanvases.push(junctionC)
+      }
+
+      // For fan-out bundles, draw arrowhead at each target
+      if (bundle.type === 'fan-out' && edge.hasArrowEnd) {
+        const arrowHeadC = drawBundledEdgeArrowhead(graph, edge)
+        arrowHeadEndCanvases.push(arrowHeadC)
+      }
+    } else {
+      // Non-bundled edge: use standard drawing
+      const [
+        pathC,
+        boxStartC,
+        arrowHeadEndC,
+        arrowHeadStartC,
+        cornersC,
+        labelC,
+      ] = drawArrow(graph, edge)
+      lineCanvases.push(pathC)
+      cornerCanvases.push(cornersC)
+      arrowHeadEndCanvases.push(arrowHeadEndC)
+      arrowHeadStartCanvases.push(arrowHeadStartC)
+      boxStartCanvases.push(boxStartC)
+      labelCanvases.push(labelC)
+    }
+  }
+
+  // Merge edge layers in order and track roles
+  // Note: arrowHeadStart is merged AFTER boxStart so bidirectional arrows
+  // properly overwrite the box connector at the source end
+  //
+  // `firstClaimWins` resolves any leftover cross-style overlap between two
+  // edges' own line canvases (see its doc) before they're merged onto the
+  // shared canvas — applied here, and not to the other edge layers below,
+  // because only the line layer has this "first claim wins" rule; corners,
+  // arrowheads, box-start connectors and labels keep mergeCanvases' normal
+  // last-overlay-wins behavior.
+  const resolvedLineCanvases = firstClaimWins(lineCanvases)
+  graph.canvas = mergeCanvases(
+    graph.canvas,
+    zero,
+    useAscii,
+    ...resolvedLineCanvases,
+  )
+  fillRolesFromCanvases(graph.roleCanvas, resolvedLineCanvases, zero, 'line')
+
+  graph.canvas = mergeCanvases(graph.canvas, zero, useAscii, ...cornerCanvases)
+  fillRolesFromCanvases(graph.roleCanvas, cornerCanvases, zero, 'corner')
+
+  graph.canvas = mergeCanvases(
+    graph.canvas,
+    zero,
+    useAscii,
+    ...junctionCanvases,
+  )
+  fillRolesFromCanvases(graph.roleCanvas, junctionCanvases, zero, 'junction')
+
+  graph.canvas = mergeCanvases(
+    graph.canvas,
+    zero,
+    useAscii,
+    ...arrowHeadEndCanvases,
+  )
+  fillRolesFromCanvases(graph.roleCanvas, arrowHeadEndCanvases, zero, 'arrow')
+
+  graph.canvas = mergeCanvases(
+    graph.canvas,
+    zero,
+    useAscii,
+    ...boxStartCanvases,
+  )
+  fillRolesFromCanvases(graph.roleCanvas, boxStartCanvases, zero, 'junction')
+
+  graph.canvas = mergeCanvases(
+    graph.canvas,
+    zero,
+    useAscii,
+    ...arrowHeadStartCanvases,
+  )
+  fillRolesFromCanvases(graph.roleCanvas, arrowHeadStartCanvases, zero, 'arrow')
+
+  graph.canvas = mergeCanvases(graph.canvas, zero, useAscii, ...labelCanvases)
+  fillRolesFromCanvases(graph.roleCanvas, labelCanvases, zero, 'text')
+
+  // Draw subgraph labels last (on top)
+  for (const sg of graph.subgraphs) {
+    if (sg.nodes.length === 0) continue
+    const [labelCanvas, offset, footprint] = drawSubgraphLabel(sg, graph)
+    graph.canvas = mergeCanvases(graph.canvas, offset, useAscii, labelCanvas)
+    fillRolesFromCanvas(graph.roleCanvas, labelCanvas, offset, 'text')
+    // mergeCanvases treats an overlay's space characters as transparent (so
+    // sparse edge/arrow layers don't blank each other out) — but the title's
+    // own footprint should win outright, including cells whose character is
+    // a literal space (e.g. "US West Region"). Otherwise a connector line
+    // already drawn at that cell shows through the label's internal space
+    // (issue #447: rendered as "US West│Region"). Force those specific
+    // cells, bypassing mergeCanvases's space-skip.
+    for (const { x, y } of footprint) {
+      const ch = labelCanvas[x]?.[y]
+      if (ch === ' ') {
+        write(graph.canvas, x + offset.x, y + offset.y, ch)
+        setRole(graph.roleCanvas, x + offset.x, y + offset.y, 'text')
+      }
+    }
+  }
+
+  return graph.canvas
+}