ブログ作成者がExcalidrawのフレーム自動エクスポート機能を構築、45秒の手作業を完全自動化

何が起きたか

ブログ著者Martin Lyskが、Excalidrawで作成した図表をエクスポートする手動作業を完全に自動化する仕組みを構築した。従来は1回のエクスポートに約45秒かかっていたが、GitHub Actionsとexcalirender を活用することで、Excalidrawファイルの更新を検出し自動でSVGをライト/ダークモード両対応で生成・コミットされる仕組みを実装。図表と テキストの相互修正サイクルを大幅に加速させた。

背景と経緯

Lyskがブログ執筆を開始した際、技術的な説明に使用する図表と本文テキストの相互依存性に直面した。図表の微調整でテキストが書きやすくなり、逆にテキスト修正で図表の情報量調整が必要になるという繰り返しが発生。その際にExcalidrawの手動エクスポートプロセスが大きなボトルネックになっていた。毎回、フレームを選択し、ライトモード/ダークモードそれぞれエクスポートし、ファイル名を付与する手順を踏む必要があり、特にフレーム境界を越えたラベル修正が入ると作業がリセットされてしまう状態が続いていた。

技術的な仕組み

実装されたGitHub Actionsワークフローは以下の流れで動作する：

1. 変更検出：pushまたはPull Request時にgit diffコマンドで変更されたExcalidrawファイル（.excalidraw）を検出
2. フレーム抽出：jq コマンドでExcalidrawファイル内の「frame」要素を抽出し、フレーム名一覧を取得
3. SVG生成：excalidraw を用いて各フレームをライトモード/ダークモード両方でエクスポート。ファイル名は「{フレーム名}-light.svg」「{フレーム名}-dark.svg」形式で自動生成
4. 自動コミット：生成されたSVGファイルを自動でGitにコミット

処理は変更があったファイルのみに対象を限定することで、不要な処理を削減。Excalidraw側でフレーム名に「export_」プレフィックスを付与することで、エクスポート対象を明示的に指定できる設計。

ワークフロー活用のメリット

• 時間削減：45秒/回の手作業が完全に不要に
• 品質保証：ライト/ダークモード両対応が自動で保証される
• 修正サイクル加速：図表修正→テキスト修正の作業サイクルがスムーズに
• 一貫性維持：ファイル名の命名規則が自動で統一される
• 差分追跡：生成されたSVGがGitに記録されるため、図表の変更履歴が明確

試してみるには

GitHub Repositoryにこのワークフロー設定を導入するには：

1. .github/workflows/export-frames.yml ファイルを作成
2. 上記の「Export Excalidraw Frames」アクションコードを貼付
3. Excalidrawで図表を作成する際、フレーム名を設定（例：「architecture」→「architecture-light.svg」「architecture-dark.svg」に自動生成）
4. Excalidrawファイルをコミット・プッシュするとGitHub Actionsが自動実行
5. 数秒後にSVGファイルが自動生成・コミットされて完了

excalirender のインストールはワークフロー内で自動実行されるため、ローカル環境でのセットアップは不要。

参考リンク

• ソース
• Excalidraw - Virtual Whiteboard for Sketching Hand-drawn like Diagrams
• Excalidraw - GitHub Repository
• Hacker Newsでの議論

この記事はAI業界の最新動向を速報でお届けする「AI Heartland ニュース」です。