Skip to content

Render Mermaid diagrams in the TUI - #622

Open
acking-you wants to merge 1 commit into
vercel-labs:mainfrom
acking-you:feat/tui-mermaid-renderer
Open

Render Mermaid diagrams in the TUI#622
acking-you wants to merge 1 commit into
vercel-labs:mainfrom
acking-you:feat/tui-mermaid-renderer

Conversation

@acking-you

Copy link
Copy Markdown
Contributor

Closes #621

Summary

  • render completed mermaid code fences as bounded Unicode diagrams in the TUI transcript
  • support common flowchart, state, class, entity-relationship, and sequence diagram syntax
  • split parsing, owned models, label normalization, layout, and canvas painting into focused modules
  • preserve the ordinary source code block for unsupported, over-budget, or too-wide diagrams
  • recompute presentation from semantic transcript content on resize, making diagram to source fallback and restoration reversible
  • sanitize terminal control characters and bound parser, graph, sequence, label, and canvas allocations

The width-aware fallback follows the UX established by Grok Build's terminal Mermaid renderer: render the diagram when the TUI can carry it, otherwise keep the original source readable.

Example

```mermaid
flowchart LR
  A[Request] -->|validate| B[Response]
```

At a wide transcript width this renders as terminal-native diagram art. Shrinking below the diagram's required width restores the fenced Mermaid source; widening the terminal renders the diagram again.

Verification

  • zig fmt --check src/
  • zig build -Doptimize=ReleaseSafe
  • focused ReleaseSafe Mermaid suite: 19/19 tests passed
  • ./scripts/check-public-surface.sh
  • deterministic tmux TUI E2E: 1/1 passed with 7 assertions

The E2E covers the complete requested lifecycle in one real model turn: an open fence stays source, the closed fence renders at 90 columns, a resize to 20 columns falls back to source, and a resize back to 90 columns restores the diagram. It also verifies one model request, a live pane, clean stderr, and a usable composer after completion.

Classification

type: feature

@acking-you
acking-you marked this pull request as ready for review September 3, 2026 17:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Render Mermaid diagrams in the TUI

1 participant