Mermaid To Gif

Turns Mermaid diagrams into animated GIFs with four animation styles that each keep the full diagram visible from frame one. Progressive mode dims everything to 25% then lights up nodes and edges in sequence. Pulse flow animates dashed lines along edges at uniform speed for data pipelines. Highlight walk sweeps a blue spotlight through step-by-step processes. Wave just ripples brightness across static diagrams. Works on standalone .mmd files or batch extracts all mermaid blocks from markdown docs. The context-aware style selection is the smart bit: it tells you to read the surrounding markdown text and pick pulse flow for "data flows through" sections, progressive for "three layer architecture" parts, not just slam the same style on everything.

skills.sh installs: 3.8K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add zc277584121/marketing-skills --skill mermaid-to-gif --agent claude-code

Installs into .claude/skills of the current project.

Files

Skill: Mermaid to GIF

Convert Mermaid diagrams into animated GIFs with rich animation effects. Supports .mmd files and extracting ```mermaid code blocks from .md files.

Prerequisites: FFmpeg, Python 3.8+, Playwright (pip install playwright && playwright install chromium)

When to Use

The user wants to convert Mermaid diagrams to animated GIFs
The user has .mmd files or .md files containing mermaid code blocks
The user needs animated visuals for presentations, documentation, or social media
The user wants to batch-convert all mermaid blocks in a document

Context-Aware Style Selection

IMPORTANT: When converting mermaid blocks from .md files, read the surrounding markdown context to choose the most appropriate animation style for each diagram. Do NOT blindly apply the same style to all blocks.