---
title: Tree diagrams in chat
---

# Tree diagrams in chat

## What it is

Agents draw hierarchies with characters:

```
Happy customers
├── Their expectations
│   ├── Expectations we create
│   └── Expectations they bring
└── Their actual experience
    ├── Buying and receiving
    └── Getting help
```

That works because every line is padded to sit in the right column. The meaning lives in the
alignment, not in the characters themselves.

Which means the diagram only survives while the box on screen is wider than its widest line. On a
phone it is not. The block wraps, a label folds onto the next row flush against the `│` rail, and
the alignment that _was_ the structure is gone. The diagram reads as noise.

Making the text smaller or adding a sideways scrollbar does not fix this — it just makes an
unreadable diagram smaller, or one you have to pan across.

## Where to find it

Nothing has to be opened: a tree block is drawn where the agent wrote it, inline in the message. The switch that turns the behaviour off lives at **Settings → Appearance → Message Formatting → "Show tree diagrams as interactive trees"**.

## How it behaves

### What happens now

A tree is read back into an actual hierarchy and drawn as a real tree:

- **Labels wrap under themselves**, inside their own node, instead of into a neighbouring column.
  This is the part that fixes phones.
- **Each branch folds.** Click anywhere on a node — the chevron, its label, or the description
  under it — to collapse the branch you are not interested in; click again and it comes back.
  The vertical guide line beside a branch folds it too, the way an outliner does.
- **The whole thing folds at once.** A button above the tree collapses every branch down to the
  root, so a long diagram becomes a one-line summary you can reopen a branch at a time. The same
  button flips to _Expand all_ once it is folded.
- **Depth is shown by indentation, a soft guide line, and label weight** — not by character
  padding — so it survives any screen width. The root is boldest, the level under it a step
  lighter, and everything deeper is normal text, which lets you find the top of a branch without
  reading it. Everything on the same level looks the same, whether or not it has children.
- **A description written under a label stays with that label**, in smaller muted text. Agents
  write these a lot:

  ```
  ├── Buying and receiving
  │   Choosing, ordering, paying, and getting the product
  ```

- **A headline that runs onto a second line is still one headline.** If the top line of a diagram
  is long enough to be written across two rows, both rows are read as the single line they were
  meant to be — the diagram still draws as a tree rather than falling back to plain text.

Everything starts fully expanded, so you never have to click to see something the plain block
would have shown you.

### What it will never do

- **Touch a block it cannot fully read as a tree.** There is no "close enough". If a single line
  does not fit the shape, the whole block renders exactly as it always has.
- **Touch anything you labelled as code.** A block tagged with a real language is left alone
  whatever is inside it.
- **Redraw a table, a drawn panel, or a log.** These are explicitly refused.
- **Change what you copy.** Copying gives you the exact characters the agent wrote, in either
  view.
- **Cost anything or wait on anything.** There is no AI call, no network request, and nothing
  cached. It is plain text parsing that finishes instantly.

### Seeing the original

A three-dot (⋯) menu sits at the top-right of the block, next to the copy button. Open it and
choose **Show original text** to see the exact block the agent wrote; the same menu then offers
**Show as a tree** to flip back.

### Diagrams it deliberately leaves alone

Some things look like trees but are not, and drawing them as trees would assert a structure the
author did not mean:

- **Flow diagrams that use arrows** (`├─▶`, `├─◀`). The arrows mean sequence, not containment.
- **A tree drawn with no root line** — just branches. Rare enough (about 1 in 100 real diagrams)
  that it is left as plain text rather than guessed at.
- **`tree`'s own summary line** (`2 directories, 0 files`) at the bottom of its output.

In every one of these the block renders as it always did, so nothing is lost.

### If you would rather it did not

**Settings → Appearance → Message Formatting → "Show tree diagrams as interactive trees."** Turn
it off and every fenced block renders exactly as it did before this existed.

## Related

- [Code blocks that are really prose](code-block-prose-rendering.md) — the sibling feature, for
  when a fence was a lie about prose rather than about structure. They share the same three-dot
  menu.
- [Agent Message Display](agent-message-display.md) — how agent narration and tool activity are
  laid out around these blocks.