# Markdown and images

> Preview markdown with Mermaid diagrams, and view images.

## Markdown preview

A `.md` file opens as a rendered preview. The header toggle switches between **Show preview** and **Edit source**; the source view soft-wraps and saves with <Kbd>⌘</Kbd> <Kbd>S</Kbd>. The preview itself is read-only, and it reloads when the file changes on disk.

The preview renders CommonMark with GitHub tables, task lists, strikethrough and footnotes, plus:

- **Code blocks** with syntax highlighting and a copy button.
- **Images,** local or remote. Alt text shows if one fails to load.
- **YAML frontmatter** as a metadata card.
- **HTML blocks** and **Mermaid diagrams.**

### Links

| Link                                  | Click does                                   |
| ------------------------------------- | -------------------------------------------- |
| `https://…`                           | Opens it in a Rexa browser tab.              |
| `docs/setup.md`, `/README.md`         | Opens the file in a tab. `/` is the project root. |
| `src/main.rs#L12`, `src/main.rs:12`   | Opens the file at that line.                 |
| `#install`                            | Scrolls to the heading.                      |
| `guide.md#install`                    | Opens the file, then scrolls to the heading. |

A broken link shows a message. Links to files work the same in agent transcripts and pull request pages.

### Outline

Turn on the outline with the header glyph, **markdown: toggle outline** in the palette, or `markdown.outline` in Settings → Markdown. It appears beside the preview when the file has two or more headings, highlights the section you are reading, and scrolls on click.

### Select, copy and comment

- **Selection crosses blocks.** <Kbd>⌘</Kbd> <Kbd>C</Kbd> copies the rendered text; right-click → **Copy as Markdown** copies the source.
- <Kbd>⌘</Kbd> <Kbd>I</Kbd> comments on the selection. See [Comments](/docs/review/comments).
- <Kbd>⌘</Kbd> <Kbd>L</Kbd> adds the selection to an agent's prompt.

## Mermaid diagrams

Code blocks fenced as `mermaid` render as diagrams with the author's `classDef`, `class`, `style` and `linkStyle` styling.

| Supported                                          | Falls back to a code block                    |
| -------------------------------------------------- | --------------------------------------------- |
| flowchart / graph, sequence, class, state, ER, pie, gantt, gitGraph, mindmap, journey, timeline, quadrant, xychart | sankey, C4, requirement, block, packet, radar, treemap, architecture |

Hover a diagram for its controls:

- **Zoom** in and out, or **fit** to the width. Pinch on the trackpad zooms too.
- **Fullscreen.** Inside it, <Kbd>-</Kbd> and <Kbd>=</Kbd> zoom, <Kbd>0</Kbd> fits, <Kbd>Esc</Kbd> closes.
- **Copy** puts the diagram on the clipboard as SVG.

Click a flowchart node, edge label or subgraph to select it and comment on it. **Settings → Markdown → Diagram size** scales every diagram from 75% to 200% (`markdown.diagram_scale`).

Not supported: `%%{init}%%` theme variables, `click` handlers, per-subgraph `direction`, saving as PNG, and drag to pan.

## Images

PNG, JPEG, WebP, GIF, BMP and TIFF open in an image tab at natural size, shrunk to fit if larger. A caption shows the format, size in pixels and file size. Zoom with the buttons in the header, from 10% to 800%. The image reloads when the file changes.

SVG files open as a preview with a toggle to edit the source.