Render Mermaid fenced code blocks in the Codex CLI TUI

Open 💬 0 comments Opened Jul 27, 2026 by SCPZ24

What variant of Codex are you using?

codex-cli 0.145.0

What feature would you like to see?

I find it efficient to ask my agents to draw me some mermaid to explain ideas, processes and designs.

So it would be helpful if the Codex CLI TUI could render Mermaid fenced code blocks as terminal-native diagrams instead of showing the raw Mermaid source.

For example, when Codex returns:

flowchart TD
   A[Ask Codex] --> B[Model response]
   B --> C{Contains Mermaid?}
   C -->|yes| D[Render diagram in TUI]
   C -->|current behavior| E[Show raw Mermaid source]

the current terminal UI displays the Mermaid code block as plain source text. That
is technically correct Markdown handling, but it makes architecture diagrams,
workflows, state machines, and data-flow explanations harder to read inside the CLI.

### Expected behavior

When a closed fenced code block has mermaid as the first info-string token, the
TUI could render it as a terminal-friendly diagram, for example using Unicode /
ASCII box drawing.

Unsupported or invalid Mermaid should gracefully fall back to the existing code
block rendering.

Raw transcript, copy, and non-pretty output paths should ideally preserve the
original Mermaid source.

### Why this matters

Codex often explains code architecture, control flow, state machines, and multi-step
workflows. Mermaid is a common Markdown format for those explanations, but terminal
users currently need to mentally parse the Mermaid source or copy it into another
renderer.

A built-in terminal-native preview would keep this workflow inside Codex CLI and
make architectural responses easier to understand.

### Suggested constraints

I think this would be most useful if implemented without requiring external
processes or heavyweight runtime dependencies:

  • no shelling out to mmdc
  • no Node / Chromium dependency
  • no network access
  • no image preview dependency
  • graceful fallback to the original source when rendering fails

### Streaming behavior

One implementation detail that may matter for the TUI: Mermaid layout can change
globally as new lines arrive.

For example, adding one more edge or a longer label can change the layout of earlier
nodes. Because of that, it may be better to render Mermaid only after the closing
fence has been observed, or keep the Mermaid block in the mutable streaming tail
until it is complete.

This is similar in spirit to how table rendering often needs special handling during
streaming.

### Possible implementation direction

This could be handled in the existing Markdown rendering path by detecting fenced
code blocks whose first language token is mermaid.

A small first version could support only common flowcharts:

``mermaid
flowchart TD
A[Start] --> B{Decision}
B -->|yes| C[Done]
B -->|no| D[Fix]
``

More diagram types could be added later if the approach works well.

### Related issues

I found a few related issues, but they seem to target different surfaces or broader
interaction models:

  • #32356 asks for Mermaid rendering in Codex remote threads on Android.
  • #10842 asks for Mermaid diagrams to be expanded or viewed full-screen.
  • #35100 proposes a broader /design mode with a persistent architecture canvas.
  • #18906 asks for Markdown math rendering in the TUI.

This request is specifically about rendering standard Mermaid fenced code blocks
inside the Codex CLI terminal UI.

If this is already tracked elsewhere, I am happy to close this and follow the
existing issue.

Additional information

_No response_

View original on GitHub ↗