mermaid-to-gif
Convert Mermaid code blocks in .mmd or .md files to animated GIFs with customizable animation styles (progressive, highlight walk, pulse flow, wave).
By zc277584121 · 3,458 installs
npx skills add zc277584121/marketing-skills --skill mermaid-to-gif
Source repository · Upstream listing
Skill: Mermaid to GIF
Convert Mermaid diagrams into animated GIFs with rich animation effects. Supports .mmd files and extracting markdown
Data Ingestion Pipeline ← context: "pipeline" → pulse flow
[mermaid block: graph LR with ETL stages]
System Architecture ← context: "architecture" → progressive
[mermaid block: graph TD with layers]
Quick Reference ← context: "reference" → wave
[mermaid block: simple diagram]
bash
python <skill root /scripts/mermaid to gif.py diagram.mmd
bash
python <skill root /scripts/mermaid to gif.py document.md o ./images/
mermaid code blocks and generates one GIF per block.
Multiple files
Replacing mermaid blocks in markdown
After generating GIFs, replace the original markdown
bash
Dark theme with faster animation
python <skill root /scripts/mermaid to gif.py arch.mmd theme dark bg " 1a1a2e" duration 3
High FPS for smoother animation
python <skill root /scripts/mermaid to gif.py flow.mmd fps 15 duration 5
Batch convert all mermaid blocks from a doc
python <skill root /scripts/mermaid to gif.py README.md o ./images/
Custom CSS for special effects
python <skill root /scripts/mermaid to gif.py diagram.mmd custom css my style.css
No loop, suitable for one time playback
python <skill root /scripts/mermaid to gif.py intro.mmd no loop duration 6
Lower resolution for smaller file size
python <skill root /scripts/mermaid to gif.py diagram.mmd scale 1
css
/ Rounded nodes with shadow /
.node rect {
rx: 10;
filter: drop shadow(2px 2px 4px rgba(0,0,0,0.3));
}
/ Thicker edge lines /
.edgePath path {
stroke width: 2.5;
}
/ Custom background for actors (sequence diagram) /
.actor {
fill: e8f4f8;
}
bash
python <skill root /scripts/mermaid to gif.py diagram.mmd custom css my style.css
How It Works
1. Parse input — extract Mermaid code from .mmd or .md files
2. Generate HTML — embed Mermaid.js (CDN) + animation JS/CSS in a self contained HTML file
3. Render — Mermaid.js renders the diagram to SVG in headless Chromium via Playwright (with 2x device scale for retina quality)
4. Scale — small SVGs are automatically scaled up to minimum 700px CSS width for readability
5. Animate — JS animation engine exposes setProgress(t) for frame by frame control (t: 0→1). Elements are collected, sorted by position (respecting LR/TB direction), and animated in interleaved node edge order
6. Capture — Playwright takes a screenshot at each frame step
7. Assemble — FFmpeg two pass palette encoding (palettegen → paletteuse with Floyd Steinberg dithering)
Important Notes
Internet required : Mermaid.js is loaded from CDN at render time
Supported diagram types : flowchart, sequence, class, state, ER, gitgraph, mindmap, pie, gantt, and more
No hidden elements : all 4 styles keep the diagram visible from frame 1 — no waiting for elements to appear
Fallback behavior : for unrecognized diagram types or when no animatable elements are detected, falls back to a whole diagram opacity reveal
Resolution : default scale=2 produces retina quality images (~1400 1600px wide). Use scale 1 for smaller files
GIF size : for very large outputs, reduce FPS to 8, shorten duration, use scale 1 , or use wave style