Diff diagrams

Use a diff diagram to explain what changed: in a code review, a migration note, or a walkthrough of a fix. There is no special syntax. Paste git diff output into a ```diff fence and it renders as a diff card.

```diff
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -12,5 +12,6 @@ export async function login(email: string) {
  const user = await findUser(email)
  if (!user) throw new NotFoundError(email)
-  const token = sign(user.id)
+  const token = sign(user.id, { expiresIn: '1h' })
+  await audit.log('login', user.id)
  return respond(token)
}
```

The format is the standard unified diff, exactly as git diff emits it:

• diff --git / index / mode lines are understood. --- / +++ name the file (the a/ / b/ prefixes are stripped), @@ headers set the line numbers, and + / - / space lines are the content. Multiple files in one fence each get their own card.
• The header chip shows the path with +N −M stats, and labels new files (/dev/null old path), deletions, renames (old → new), and Binary files … differ entries.
• Word-level highlights: paired removed and added lines are compared token by token, so the changed words get a stronger wash. The row tint shows where the change is, and the highlight shows what changed.
• Nothing is fatal. A bare hunk with no file headers, or even bare +/- lines, still renders. Unknown metadata lines are skipped, never shown as errors.

Split view and context folding

A vizzy fence directly after the diff adds presentation options:

```vizzy
title Deploy config bump
layout split
collapse 8
```

• layout split renders side-by-side old and new columns instead of the unified stack. Context lines span both sides, and each change block’s removed and added lines pair up row by row. layout unified switches back.
• collapse 8 folds unchanged context runs longer than 8 lines into a ”⋯ N unchanged lines” pill, keeping 3 lines of context around each change. This lets you paste a whole-file diff without filling the canvas.
• title and desc label the card, as on any diagram.

Outside vizzy

A ```diff fence is standard Markdown. GitHub and other Markdown hosts render it as a red/green-tinted code block, so the file stays readable outside vizzy.