ivarvong/lantern

これは何？

主な機能

• 01シーン名とステップ名を指定して直接リンクできるアニメーション付きステップ
• 02ブラウザーではライブDOMに、WorkersとNodeでは文字列としてSVGを描画
• 03インストール済みフォントに依存せず、埋め込みグリフアウトラインからテキストを描画
• 04Mermaidのフローチャート解析と、シーンを記述するJSONドキュメント入力
• 05SVGやフレームのエクスポートに加え、テキスト、状態トレース、インデックスを出力
• 06JSONで記述したシーンをレンダリングするCloudflare Workers上のHTTP API

ユースケース

• 共有可能なリンクを使って、コード変更をレビュー担当者に段階的に説明する
• MermaidまたはJSONから、リクエストフローやアーキテクチャのアニメーション付き図を生成する
• ヘッドレスブラウザーを使わずに、サーバー上で解説用SVGフレームを生成する
• アニメーション付きの解説を、構造化されたテキストと状態トレースとしてAIエージェントに提供する

クイックスタート

1. 1

   リポジトリをクローンする

   git clone https://github.com/ivarvong/lantern && cd lantern
2. 2

   依存関係をインストールする

   npm install
3. 3

   開発サーバーを起動してデモシーンを開く

   npm run dev

使う前に知っておきたいこと

• !まだ npm で公開されていないため、使用するにはリポジトリをクローンする必要があります。
• !ツールとテストをTypeScriptのまま直接実行するには、Node 24が必要です。
• !現時点では対象外です：3D、パスのブーリアン演算、LaTeX、対応するモーフ。

収録されている特集

トピック

よくある質問

lantern とは？

ブラウザー、Cloudflare Workers、NodeでSVGを描画する、アニメーション付きの段階的なコード解説を構築できる依存関係ゼロのTypeScriptライブラリ。 Lanternは、コード変更を視覚的に説明することを目的とした、Python製アニメーションエンジンmanimのコアモデルをJavaScript/TypeScriptに移植したライブラリです。シーンは、ステップとアニメーションを宣言する非同期のconstruct()メソッドを持つクラスとして定義します。各ステップには?scene=&step=のようなURLから直接アクセスでき、シーンごとにテキスト形式と構造化された状態トレースも出力できるため、エージェントでも内容を読み取れます。

lantern は無料で使えますか？ライセンスは？

lantern は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

lantern は今もメンテナンスされていますか？

活発にメンテナンス中。lantern の最終コミットは 2026年10月27日 です。

lantern は何に使えますか？

共有可能なリンクを使って、コード変更をレビュー担当者に段階的に説明する MermaidまたはJSONから、リクエストフローやアーキテクチャのアニメーション付き図を生成する ヘッドレスブラウザーを使わずに、サーバー上で解説用SVGフレームを生成する アニメーション付きの解説を、構造化されたテキストと状態トレースとしてAIエージェントに提供する

lantern のインストール方法は？

リポジトリをクローンする: git clone https://github.com/ivarvong/lantern && cd lantern 依存関係をインストールする: npm install 開発サーバーを起動してデモシーンを開く: npm run dev

lantern はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/ivarvong/lantern