Explain logic
as a deck.
Turn any code path, query, or architecture into a horizontal, flip-through slide deck — Mermaid diagrams instead of prose, no vertical scroll. One slide, one screen, one idea.
Real deck, rendering now. Open fullscreen ↗ — flip with ← →, Space, or swipe.
Why a deck
One message per slide
One slide equals one screen. If it doesn't fit, you split it — so each idea lands on its own instead of drowning in a scroll.
Diagrams are the content
Flowcharts, sequence diagrams, and before/after pairs do the work. Prose shrinks into small WHY, CAUTION, and FACTS panels.
Flip, don't scroll
Arrow keys, Space, on-screen buttons, touch swipe, dots, a progress bar. Horizontal by design — like the logic it shows.
Eight frames, one file
How it works
Copy the template
Grab TEMPLATE.html — a deck skeleton with eight slide types and the navigation already wired in.
Fill the slides
Replace the {{...}} placeholders; add or remove section blocks. The nav counts them for you.
Open it
Double-click. Mermaid renders and the scroll-snap navigation is already wired in. Ship the single file anywhere.
What's inside
| File | Purpose |
|---|---|
| SKILL.md | Skill router plus the slide-decomposition workflow and checklist |
| TEMPLATE.html | Self-contained deck skeleton — scroll-snap nav, eight slide types |
| MERMAID-SAFE-SUBSET.md | The Mermaid syntax subset that renders without errors |
| examples/checkout-validation.html | A complete, generic example deck |
Install
As a Claude Code skill
# clone into your skills dir git clone https://github.com/cskwork/mermaid-slide-deck.git \ ~/.claude/skills/mermaid-slide-deck
As a plain HTML template
# grab the single file curl -O https://raw.githubusercontent.com/cskwork/mermaid-slide-deck/main/TEMPLATE.html