mermaid-to-gif は何をしますか？
.mmd または .md ファイル内の Mermaid コードブロックを、カスタマイズ可能なアニメーションスタイル（プログレッシブ、ハイライトウォーク、パルスフロー、ウェーブ）でアニメーション GIF に変換します。
概要
このスキルは、Mermaid 図を動的なアニメーション GIF に変換することで、ドキュメントやプレゼンテーションでの視覚的な説明を強化します。各アニメーションスタイルは、図の要素を段階的に表示したり、強調したりする独自の方法を提供します。
利用可能なアニメーションスタイル
- progressive: 図の要素を左から右、上から下へと順次表示します。
- highlight walk: 図の各要素を順にハイライトしながら、その他の要素は薄く表示します。
- pulse flow: 図内のエッジ（フローの矢印）をパルス状にアニメーション表示します。
- wave: ウェーブパターンで要素をフェードイン表示します。
使用方法
前提条件
- 入力ファイル（.mmd または .md）が利用可能であること。
- Mermaid コードブロックが正しい構文で記述されていること。
ワークフロー
- ユーザーが入力ファイルと希望するアニメーションスタイルを指定します。
- 内部で Puppeteer を使用して Mermaid 図をレンダリングおよびキャプチャします。
- 各フレームを処理し、選択したアニメーションスタイルに従ってアニメーション GIF を生成します。
- 出力 GIF ファイルが作成されます。
入力例（.mmd ファイル）
graph TD
A[開始] --> B[処理]
B --> C[終了]
コマンド例
npx mermaid-to-gif input.mmd output.gif --style progressive
制限事項
- 大きな図の場合、生成時間が長くなることがあります。
- すべての Mermaid 図タイプが完全にサポートされているわけではありません。
- 出力 GIF のファイルサイズは、図の複雑さに依存します。
トラブルシューティング
- 出力が生成されない: 入力ファイルに有効な Mermaid コードブロックが含まれていることを確認してください。
- アニメーションが正しく表示されない: 指定したスタイルがサポートされているか確認してください。