Terminal Mermaid diagrams

The full message renderer draws Mermaid fences as themed Unicode diagrams. /diagram [n] opens a session diagram on a scrollable canvas. Arrows or hjkl pan, Shift moves a page, +/- zoom, 0 resets, n/p switch diagrams, and Esc returns to chat. Labels use the same grapheme and terminal-cell measurement as the rest of the CLI, including CJK, combining marks and emoji sequences. Source fences remain available when layout fails.

view/mermaid.ts dispatches to one module per family in view/mermaid/. The registry, parsers and layouts load through mermaid-lazy.ts only when a Mermaid fence is encountered. No dependencies or protocol runtime schemas are added to startup.

Legacy inventory and coverage

Reference inspected read-only: v1 src/mendcode/packages/opencode/src/cli/cmd/tui/util/markdown-render.ts (renderSimpleMermaid and its family renderers), component/styled-plan-markdown.tsx, and test/cli/tui/markdown-render.test.ts. The current v1 source has 30 families: the ten families called new in UI-9 already exist in that checkout. They are new to MendCode. Eight more v1 families are retained as part of parity. The table describes the terminal subset, not the complete browser Mermaid grammar. Style directives use the terminal theme.

Traditional flow shapes include rectangles, rounded/stadium, circle/double-circle, diamond, cylinder, subroutine, parallelogram, trapezoid, hexagon and asymmetric nodes. The v1 extended shape alias/marker vocabulary is carried in legacy-shared.ts, including cloud, bang, hourglass, bolt, braces, lean/trap variants, datastore/delay/cylinder variants, document/framed/lined/divided rectangles, flag, triangle and text/icon/image forms. These terminal markers preserve v1 semantics without relying on a browser renderer.

Flowchart layout

Flowcharts are drawn as layers (longest-path layering, barycenter ordering, orthogonal channels between layers), with or without subgraphs. A subgraph is a cluster: its members stay contiguous in every layer the cluster spans, no outside node enters its column range, long edges travel inside the deepest subgraph both ends share, and a frame with the title in its top border (┌─ Title ───┐; a title row inside for LR/RL) surrounds it. Nested subgraphs nest their frames. An edge crossing a frame border is drawn as a crossing, not a break.

When the layered layout is wider than the available columns, the same flow is laid out once more with tight spacing and node labels wrapped at 16 cells. A flowchart without subgraphs that still overflows is shown as source with the "too wide" note, and /diagram draws it at full size. A flowchart with subgraphs stays drawn in the chat: an LR flow is laid out top-down (RL as BT), and only when that overflows too does the renderer fall back to the stacked single-column scene (each box under the previous one, connections on side channels), which is also what graph-scene.ts still provides to the class, state, ER, architecture and event-modeling families. Known limits: in LR/RL a back edge leaves a one-line box on the same row a forward edge enters, so the two share a segment; subgraphs are keyed by title, so two subgraphs with the same title are drawn as one frame.

Bounded layout and fallback

Inputs are limited to 16,000 characters, 256 lines, 2,048 characters per source line and 1,500 structural delimiters. Graph families also bound nodes/edges; hierarchy depth is capped at 16. Cell grids are capped before allocation at 1,600 columns, 600 rows and 160,000 cells; path enumeration and annotation searches are bounded. Packet fields must be ordered, non-overlapping and within 4,096 bits. Invalid dates, missing dependency IDs, unknown references, malformed numeric values and unclosed blocks fail safely.

The renderer returns rows within the requested cell width or a one-line reason with the original code fence. Labels wrap where a family supports reflow. Diagrams that need more space render at up to 1,600 columns in /diagram, with horizontal/vertical panning. Oversized or unsupported constructs retain source rather than dropping nodes/fields. As in v1, CSS/click directives, C4 layout/update hints, and chart display hints do not control terminal styling. Gantt supports the v1 date/day subset; browser-only calendars and alternative date formats fall back rather than guessing dates.

Evidence

apps/cli/test/fixtures/mermaid-ui9.json contains two distinct fixtures per family, including v1 matrix/regression sources. ui-9.test.ts checks structure, labels, relationships, cell width, malformed inputs, Unicode, budgets and the fake app harness. The existing renderer/viewer/lazy/footprint tests remain active.

bun scripts/render-ui9-frames.ts .agents/runs/frames/ui-9 writes <kind>-<n>-100.txt (100×30) and -180.txt (180×50) through the app harness. Matching .canvas.txt files contain the full diagram, including content reached by panning. All data/project directories are temporary; no real provider or user data is used.