@chengchenccc/tui 0.1.1-rc.1

package/dist/vendor/mermaid-ascii/ascii/draw.js

@@ -0,0 +1,1313 @@
+// ============================================================================
+// ASCII renderer — drawing operations
+//
+// Ported from AlexanderGrooff/mermaid-ascii cmd/draw.go + cmd/arrow.go.
+// Contains all visual rendering: boxes, lines, arrows, corners,
+// subgraphs, labels, and the top-level draw orchestrator.
+// ============================================================================
+import { Up, Down, Left, Right, UpperLeft, UpperRight, LowerLeft, LowerRight, Middle, drawingCoordEquals, } from "./types.js";
+import { mkCanvas, copyCanvas, mergeCanvases, drawText, setRole } from "./canvas.js";
+import { determineDirection, dirEquals } from "./edge-routing.js";
+import { gridToDrawingCoord, lineToDrawing } from "./grid.js";
+import { splitLines } from "./multiline-utils.js";
+import { getCorners } from "./shapes/corners.js";
+import { getShapeAttachmentPoint } from "./shapes/index.js";
+import { displayWidth, LABEL_SPACE, toCells, WIDE_PAD } from "../text-metrics.js";
+// ============================================================================
+// Node drawing — renders a node using shape-aware rendering
+// ============================================================================
+/**
+ * Draw a node using its shape type.
+ * Returns a standalone canvas containing the rendered shape.
+ *
+ * For basic shapes (rectangle, rounded), uses grid-determined dimensions
+ * to ensure consistent sizing across nodes in the same column.
+ * For special shapes (diamond, circle, state pseudo-states, etc.),
+ * uses shape-specific dimension calculation but centers the content
+ * within the grid cell dimensions to ensure proper vertical alignment.
+ */
+export function drawNode(node, graph) {
+    // All shapes use grid-determined dimensions to fill their allocated space.
+    // This ensures consistent sizing across nodes and eliminates gaps between
+    // nodes and subgraph borders. All shapes are rectangles with distinctive
+    // corner characters (defined in corners.ts) to indicate shape type.
+    return drawBoxWithGridDimensions(node, graph);
+}
+/**
+ * Draw a box shape using grid-determined dimensions.
+ * This ensures consistent sizing when multiple nodes share a column,
+ * and eliminates gaps between nodes and subgraph borders by filling
+ * the entire allocated grid space.
+ *
+ * All shapes are rendered as rectangles with distinctive corner characters
+ * (defined in corners.ts) to indicate shape type.
+ */
+function drawBoxWithGridDimensions(node, graph) {
+    const gc = node.gridCoord;
+    const useAscii = graph.config.useAscii;
+    // Width spans 2 columns (border + content) - matching original behavior
+    let w = 0;
+    for (let i = 0; i < 2; i++) {
+        w += graph.columnWidth.get(gc.x + i) ?? 0;
+    }
+    // Height spans 2 rows (border + content)
+    let h = 0;
+    for (let i = 0; i < 2; i++) {
+        h += graph.rowHeight.get(gc.y + i) ?? 0;
+    }
+    const from = { x: 0, y: 0 };
+    const to = { x: w, y: h };
+    const box = mkCanvas(Math.max(from.x, to.x), Math.max(from.y, to.y));
+    // Get corner characters for this shape type
+    const corners = getCorners(node.shape, useAscii);
+    const isStateStart = node.shape === 'state-start';
+    const isStateEnd = node.shape === 'state-end';
+    const hChar = useAscii ? (isStateEnd ? '=' : '-') : (isStateEnd ? '═' : '─');
+    const vChar = useAscii ? (isStateEnd ? '‖' : '|') : (isStateEnd ? '║' : '│');
+    const stateStartCorners = useAscii
+        ? { tl: '+', tr: '+', bl: '+', br: '+' }
+        : { tl: '╭', tr: '╮', bl: '╰', br: '╯' };
+    const stateEndCorners = useAscii
+        ? { tl: '#', tr: '#', bl: '#', br: '#' }
+        : { tl: '╔', tr: '╗', bl: '╚', br: '╝' };
+    const effectiveCorners = isStateEnd ? stateEndCorners : isStateStart ? stateStartCorners : corners;
+    // Draw box border with shape-specific corners
+    for (let x = from.x + 1; x < to.x; x++)
+        box[x][from.y] = hChar;
+    for (let x = from.x + 1; x < to.x; x++)
+        box[x][to.y] = hChar;
+    for (let y = from.y + 1; y < to.y; y++)
+        box[from.x][y] = vChar;
+    for (let y = from.y + 1; y < to.y; y++)
+        box[to.x][y] = vChar;
+    box[from.x][from.y] = effectiveCorners.tl;
+    box[to.x][from.y] = effectiveCorners.tr;
+    box[from.x][to.y] = effectiveCorners.bl;
+    box[to.x][to.y] = effectiveCorners.br;
+    // Pseudostates have no source label; restore their UML marker explicitly.
+    const label = node.displayLabel || (isStateStart ? (useAscii ? '*' : '●') : isStateEnd ? (useAscii ? '*' : '◎') : '');
+    const lines = splitLines(label);
+    const textCenterY = from.y + Math.floor(h / 2);
+    const startY = textCenterY - Math.floor((lines.length - 1) / 2);
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const cells = toCells(line);
+        const textX = from.x + Math.floor(w / 2) - Math.ceil(cells.length / 2) + 1;
+        for (let j = 0; j < cells.length; j++) {
+            if (textX + j >= 0 && textX + j < box.length && startY + i >= 0 && startY + i < box[0].length) {
+                box[textX + j][startY + i] = cells[j];
+            }
+        }
+    }
+    return box;
+}
+/**
+ * Draw a node box with centered label text.
+ * Returns a standalone canvas containing just the box.
+ * Box size is determined by the grid column/row sizes for the node's position.
+ */
+export function drawBox(node, graph) {
+    return drawNode(node, graph);
+}
+// ============================================================================
+// Multi-section box drawing — for class and ER diagram nodes
+// ============================================================================
+/**
+ * Draw a multi-section box with horizontal dividers between sections.
+ * Used by class diagrams (header | attributes | methods) and ER diagrams (header | attributes).
+ * Each section is an array of text lines to render left-aligned with padding.
+ *
+ * @param sections - Array of sections, each section is an array of text lines
+ * @param useAscii - true for ASCII chars, false for Unicode box-drawing
+ * @param padding - horizontal padding inside the box (default 1)
+ * @returns A standalone Canvas containing the multi-section box
+ */
+export function drawMultiBox(sections, useAscii, padding = 1) {
+    // Compute width: widest line across all sections + 2*padding + 2 border chars
+    let maxTextWidth = 0;
+    for (const section of sections) {
+        for (const line of section) {
+            maxTextWidth = Math.max(maxTextWidth, displayWidth(line));
+        }
+    }
+    const innerWidth = maxTextWidth + 2 * padding;
+    const boxWidth = innerWidth + 2; // +2 for left/right border
+    // Compute height: sum of all section line counts + dividers + 2 border rows
+    let totalLines = 0;
+    for (const section of sections) {
+        totalLines += Math.max(section.length, 1); // at least 1 row per section
+    }
+    const numDividers = sections.length - 1;
+    const boxHeight = totalLines + numDividers + 2; // +2 for top/bottom border
+    // Box-drawing characters
+    const hLine = useAscii ? '-' : '─';
+    const vLine = useAscii ? '|' : '│';
+    const tl = useAscii ? '+' : '┌';
+    const tr = useAscii ? '+' : '┐';
+    const bl = useAscii ? '+' : '└';
+    const br = useAscii ? '+' : '┘';
+    const divL = useAscii ? '+' : '├';
+    const divR = useAscii ? '+' : '┤';
+    const canvas = mkCanvas(boxWidth - 1, boxHeight - 1);
+    // Top border
+    canvas[0][0] = tl;
+    for (let x = 1; x < boxWidth - 1; x++)
+        canvas[x][0] = hLine;
+    canvas[boxWidth - 1][0] = tr;
+    // Bottom border
+    canvas[0][boxHeight - 1] = bl;
+    for (let x = 1; x < boxWidth - 1; x++)
+        canvas[x][boxHeight - 1] = hLine;
+    canvas[boxWidth - 1][boxHeight - 1] = br;
+    // Left and right borders (full height)
+    for (let y = 1; y < boxHeight - 1; y++) {
+        canvas[0][y] = vLine;
+        canvas[boxWidth - 1][y] = vLine;
+    }
+    // Render sections with dividers
+    let row = 1; // current y position (starts after top border)
+    for (let s = 0; s < sections.length; s++) {
+        const section = sections[s];
+        const lines = section.length > 0 ? section : [''];
+        // Draw section text lines
+        for (const line of lines) {
+            const startX = 1 + padding;
+            const cells = toCells(line);
+            for (let i = 0; i < cells.length; i++) {
+                canvas[startX + i][row] = cells[i];
+            }
+            row++;
+        }
+        // Draw divider after each section except the last
+        if (s < sections.length - 1) {
+            canvas[0][row] = divL;
+            for (let x = 1; x < boxWidth - 1; x++)
+                canvas[x][row] = hLine;
+            canvas[boxWidth - 1][row] = divR;
+            row++;
+        }
+    }
+    return canvas;
+}
+// ============================================================================
+// Line drawing — 8-directional lines on the canvas
+// ============================================================================
+/**
+ * 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: '‖' },
+    },
+};
+/**
+ * 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, from, to, offsetFrom, offsetTo, useAscii, style = 'solid') {
+    const dir = determineDirection(from, to);
+    const drawnCoords = [];
+    // 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 });
+            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 });
+            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 });
+            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 });
+            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 });
+            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 });
+            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 });
+            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 });
+            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 });
+            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 });
+            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 });
+                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 });
+                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 });
+                canvas[to.x][y] = vChar;
+            }
+        }
+    }
+    return drawnCoords;
+}
+// ============================================================================
+// Arrow drawing — path, corners, arrowheads, box-start junctions, labels
+// ============================================================================
+/**
+ * Draw a complete arrow (edge) between two nodes.
+ * Returns 6 separate canvases for layered compositing:
+ * [path, boxStart, arrowHeadEnd, arrowHeadStart, corners, label]
+ *
+ * Supports bidirectional arrows via edge.hasArrowStart and edge.hasArrowEnd.
+ */
+export function drawArrow(graph, edge) {
+    if (edge.path.length === 0) {
+        const empty = copyCanvas(graph.canvas);
+        return [empty, empty, empty, empty, empty, empty];
+    }
+    const labelCanvas = drawArrowLabel(graph, edge);
+    const [pathCanvas, linesDrawn, lineDirs] = drawPath(graph, edge.path, edge.style);
+    const boxStartCanvas = drawBoxStart(graph, edge.path, linesDrawn[0], edge.from.shape);
+    // Draw end arrowhead only if hasArrowEnd is true (default behavior)
+    let arrowHeadEndCanvas;
+    if (edge.hasArrowEnd) {
+        arrowHeadEndCanvas = drawArrowHead(graph, linesDrawn[linesDrawn.length - 1], lineDirs[lineDirs.length - 1]);
+    }
+    else {
+        arrowHeadEndCanvas = copyCanvas(graph.canvas);
+    }
+    // Draw start arrowhead for bidirectional edges
+    // The start arrowhead needs to be at the box connector position (one step back
+    // from the first line point), pointing into the source node.
+    let arrowHeadStartCanvas;
+    if (edge.hasArrowStart && linesDrawn.length > 0) {
+        const firstLine = linesDrawn[0];
+        const firstPoint = firstLine[0];
+        const startDir = reverseDirection(lineDirs[0]);
+        // Calculate the box connector position (one step back from first point)
+        const arrowPos = { x: firstPoint.x, y: firstPoint.y };
+        if (dirEquals(lineDirs[0], Right))
+            arrowPos.x = firstPoint.x - 1;
+        else if (dirEquals(lineDirs[0], Left))
+            arrowPos.x = firstPoint.x + 1;
+        else if (dirEquals(lineDirs[0], Down))
+            arrowPos.y = firstPoint.y - 1;
+        else if (dirEquals(lineDirs[0], Up))
+            arrowPos.y = firstPoint.y + 1;
+        // Create a synthetic line ending at the arrow position for drawArrowHead
+        const syntheticLine = [firstPoint, arrowPos];
+        arrowHeadStartCanvas = drawArrowHead(graph, syntheticLine, startDir);
+    }
+    else {
+        arrowHeadStartCanvas = copyCanvas(graph.canvas);
+    }
+    const cornersCanvas = drawCorners(graph, edge.path);
+    return [pathCanvas, boxStartCanvas, arrowHeadEndCanvas, arrowHeadStartCanvas, cornersCanvas, labelCanvas];
+}
+/**
+ * Reverse a direction (for bidirectional arrow start heads).
+ */
+function reverseDirection(dir) {
+    if (dirEquals(dir, Up))
+        return Down;
+    if (dirEquals(dir, Down))
+        return Up;
+    if (dirEquals(dir, Left))
+        return Right;
+    if (dirEquals(dir, Right))
+        return Left;
+    if (dirEquals(dir, UpperLeft))
+        return LowerRight;
+    if (dirEquals(dir, UpperRight))
+        return LowerLeft;
+    if (dirEquals(dir, LowerLeft))
+        return UpperRight;
+    if (dirEquals(dir, LowerRight))
+        return UpperLeft;
+    return Middle;
+}
+/**
+ * Draw the path lines for an edge.
+ * Returns the canvas, the coordinates drawn for each segment, and the direction of each segment.
+ */
+function drawPath(graph, path, style = 'solid') {
+    const canvas = copyCanvas(graph.canvas);
+    let previousCoord = path[0];
+    const linesDrawn = [];
+    const lineDirs = [];
+    for (let i = 1; i < path.length; i++) {
+        const nextCoord = path[i];
+        const prevDC = gridToDrawingCoord(graph, previousCoord);
+        const nextDC = gridToDrawingCoord(graph, nextCoord);
+        if (drawingCoordEquals(prevDC, nextDC)) {
+            previousCoord = nextCoord;
+            continue;
+        }
+        const dir = determineDirection(previousCoord, nextCoord);
+        const segment = drawLine(canvas, prevDC, nextDC, 1, -1, graph.config.useAscii, style);
+        if (segment.length === 0)
+            segment.push(prevDC);
+        linesDrawn.push(segment);
+        lineDirs.push(dir);
+        previousCoord = nextCoord;
+    }
+    return [canvas, linesDrawn, lineDirs];
+}
+/**
+ * Draw the junction character where an edge exits the source node's box.
+ * Only applies to Unicode mode (ASCII mode just uses the line characters).
+ * Skips drawing for state pseudo-states which have their own visual borders.
+ */
+function drawBoxStart(graph, path, firstLine, sourceShape) {
+    const canvas = copyCanvas(graph.canvas);
+    if (graph.config.useAscii)
+        return canvas;
+    // Skip box start connectors for state pseudo-states (they have their own bordered design)
+    if (sourceShape === 'state-start' || sourceShape === 'state-end') {
+        return canvas;
+    }
+    const from = firstLine[0];
+    const dir = determineDirection(path[0], path[1]);
+    if (dirEquals(dir, Up))
+        canvas[from.x][from.y + 1] = '┴';
+    else if (dirEquals(dir, Down))
+        canvas[from.x][from.y - 1] = '┬';
+    else if (dirEquals(dir, Left))
+        canvas[from.x + 1][from.y] = '┤';
+    else if (dirEquals(dir, Right))
+        canvas[from.x - 1][from.y] = '├';
+    return canvas;
+}
+/**
+ * Draw the arrowhead at the end of an edge path.
+ * Uses triangular Unicode symbols (▲▼◄►) or ASCII symbols (^v<>).
+ */
+function drawArrowHead(graph, lastLine, fallbackDir) {
+    const canvas = copyCanvas(graph.canvas);
+    if (lastLine.length === 0)
+        return canvas;
+    const from = lastLine[0];
+    const lastPos = lastLine[lastLine.length - 1];
+    let dir = determineDirection(from, lastPos);
+    if (lastLine.length === 1 || dirEquals(dir, Middle))
+        dir = fallbackDir;
+    let char;
+    if (!graph.config.useAscii) {
+        if (dirEquals(dir, Up))
+            char = '▲';
+        else if (dirEquals(dir, Down))
+            char = '▼';
+        else if (dirEquals(dir, Left))
+            char = '◄';
+        else if (dirEquals(dir, Right))
+            char = '►';
+        else if (dirEquals(dir, UpperRight))
+            char = '◥';
+        else if (dirEquals(dir, UpperLeft))
+            char = '◤';
+        else if (dirEquals(dir, LowerRight))
+            char = '◢';
+        else if (dirEquals(dir, LowerLeft))
+            char = '◣';
+        else {
+            // Fallback
+            if (dirEquals(fallbackDir, Up))
+                char = '▲';
+            else if (dirEquals(fallbackDir, Down))
+                char = '▼';
+            else if (dirEquals(fallbackDir, Left))
+                char = '◄';
+            else if (dirEquals(fallbackDir, Right))
+                char = '►';
+            else if (dirEquals(fallbackDir, UpperRight))
+                char = '◥';
+            else if (dirEquals(fallbackDir, UpperLeft))
+                char = '◤';
+            else if (dirEquals(fallbackDir, LowerRight))
+                char = '◢';
+            else if (dirEquals(fallbackDir, LowerLeft))
+                char = '◣';
+            else
+                char = '●';
+        }
+    }
+    else {
+        if (dirEquals(dir, Up))
+            char = '^';
+        else if (dirEquals(dir, Down))
+            char = 'v';
+        else if (dirEquals(dir, Left))
+            char = '<';
+        else if (dirEquals(dir, Right))
+            char = '>';
+        else {
+            if (dirEquals(fallbackDir, Up))
+                char = '^';
+            else if (dirEquals(fallbackDir, Down))
+                char = 'v';
+            else if (dirEquals(fallbackDir, Left))
+                char = '<';
+            else if (dirEquals(fallbackDir, Right))
+                char = '>';
+            else
+                char = '*';
+        }
+    }
+    canvas[lastPos.x][lastPos.y] = char;
+    return canvas;
+}
+/**
+ * Draw corner characters at path bends (where the direction changes).
+ * Uses ┌┐└┘ in Unicode mode, + in ASCII mode.
+ */
+function drawCorners(graph, path) {
+    const canvas = copyCanvas(graph.canvas);
+    for (let idx = 1; idx < path.length - 1; idx++) {
+        const coord = path[idx];
+        const dc = gridToDrawingCoord(graph, coord);
+        const prevDir = determineDirection(path[idx - 1], coord);
+        const nextDir = determineDirection(coord, path[idx + 1]);
+        let corner;
+        if (!graph.config.useAscii) {
+            if ((dirEquals(prevDir, Right) && dirEquals(nextDir, Down)) ||
+                (dirEquals(prevDir, Up) && dirEquals(nextDir, Left))) {
+                corner = '┐';
+            }
+            else if ((dirEquals(prevDir, Right) && dirEquals(nextDir, Up)) ||
+                (dirEquals(prevDir, Down) && dirEquals(nextDir, Left))) {
+                corner = '┘';
+            }
+            else if ((dirEquals(prevDir, Left) && dirEquals(nextDir, Down)) ||
+                (dirEquals(prevDir, Up) && dirEquals(nextDir, Right))) {
+                corner = '┌';
+            }
+            else if ((dirEquals(prevDir, Left) && dirEquals(nextDir, Up)) ||
+                (dirEquals(prevDir, Down) && dirEquals(nextDir, Right))) {
+                corner = '└';
+            }
+            else {
+                corner = '+';
+            }
+        }
+        else {
+            corner = '+';
+        }
+        canvas[dc.x][dc.y] = corner;
+    }
+    return canvas;
+}
+/** Draw edge label text centered on the widest path segment. */
+function drawArrowLabel(graph, edge) {
+    const canvas = copyCanvas(graph.canvas);
+    if (edge.text.length === 0)
+        return canvas;
+    const drawingLine = lineToDrawing(graph, edge.labelLine);
+    // Determine if this is an upward edge (target is above source in the path)
+    // This is used to offset labels on bidirectional edges to prevent overlap
+    let isUpwardEdge;
+    if (edge.path.length >= 2) {
+        const startY = edge.path[0].y;
+        const endY = edge.path[edge.path.length - 1].y;
+        // Edge goes up if end Y is less than start Y (smaller Y = higher on screen)
+        if (endY < startY) {
+            isUpwardEdge = true;
+        }
+        else if (endY > startY) {
+            isUpwardEdge = false;
+        }
+        // If endY === startY, it's horizontal, leave isUpwardEdge undefined
+    }
+    drawTextOnLine(canvas, drawingLine, edge.text, isUpwardEdge);
+    return canvas;
+}
+/**
+ * Draw text centered on a line segment defined by two drawing coordinates.
+ * Supports multi-line labels.
+ *
+ * When isUpwardEdge is provided, offsets the label vertically to prevent
+ * overlapping with labels from edges going the opposite direction:
+ * - Upward edges: label placed in lower portion of segment
+ * - Downward edges (isUpwardEdge=false): label placed in upper portion
+ * - No direction (isUpwardEdge=undefined): label centered (default)
+ */
+function drawTextOnLine(canvas, line, label, isUpwardEdge) {
+    if (line.length < 2)
+        return;
+    const minX = Math.min(line[0].x, line[1].x);
+    const maxX = Math.max(line[0].x, line[1].x);
+    const minY = Math.min(line[0].y, line[1].y);
+    const maxY = Math.max(line[0].y, line[1].y);
+    const middleX = minX + Math.floor((maxX - minX) / 2);
+    let middleY = minY + Math.floor((maxY - minY) / 2);
+    // Offset label vertically to prevent overlap on bidirectional edges
+    // For vertical segments (same X), shift based on edge direction
+    if (isUpwardEdge !== undefined && minX === maxX) {
+        const segmentHeight = maxY - minY;
+        const offset = Math.max(1, Math.floor(segmentHeight / 4));
+        if (isUpwardEdge) {
+            // Upward edge: place label in lower portion
+            middleY = middleY + offset;
+        }
+        else {
+            // Downward edge: place label in upper portion
+            middleY = middleY - offset;
+        }
+    }
+    // Support multi-line labels
+    const lines = splitLines(label);
+    const startY = middleY - Math.floor((lines.length - 1) / 2);
+    for (let i = 0; i < lines.length; i++) {
+        const lineText = lines[i];
+        const startX = middleX - Math.floor(displayWidth(lineText) / 2);
+        drawText(canvas, { x: startX, y: startY + i }, lineText.replaceAll(' ', LABEL_SPACE));
+    }
+}
+// ============================================================================
+// Node attachment point helper
+// ============================================================================
+/**
+ * Get the drawing coordinate where an edge attaches to a node's border.
+ * Uses grid-allocated dimensions so attachment points align with the actual
+ * drawn box (which may be wider/taller than the intrinsic shape dimensions
+ * when sharing a column/row with a larger node).
+ */
+function getNodeAttachmentPoint(graph, node, dir) {
+    const gc = node.gridCoord;
+    // Calculate actual drawn dimensions from grid (matching drawBoxWithGridDimensions)
+    let w = 0;
+    for (let i = 0; i < 2; i++) {
+        w += graph.columnWidth.get(gc.x + i) ?? 0;
+    }
+    let h = 0;
+    for (let i = 0; i < 2; i++) {
+        h += graph.rowHeight.get(gc.y + i) ?? 0;
+    }
+    // Build dimensions matching the actual drawn box size
+    const gridDimensions = {
+        width: w + 1,
+        height: h + 1,
+        labelArea: { x: 0, y: 0, width: 0, height: 0 },
+        gridColumns: [0, 0, 0],
+        gridRows: [0, 0, 0],
+    };
+    const baseCoord = node.drawingCoord;
+    return getShapeAttachmentPoint(node.shape, dir, gridDimensions, baseCoord);
+}
+// ============================================================================
+// Bundled edge drawing — for parallel links (A & B --> C)
+// ============================================================================
+/**
+ * Draw a single edge's segment in a bundle (source → junction for fan-in,
+ * junction → target for fan-out).
+ *
+ * Returns the same tuple format as drawArrow for consistency.
+ */
+function drawBundledEdgeSegment(graph, edge, bundle) {
+    const empty = copyCanvas(graph.canvas);
+    if (!edge.pathToJunction || edge.pathToJunction.length === 0) {
+        return [empty, empty, empty, empty, empty, empty];
+    }
+    // Draw the path segment (pathToJunction)
+    const pathCanvas = copyCanvas(graph.canvas);
+    const useAscii = graph.config.useAscii;
+    // Convert grid coords to drawing coords
+    // For fan-in: first point is at source node border (use attachment point)
+    // For fan-out: last point is at target node border (use attachment point)
+    const drawingPath = edge.pathToJunction.map((gc, idx) => {
+        if (bundle.type === 'fan-in' && idx === 0) {
+            // First point: use source node's actual border position
+            return getNodeAttachmentPoint(graph, edge.from, edge.startDir);
+        }
+        if (bundle.type === 'fan-out' && idx === edge.pathToJunction.length - 1) {
+            // Last point: use target node's actual border position
+            return getNodeAttachmentPoint(graph, edge.to, edge.endDir);
+        }
+        return gridToDrawingCoord(graph, gc);
+    });
+    // Draw line segments
+    for (let i = 1; i < drawingPath.length; i++) {
+        const from = drawingPath[i - 1];
+        const to = drawingPath[i];
+        if (!drawingCoordEquals(from, to)) {
+            // Always skip both endpoints of every segment (offset 1, -1),
+            // matching non-bundled drawPath behavior. This leaves endpoint
+            // characters to corner/junction/boxStart canvases, preventing
+            // line characters from corrupting them via mergeJunctions.
+            drawLine(pathCanvas, from, to, 1, -1, useAscii, edge.style);
+        }
+    }
+    // Draw corners at path bends
+    const cornersCanvas = copyCanvas(graph.canvas);
+    for (let idx = 1; idx < edge.pathToJunction.length - 1; idx++) {
+        const coord = edge.pathToJunction[idx];
+        const dc = gridToDrawingCoord(graph, coord);
+        const prevDir = determineDirection(edge.pathToJunction[idx - 1], coord);
+        const nextDir = determineDirection(coord, edge.pathToJunction[idx + 1]);
+        let corner;
+        if (!useAscii) {
+            if ((dirEquals(prevDir, Right) && dirEquals(nextDir, Down)) ||
+                (dirEquals(prevDir, Up) && dirEquals(nextDir, Left))) {
+                corner = '┐';
+            }
+            else if ((dirEquals(prevDir, Right) && dirEquals(nextDir, Up)) ||
+                (dirEquals(prevDir, Down) && dirEquals(nextDir, Left))) {
+                corner = '┘';
+            }
+            else if ((dirEquals(prevDir, Left) && dirEquals(nextDir, Down)) ||
+                (dirEquals(prevDir, Up) && dirEquals(nextDir, Right))) {
+                corner = '┌';
+            }
+            else if ((dirEquals(prevDir, Left) && dirEquals(nextDir, Up)) ||
+                (dirEquals(prevDir, Down) && dirEquals(nextDir, Right))) {
+                corner = '└';
+            }
+            else {
+                corner = '+';
+            }
+        }
+        else {
+            corner = '+';
+        }
+        cornersCanvas[dc.x][dc.y] = corner;
+    }
+    // Draw box start connector (for fan-in, from source node)
+    // The connector is placed at the first point coordinate (box border position)
+    // since we use offsets 1,-1 for drawLine, the line starts one step past this point
+    const boxStartCanvas = copyCanvas(graph.canvas);
+    if (bundle.type === 'fan-in' && edge.pathToJunction.length >= 2) {
+        const firstPoint = drawingPath[0];
+        const dir = determineDirection(edge.pathToJunction[0], edge.pathToJunction[1]);
+        if (!useAscii) {
+            if (dirEquals(dir, Up))
+                boxStartCanvas[firstPoint.x][firstPoint.y] = '┴';
+            else if (dirEquals(dir, Down))
+                boxStartCanvas[firstPoint.x][firstPoint.y] = '┬';
+            else if (dirEquals(dir, Left))
+                boxStartCanvas[firstPoint.x][firstPoint.y] = '┤';
+            else if (dirEquals(dir, Right))
+                boxStartCanvas[firstPoint.x][firstPoint.y] = '├';
+        }
+    }
+    // Label canvas (bundled edges typically don't have labels, but handle it)
+    const labelCanvas = copyCanvas(graph.canvas);
+    return [pathCanvas, boxStartCanvas, empty, empty, cornersCanvas, labelCanvas];
+}
+/**
+ * Draw the shared path segment of a bundle (junction → target for fan-in,
+ * source → junction for fan-out).
+ */
+function drawBundleSharedPath(graph, bundle) {
+    const pathCanvas = copyCanvas(graph.canvas);
+    const cornersCanvas = copyCanvas(graph.canvas);
+    if (bundle.sharedPath.length < 2) {
+        return [pathCanvas, cornersCanvas];
+    }
+    const useAscii = graph.config.useAscii;
+    const style = bundle.edges[0]?.style ?? 'solid';
+    const graphDir = graph.config.graphDirection;
+    // Convert grid coords to drawing coords
+    // For fan-in: last point is at target node border
+    // For fan-out: first point is at source node border
+    const drawingPath = bundle.sharedPath.map((gc, idx) => {
+        if (bundle.type === 'fan-in' && idx === bundle.sharedPath.length - 1) {
+            // Last point: use target node's actual border position (entry from above/left)
+            const entryDir = graphDir === 'TD' ? Up : Left;
+            return getNodeAttachmentPoint(graph, bundle.sharedNode, entryDir);
+        }
+        if (bundle.type === 'fan-out' && idx === 0) {
+            // First point: use source node's actual border position (exit going down/right)
+            const exitDir = graphDir === 'TD' ? Down : Right;
+            return getNodeAttachmentPoint(graph, bundle.sharedNode, exitDir);
+        }
+        return gridToDrawingCoord(graph, gc);
+    });
+    // Draw line segments with appropriate offsets
+    for (let i = 1; i < drawingPath.length; i++) {
+        const from = drawingPath[i - 1];
+        const to = drawingPath[i];
+        if (!drawingCoordEquals(from, to)) {
+            // Always skip both endpoints (offset 1, -1), matching non-bundled drawPath.
+            drawLine(pathCanvas, from, to, 1, -1, useAscii, style);
+        }
+    }
+    // Draw corners at path bends
+    for (let idx = 1; idx < bundle.sharedPath.length - 1; idx++) {
+        const coord = bundle.sharedPath[idx];
+        const dc = gridToDrawingCoord(graph, coord);
+        const prevDir = determineDirection(bundle.sharedPath[idx - 1], coord);
+        const nextDir = determineDirection(coord, bundle.sharedPath[idx + 1]);
+        let corner;
+        if (!useAscii) {
+            if ((dirEquals(prevDir, Right) && dirEquals(nextDir, Down)) ||
+                (dirEquals(prevDir, Up) && dirEquals(nextDir, Left))) {
+                corner = '┐';
+            }
+            else if ((dirEquals(prevDir, Right) && dirEquals(nextDir, Up)) ||
+                (dirEquals(prevDir, Down) && dirEquals(nextDir, Left))) {
+                corner = '┘';
+            }
+            else if ((dirEquals(prevDir, Left) && dirEquals(nextDir, Down)) ||
+                (dirEquals(prevDir, Up) && dirEquals(nextDir, Right))) {
+                corner = '┌';
+            }
+            else if ((dirEquals(prevDir, Left) && dirEquals(nextDir, Up)) ||
+                (dirEquals(prevDir, Down) && dirEquals(nextDir, Right))) {
+                corner = '└';
+            }
+            else {
+                corner = '+';
+            }
+        }
+        else {
+            corner = '+';
+        }
+        cornersCanvas[dc.x][dc.y] = corner;
+    }
+    return [pathCanvas, cornersCanvas];
+}
+/**
+ * Draw the arrowhead for a fan-in bundle (single arrowhead at the shared target).
+ */
+function drawBundleArrowhead(graph, bundle) {
+    const canvas = copyCanvas(graph.canvas);
+    if (bundle.sharedPath.length < 2)
+        return canvas;
+    // Get the last segment direction
+    const lastIdx = bundle.sharedPath.length - 1;
+    const secondLast = bundle.sharedPath[lastIdx - 1];
+    const last = bundle.sharedPath[lastIdx];
+    const dir = determineDirection(secondLast, last);
+    // Get drawing coord 1 char outside the target node's border (not on the border itself).
+    // This matches non-bundled edges where drawPath uses offsetTo=-1 and the arrowhead
+    // sits at the last drawn point (1 char before the border).
+    const graphDir = graph.config.graphDirection;
+    const entryDir = graphDir === 'TD' ? Up : Left;
+    const dc = getNodeAttachmentPoint(graph, bundle.sharedNode, entryDir);
+    // Offset 1 char away from the box border so arrowhead sits outside the box
+    if (graphDir === 'TD')
+        dc.y -= 1;
+    else
+        dc.x -= 1;
+    // Draw arrowhead
+    let char;
+    if (!graph.config.useAscii) {
+        if (dirEquals(dir, Up))
+            char = '▲';
+        else if (dirEquals(dir, Down))
+            char = '▼';
+        else if (dirEquals(dir, Left))
+            char = '◄';
+        else if (dirEquals(dir, Right))
+            char = '►';
+        else
+            char = '▼'; // default
+    }
+    else {
+        if (dirEquals(dir, Up))
+            char = '^';
+        else if (dirEquals(dir, Down))
+            char = 'v';
+        else if (dirEquals(dir, Left))
+            char = '<';
+        else if (dirEquals(dir, Right))
+            char = '>';
+        else
+            char = 'v'; // default
+    }
+    canvas[dc.x][dc.y] = char;
+    return canvas;
+}
+/**
+ * Draw the arrowhead for a single edge in a fan-out bundle.
+ */
+function drawBundledEdgeArrowhead(graph, edge) {
+    const canvas = copyCanvas(graph.canvas);
+    if (!edge.pathToJunction || edge.pathToJunction.length < 2)
+        return canvas;
+    // Get the last segment direction
+    const lastIdx = edge.pathToJunction.length - 1;
+    const secondLast = edge.pathToJunction[lastIdx - 1];
+    const last = edge.pathToJunction[lastIdx];
+    const dir = determineDirection(secondLast, last);
+    // Get drawing coord 1 char outside the target node's border
+    const graphDir = graph.config.graphDirection;
+    const entryDir = graphDir === 'TD' ? Up : Left;
+    const dc = getNodeAttachmentPoint(graph, edge.to, entryDir);
+    // Offset 1 char away from the box border so arrowhead sits outside the box
+    if (graphDir === 'TD')
+        dc.y -= 1;
+    else
+        dc.x -= 1;
+    // Draw arrowhead
+    let char;
+    if (!graph.config.useAscii) {
+        if (dirEquals(dir, Up))
+            char = '▲';
+        else if (dirEquals(dir, Down))
+            char = '▼';
+        else if (dirEquals(dir, Left))
+            char = '◄';
+        else if (dirEquals(dir, Right))
+            char = '►';
+        else
+            char = '▼'; // default
+    }
+    else {
+        if (dirEquals(dir, Up))
+            char = '^';
+        else if (dirEquals(dir, Down))
+            char = 'v';
+        else if (dirEquals(dir, Left))
+            char = '<';
+        else if (dirEquals(dir, Right))
+            char = '>';
+        else
+            char = 'v'; // default
+    }
+    canvas[dc.x][dc.y] = char;
+    return canvas;
+}
+/**
+ * Draw the junction character where bundled edges merge/split.
+ *
+ * Analyzes actual connecting directions to choose the correct character:
+ * - ┼ (cross): lines from all 4 directions
+ * - ┬ (T down): lines from left, right, and down
+ * - ┴ (T up): lines from left, right, and up
+ * - ├ (T right): lines from up, down, and right
+ * - ┤ (T left): lines from up, down, and left
+ */
+function drawJunctionCharacter(graph, bundle) {
+    const canvas = copyCanvas(graph.canvas);
+    if (!bundle.junctionPoint)
+        return canvas;
+    const dc = gridToDrawingCoord(graph, bundle.junctionPoint);
+    const useAscii = graph.config.useAscii;
+    // Analyze what directions actually connect to the junction
+    let hasUp = false;
+    let hasDown = false;
+    let hasLeft = false;
+    let hasRight = false;
+    // Check shared path direction (where the line continues to/from the shared node)
+    if (bundle.sharedPath.length >= 2) {
+        // For fan-in: shared path goes FROM junction TO target (index 0 is junction)
+        // For fan-out: shared path goes FROM source TO junction (last index is junction)
+        const junctionIdx = bundle.type === 'fan-in' ? 0 : bundle.sharedPath.length - 1;
+        const adjacentIdx = bundle.type === 'fan-in' ? 1 : bundle.sharedPath.length - 2;
+        const sharedDir = determineDirection(bundle.sharedPath[junctionIdx], bundle.sharedPath[adjacentIdx]);
+        // This is the direction the shared path GOES from junction
+        if (dirEquals(sharedDir, Down))
+            hasDown = true;
+        else if (dirEquals(sharedDir, Up))
+            hasUp = true;
+        else if (dirEquals(sharedDir, Right))
+            hasRight = true;
+        else if (dirEquals(sharedDir, Left))
+            hasLeft = true;
+    }
+    // Check each edge's path direction at the junction
+    for (const edge of bundle.edges) {
+        if (edge.pathToJunction && edge.pathToJunction.length >= 2) {
+            // For fan-in: pathToJunction goes FROM source TO junction (last is junction)
+            // For fan-out: pathToJunction goes FROM junction TO target (first is junction)
+            const junctionIdx = bundle.type === 'fan-in'
+                ? edge.pathToJunction.length - 1
+                : 0;
+            const adjacentIdx = bundle.type === 'fan-in'
+                ? edge.pathToJunction.length - 2
+                : 1;
+            const arrivalDir = determineDirection(edge.pathToJunction[adjacentIdx], edge.pathToJunction[junctionIdx]);
+            // This is the direction the edge ARRIVES at junction from
+            // e.g., if arrivalDir is Right, the line comes FROM the left
+            if (dirEquals(arrivalDir, Down))
+                hasUp = true; // arrived going down = came from up
+            else if (dirEquals(arrivalDir, Up))
+                hasDown = true;
+            else if (dirEquals(arrivalDir, Right))
+                hasLeft = true;
+            else if (dirEquals(arrivalDir, Left))
+                hasRight = true;
+        }
+    }
+    // Select character based on connected directions
+    let char;
+    if (!useAscii) {
+        if (hasUp && hasDown && hasLeft && hasRight) {
+            char = '┼'; // cross - all 4 directions
+        }
+        else if (hasDown && hasLeft && hasRight && !hasUp) {
+            char = '┬'; // T pointing down
+        }
+        else if (hasUp && hasLeft && hasRight && !hasDown) {
+            char = '┴'; // T pointing up
+        }
+        else if (hasUp && hasDown && hasRight && !hasLeft) {
+            char = '├'; // T pointing right
+        }
+        else if (hasUp && hasDown && hasLeft && !hasRight) {
+            char = '┤'; // T pointing left
+        }
+        else if (hasLeft && hasRight) {
+            char = '─'; // horizontal only
+        }
+        else if (hasUp && hasDown) {
+            char = '│'; // vertical only
+        }
+        else if (hasDown && hasRight) {
+            char = '┌'; // corner
+        }
+        else if (hasDown && hasLeft) {
+            char = '┐';
+        }
+        else if (hasUp && hasRight) {
+            char = '└';
+        }
+        else if (hasUp && hasLeft) {
+            char = '┘';
+        }
+        else {
+            char = '┼'; // fallback
+        }
+    }
+    else {
+        char = '+';
+    }
+    canvas[dc.x][dc.y] = char;
+    return canvas;
+}
+// ============================================================================
+// Subgraph drawing
+// ============================================================================
+/** Draw a subgraph border rectangle. */
+export function drawSubgraphBox(sg, graph) {
+    const width = sg.maxX - sg.minX;
+    const height = sg.maxY - sg.minY;
+    if (width <= 0 || height <= 0)
+        return mkCanvas(0, 0);
+    const from = { x: 0, y: 0 };
+    const to = { x: width, y: height };
+    const canvas = mkCanvas(width, height);
+    if (!graph.config.useAscii) {
+        for (let x = from.x + 1; x < to.x; x++)
+            canvas[x][from.y] = '─';
+        for (let x = from.x + 1; x < to.x; x++)
+            canvas[x][to.y] = '─';
+        for (let y = from.y + 1; y < to.y; y++)
+            canvas[from.x][y] = '│';
+        for (let y = from.y + 1; y < to.y; y++)
+            canvas[to.x][y] = '│';
+        canvas[from.x][from.y] = '┌';
+        canvas[to.x][from.y] = '┐';
+        canvas[from.x][to.y] = '└';
+        canvas[to.x][to.y] = '┘';
+    }
+    else {
+        for (let x = from.x + 1; x < to.x; x++)
+            canvas[x][from.y] = '-';
+        for (let x = from.x + 1; x < to.x; x++)
+            canvas[x][to.y] = '-';
+        for (let y = from.y + 1; y < to.y; y++)
+            canvas[from.x][y] = '|';
+        for (let y = from.y + 1; y < to.y; y++)
+            canvas[to.x][y] = '|';
+        canvas[from.x][from.y] = '+';
+        canvas[to.x][from.y] = '+';
+        canvas[from.x][to.y] = '+';
+        canvas[to.x][to.y] = '+';
+    }
+    return canvas;
+}
+/** Draw a subgraph label centered in its header area. Supports multi-line labels. */
+export function drawSubgraphLabel(sg, graph) {
+    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);
+    // 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;
+        let labelX = Math.floor(width / 2) - Math.floor(displayWidth(line) / 2);
+        if (labelX < 1)
+            labelX = 1;
+        const cells = toCells(line);
+        for (let j = 0; j < cells.length; j++) {
+            const cell = cells[j];
+            if (cell === WIDE_PAD)
+                continue; // written atomically with its lead
+            const cx = labelX + j;
+            const wide = cells[j + 1] === WIDE_PAD;
+            // Keep wide-glyph pairs atomic at the subgraph edge
+            if (cx + (wide ? 1 : 0) >= width || labelY >= height)
+                continue;
+            canvas[cx][labelY] = cell;
+            if (wide)
+                canvas[cx + 1][labelY] = WIDE_PAD;
+        }
+    }
+    return [canvas, { x: sg.minX, y: sg.minY }];
+}
+// ============================================================================
+// Top-level draw orchestrator
+// ============================================================================
+/** Sort subgraphs by nesting depth (shallowest first) for correct layered rendering. */
+function sortSubgraphsByDepth(subgraphs) {
+    function getDepth(sg) {
+        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, canvas, offset, role) {
+    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, canvases, offset, role) {
+    for (const canvas of canvases) {
+        fillRolesFromCanvas(roleCanvas, canvas, offset, role);
+    }
+}
+/**
+ * Special handling for node boxes: border chars get 'border' role, text gets 'text' role.
+ * Common final-state border characters (`#` and `=`) count only on the outer edge,
+ * so identical characters inside ordinary node labels retain the text role.
+ */
+function fillRolesForNodeBox(roleCanvas, canvas, offset) {
+    const isBorderChar = (c) => /^[┌┐└┘├┤┬┴┼│─╭╮╰╯+\-|.':]$/.test(c);
+    const isStateEndBorderChar = (c) => /^[╔╗╚╝═║#=‖]$/.test(c);
+    const maxX = canvas.length - 1;
+    const maxY = (canvas[0]?.length ?? 1) - 1;
+    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) {
+                    const isOuterEdge = x === 0 || x === maxX || y === 0 || y === maxY;
+                    const role = isBorderChar(char) || (isOuterEdge && isStateEndBorderChar(char)) ? 'border' : 'text';
+                    setRole(roleCanvas, rx, ry, role);
+                }
+            }
+        }
+    }
+}
+/**
+ * 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) {
+    const useAscii = graph.config.useAscii;
+    const zero = { x: 0, y: 0 };
+    // Draw subgraph borders
+    const sortedSgs = sortSubgraphsByDepth(graph.subgraphs);
+    for (const sg of sortedSgs) {
+        const sgCanvas = drawSubgraphBox(sg, graph);
+        const offset = { 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 = [];
+    const cornerCanvases = [];
+    const arrowHeadEndCanvases = [];
+    const arrowHeadStartCanvases = [];
+    const boxStartCanvases = [];
+    const labelCanvases = [];
+    const junctionCanvases = [];
+    // Track which bundles have been processed (to draw shared paths only once)
+    const processedBundles = new Set();
+    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);
+            // 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 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
+    graph.canvas = mergeCanvases(graph.canvas, zero, useAscii, ...lineCanvases);
+    fillRolesFromCanvases(graph.roleCanvas, lineCanvases, 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] = drawSubgraphLabel(sg, graph);
+        graph.canvas = mergeCanvases(graph.canvas, offset, useAscii, labelCanvas);
+        fillRolesFromCanvas(graph.roleCanvas, labelCanvas, offset, 'text');
+    }
+    return graph.canvas;
+}