AIチュートリアル

live-panelでJSONからアニメーション付きアーキテクチャ図を作成

live-panelのインストール、キャンバスとテーマの設定、JSONからのアニメーション付きアーキテクチャ図の作成、MP4またはHTMLとしてのレンダリング、レイアウトの問題と決定論的な再生を確認するための全フレームの検証方法を学びます。

2026年10月4日約11分で読了

live-panelの機能

live-panelは、1つのJSONシステム記述をアニメーション付きのアーキテクチャ図に変換します。レイアウトは固定されたまま、パケットが配線上を移動し、ログがスクロールし、カウンターが変化し、バーの状態が切り替わり、サイドトリガーが順番に点灯します。

結果はXや小紅書などのプラットフォーム向けにH.264 MP4として書き出すことも、自己完結型のライブWebページとして保持することもできます。このリポジトリは、SKILL.mdファイルを通じてClaude Code形式のスキルとしても動作します。

同梱のCodexエージェント例では、@thedelostによるアーキテクチャ動画のターミナル風の見た目と動きを再現しています。リポジトリには、明るいパステル調のAIアーキテクチャ例とAirbnbの可視化例も含まれています。

主な機能

JSONで定義する設定駆動型ダイアグラム。
ターミナルダークと明るいパステル調のビジュアルテーマ。
4:5、3:4、1:1出力用のキャンバスプリセット。
パケット、パス、ログ、カウンター、ゲージ、トリガー、状態変更のアニメーション。
壁時計によるタイミング、Math.random、CSSアニメーションを使わず、時間だけに基づく決定論的なレンダリング。
MP4への書き出し、または生成したライブHTMLページの保持。
テキストのはみ出し、重なり、シークの一貫性を確認する自動フレームチェック。

必要なツールをインストールする

live-panelはPythonの標準ライブラリを使用するため、pipパッケージは必要ありません。レンダリング前に次のツールをインストールしてください。

Python 3.8以降。
ChromeまたはChromium。
ffmpeg。

リポジトリをダウンロードしたら、python3、ChromeまたはChromium、ffmpegがシステムのパスから利用できることを確認してください。レンダリングスクリプトは、デフォルトでパスからChromeとffmpegを検索します。

同梱の例をレンダリングする

codex

まずはCodexエージェントの設定から始めます。次のコマンドでJSON設定をMP4ファイルにレンダリングします。

python3 scripts/render.py --config examples/codex-agents/config.json --out out.mp4

サンプル設定では、固定位置とアニメーションする機械変数を組み合わせる方法も確認できます。その他のすぐに使える例は、examples/agent-architecture/とexamples/airbnb/にあります。

動画だけでなく生成されたWebページも保持するには、--html-outを追加します。

python3 scripts/render.py \
  --config examples/codex-agents/config.json \
  --out out.mp4 \
  --html-out page.html

生成されたHTMLファイルを対応ブラウザーで開くと、ライブアニメーションを表示できます。--width、--height、--duration、--fps、--chrome、--ffmpeg、--keep-frames、--audio、--crfなどのオプションで出力設定を制御することもできます。

レンダリングしたフレームを検証する

ダイアグラムを公開する前に、フレームチェッカーを実行します。

python3 scripts/check_frames.py \
  --config examples/codex-agents/config.json \
  --out-dir frames \
  --repeat

チェッカーは約120個の時点をサンプリングし、DOM内のテキストのはみ出しと要素の重なりを測定して、代表的なPNGファイルを書き出します。--repeatを指定すると、書き出した各フレームからシークして離れた後、もう一度レンダリングし、結果が同一であることを検証します。問題を検出すると、コマンドはステータス1で終了します。

独自のダイアグラムを作成する

エージェント

サンプル設定ファイルのいずれかをコピーします。
テキスト、数値、色、位置、アニメーション設定を編集します。
コピーした設定をMP4またはHTMLにレンダリングします。
check_frames.pyを実行し、生成されたPNGを確認します。
チェッカーで問題が報告されなくなるまで、レイアウトを調整して繰り返します。

カスタマイズの大部分は設定ファイルで行います。通常のダイアグラム作成では、assets/template.htmlを変更する必要はありません。

キャンバスとテーマを設定する

設定では、キャンバスプリセット、アニメーション時間、フレームレート、任意のプリロールを指定できます。

{
  "canvas": {
    "preset": "3:4",
    "duration": 28,
    "fps": 30,
    "preroll": 0
  },
  "theme": {
    "preset": "light-pastel",
    "colors": {
      "pk": "#f0575f"
    }
  }
}

利用できるキャンバスプリセットは、1200×1500ピクセルの4:5、1080×1440ピクセルの3:4、1080×1080ピクセルの1:1です。ターミナルダークプリセットは、暗いウィンドウ、モノスペース書体、分割されたテキストモードのボックスを使用します。明るいパステル調プリセットは、白い背景、角の丸いパステルボックス、角の丸いSVG矢印、アクティブな項目の柔らかな光彩を使用します。

キャンバスの位置には絶対ピクセル値を使用します。そのため、設定は1つのアスペクト比向けに作成されます。render.py --widthと--heightでレターボックス付きの出力に拡大縮小できますが、通常、異なる比率にするには設定をコピーしてボックスの位置を変更する必要があります。

要素と動きを記述する

設定スキーマは、複数のビジュアル要素タイプに対応しています。

ラベルや単独のテキストにはtextを使用します。
塗り、境界線、角丸、破線スタイル、行ごとの項目、バー、テキストランを含むコンテナにはboxを使用します。
配線や接続にはlineとpathを使用します。
記号や区切り線にはglyphとruleを使用します。
ポリラインに沿って移動するパケットにはflowを使用します。
トリガー矢印にはtarrowを使用します。
スクロールまたは変化するログ内容にはlogを使用します。

変化する値はmachinesの下で定義します。使用可能なマシンタイプにはcounter、cycle、gauge、any_low、lane、triggersがあります。個々の要素に時間ロジックを直接追加するのではなく、これらの変数を使ってビジュアルの状態を制御します。

airbnb

ボックス、パス、フロー、ライン、ランではwhenとthenの条件を使用できます。たとえば、{"var":"seq.i","in":[0,1,2]}のような条件を使うと、マシン変数が列挙された値のいずれかと一致したときに項目をハイライトできます。複数の条件はAND式として扱われます。

決定論的な再生を理解する

生成されたページにはwindow.seek(t)が公開されます。すべてのビジュアルは時間値tの純粋関数であり、擬似乱数の選択には固定シードの整数ハッシュを使用します。通常のブラウザモードでは、requestAnimationFrameがアニメーションを駆動します。レンダリング時には、エクスポーターがseek(i/fps)を使って各フレーム時刻へ移動し、その結果をキャプチャします。

この設計により、エクスポートしたフレームを再現可能にできます。また、フォント、位置、アニメーション条件を変更した後にフレームチェッカーを使用すべき理由も説明できます。

タイポグラフィとレイアウトを改善する

フォントファイルは同梱されていません。ターミナルテーマでは、JetBrains Mono、IBM Plex Mono、DejaVu Sans Mono、Noto Sans Mono CJK SC、汎用の等幅フォントの順にフォールバックします。ライトパステルテーマでは、Noto Sans CJK SC、PingFang SC、Microsoft YaHei、Helvetica、Arialを使用し、大きなタイトルにはNoto Serif CJK SCを使用します。

例に近づけるには、JetBrains MonoとNoto CJKフォントをインストールしてください。絵文字アイコンには、Noto Color Emojiなどのカラー絵文字フォントも必要です。フォントによってグリフの幅が異なるため、インストール済みのフォントを変更した場合は、必ずcheck_frames.pyを再実行してください。

便利なレンダリングのヒント

意図するビジュアルスタイルに最も近い例を出発点として使用します。
選択したキャンバス比率に合わせて座標を統一します。
動画の作成に使用した正確な画像を確認する必要がある場合は、--keep-framesを使用します。
音声トラックが不要な場合は、--audio noneを使用します。
エンコードされた動画の品質を調整する必要がある場合は、--crfを変更します。
レイアウト、フォント、設定を大きく変更するたびにチェッカーを実行します。
Claude Codeでは、リポジトリを~/.claude/skills/live-panel/、またはエージェントのスキルローダーが使用するディレクトリに配置します。

クレジットとライセンス

コードはMITライセンスで公開されています。Codexエージェントの例で再現されたビジュアルデザインは@thedelostに帰属し、ライトAIアーキテクチャのインフォグラフィックは原作者である小紅書クリエイターの林纾に帰属します。Airbnbの数値は、AirbnbのリーダーたちがLatent.Spaceのインタビューで述べた内容に基づいており、アニメーションするカウンターは説明用のものです。

まとめ

live-panelは、構造化されたシステム記述を洗練された再現可能なモーショングラフィックスへ変換するための実用的なワークフローを提供します。例をコピーし、JSONを編集して、キャンバスとテーマを選択し、MP4またはライブページをレンダリングします。その後、決定論的なフレームチェッカーを使って、公開前にレイアウトの問題を見つけます。