@oddessentials/odd-mermaid-animator

Transform Mermaid diagrams into animated HTML, GIF, and WebP with directional flow visualization.

Installation

npm install -g @oddessentials/odd-mermaid-animator
# or use npx
npx @oddessentials/odd-mermaid-animator input.md output.html

Usage

CLI

# Basic HTML animation
mermaid-animate input.md output.html

# Export to GIF
mermaid-animate input.md --gif

# Export to WebP (higher quality)
mermaid-animate input.md --format webp

# With options
mermaid-animate input.md --gif --gif-preset discord --gif-duration 5

Options

| Option | Description | |--------|-------------| | --verbose | Enable verbose output | | --gif | Enable GIF export | | --gif-only | GIF only, skip HTML | | --format | Output format: gif (default) or webp | | --gif-preset | Preset: github, discord, social, docs, compact | | --gif-width | Override width | | --gif-height | Override height | | --gif-fps | Frames per second | | --gif-duration | Duration in seconds | | --webp-quality | WebP quality 0-100 | | --webp-lossless | Use lossless compression |

Programmatic API

import { generateHtml, exportToGif, exportToWebp } from '@oddessentials/odd-mermaid-animator';

// Generate animated HTML
const html = generateHtml(mermaidCode, edges, { title: 'My Diagram' });

// Export to GIF
const result = await exportToGif('input.html', 'output.gif', { preset: 'github' });

// Export to WebP
const result = await exportToWebp('input.html', 'output.webp', { quality: 90 });

Supported Diagram Types

• Flowcharts
• Sequence Diagrams
• State Diagrams
• Class Diagrams
• Gantt Charts
• Pie Charts
• Mindmaps
• GitGraph
• Sankey
• Radar

Requirements

• Node.js >= 22.0.0
• FFmpeg (for GIF/WebP export)

Development

# Install dependencies
npm install

# Run tests
npm test

# Lint and format
npm run lint
npm run format

# Run all CI checks
npm run ci

License

See LICENSE for details. © Odd Essentials, LLC