Diff Image Generator
About the Diff Image Generator
Diff Image Generator takes a unified diff — the patch format produced by tools like git diff with its @@ hunk headers, plus-prefixed additions and minus-prefixed deletions — and renders it as a color-coded image card. Added lines are tinted green, removed lines red, and context lines stay neutral, recreating the familiar review view as a clean, shareable graphic.
You paste the diff text and the tool parses each line by its leading marker, applies the appropriate background and text color, draws the hunk headers, and frames the whole thing in a window-style card exportable as an image. This makes a code change legible at a glance even to people who never open the repository, and it sidesteps the formatting problems you get when pasting raw diffs into chat or slides where indentation and coloring are lost.
It's a natural fit for changelogs, pull-request summaries, blog posts explaining a fix, and social announcements of a notable patch. It sits alongside the Code Image Generator, which renders a whole snippet, and the Terminal Screenshot Generator, which renders shell sessions — here the focus is specifically the before/after delta of a unified diff.
Practical tips: feed it genuine unified-diff output (for example from git diff, git show, or diff -u) so the +, -, and @@ markers are present and parse correctly. Keep the diff focused on one logical change with a few lines of surrounding context, since a sprawling multi-file patch becomes unreadable as a single card, and choose a theme whose green and red provide enough contrast against your destination background.
Frequently asked questions
- What diff format does it expect?
- Unified diff format — the output of commands like git diff, git show, or diff -u, including @@ hunk headers and lines prefixed with + for additions and - for deletions.
- How does it decide which lines are red or green?
- It reads each line's leading marker: + lines are tinted green for additions, - lines red for deletions, and unprefixed context lines stay neutral.
- Can I render a multi-file diff?
- You can, but keep it focused. A single logical change with a little context reads clearly as one card; a sprawling multi-file patch becomes too small to follow.
- How is this different from the Code Image Generator?
- The Code Image Generator highlights a full snippet by language; this tool specifically visualizes the before/after delta of a unified diff with add/remove coloring.
- Is the diff sent anywhere?
- No. Parsing and rendering happen locally in your browser, so your patch text stays on your device.
Turn code into themed SVG and PNG share cards
Render shell output as terminal-style snapshots
Encode and decode Base64
Encode and decode URL-encoded strings
Parse URL into components
Generate QR codes from URLs or text