Present mode in vizzy

Every .vizzy.md file is already a small deck: the diagrams in it, top to bottom. Present mode turns that deck into full-screen slides you can arrow through — handy for a design review, a walkthrough, or just reading a flow without the rest of the canvas in the way.

Enter present mode

Hover any diagram on the canvas and a small toolbar fades in at its top-right corner. The expand icon — Present full screen — opens the deck:

Copy as PNG  ·  Save as PNG…  ·  ⤢ Present full screen

A dedicated full-screen window opens, covering the sidebar, and starts on the diagram you launched from. Each diagram in the file becomes one slide, in document order.

Move through the slides

Key	Action
→  ↓  Space	Next slide
←  ↑	Previous slide
Esc	Exit present mode

On-screen chevrons and an n / N counter sit at the bottom for clicking through, and the ✕ in the top-right also exits. That’s the whole interface — it stays out of the way of the diagram.

Within a slide you can still pinch to zoom, pan with two fingers, and double-click to reset the view — handy for zooming into one corner of a dense diagram mid-walkthrough. Hint badges stay live too, so you can hover or click them to surface detail without leaving present mode.

Smooth animations: keep node ids stable

This is the part worth designing for. When you step between two slides, vizzy doesn’t just cut from one image to the next — it animates. Every node is tracked by its id (the short handle on the left of id[Label]), so a node that appears on both slides keeps its identity across the transition and glides from its old position to its new one. Nodes that exist on only one side fade in or out.

The payoff: if the diagrams in a file share ids, presenting them looks like one diagram evolving rather than a stack of unrelated pictures. Build up an architecture box by box, or walk a request deeper into the system, and the shared pieces stay put while the new ones arrive.

Two slides in the same file, sharing user, web, and api:

```mermaid
flowchart LR
  user[User] --> web[Web]
  web --> api[API]
```

```mermaid
flowchart LR
  user[User] --> web[Web]
  web --> api[API]
  api --> db[(Postgres)]
  api --> cache[(Redis)]
```

Stepping from the first to the second, User, Web, and API slide over to make room as the layout reflows, while Postgres and Redis fade in. Rename api to backend on the second slide and that morph is lost — the old box fades out and a brand-new one fades in, because to vizzy they’re different nodes.

Authoring for a clean walkthrough

Reuse the same short, stable ids across the diagrams you intend to present together, and order the diagrams in the file the way you want them to play. This is the same habit that keeps diagrams readable in general — see Set up an agent and the file format for more on ids and labels.