antvis/Infographic を採用する前に読む: 宣言的シンタックスとストリーミング描画の実際
🦋 An Infographic Generation and Rendering Framework, bring words to life with AI!
ひと目でわかる
- これは何？
- LLM にインフォグラフィックの構文を書かせ、SVG として描画する TypeScript フレームワーク。約200のテンプレートとエディタを同梱する一方、構文の自由度とテンプレート依存という制約がある。
- 誰に向いている？
- LLM の出力をそのまま図解に流し込みたいプロダクト、とくにチャットやスライド生成の UI を持つチームに向く。逆に、ピクセル単位のレイアウト制御や独自の図法をゼロから設計したい場合、組み込みの約200テンプレートと構文の語彙が上限になるため向かない。
- 商用利用できる？
- できます。MIT は寛容なライセンスで、著作権表示とライセンス表示を残せば、使用・改変・販売が可能です。
- 今もメンテナンスされている？
- されています。最後のコミットは 25 日前です。
- 何の言語で書かれている？
- 主に TypeScript です（GitHub の言語統計による）。
回答はプロジェクトの GitHub データ（最終同期：2026年9月15日）と当サイトの分析に基づくもので、法的助言ではありません。
オープンソース詳細解説
このフレームワークが埋めるのは「文章から図までの距離」
LLM に図解を作らせようとすると、たいてい SVG や Canvas の命令列を直接書かせることになり、座標やパスの数値で崩れる。antvis/Infographic はその中間に宣言的な構文を置く。README の説明では「AntV's next-generation declarative infographic visualization engine」であり、専用のシンタックスで記述した内容を SVG として描画する。対象は、生成 AI の出力を UI に表示したいフロントエンド開発者、とくにチャット応答やスライド生成の途中経過をリアルタイムに見せたい場合である。図の座標を計算する仕事をフレームワーク側に寄せ、呼び出し側は「どのテンプレートに、どのデータを入れるか」だけを書く。
描画の流れ: 構文テキストが SVG になるまで
中心になるのは Infographic クラスのインスタンスである。README の例では container、width、height、editable を渡して生成し、render() に構文文字列を渡す。構文は先頭行でテンプレートを指定し、その下にデータをインデントでぶら下げる形式だ。例では infographic list-row-simple-horizontal-arrow というテンプレート名の後に data、lists と続き、各要素が label と desc を持つ。つまり入力は JSON ではなく、YAML に近い行指向のテキストである。この形式を選んだ理由は README の features に書かれており、AI 生成向けに調整された構文で、ストリーミング出力と描画に対応するとされている。出力は SVG が既定で、README は視覚的な忠実さと編集のしやすさを理由に挙げている。
ストリーミング描画は構文の寛容さに依存している
README が示すストリーミングの例は短い。buffer にチャンクを足しながら、そのたびに infographic.render(buffer) を呼ぶだけである。ここで効いているのは構文の fault tolerance で、途中までしか届いていない不完全なテキストでも描画が成立するように作られている。LLM のトークンが届く順に図が組み上がっていく体験は、この性質なしには成立しない。実装上の注意として、render() をチャンクごとに呼ぶということは、描画処理の頻度がトークン到着速度に比例するということでもある。README にはスロットリングや差分更新の仕組みについての記述はなく、その点は自分で計測するしかない。
導入: npm インストールと最小の初期化
配布は npm で、README のコマンドは npm install @antv/infographic である。初期化は new Infographic({ container, width, height, editable }) の形で、container にはセレクタ文字列を渡す。width と height は例では '100%' が指定されており、親要素のサイズに追従させられる。editable: true を渡すと、README の features にある組み込みエディタが有効になり、AI が生成した結果をそのまま編集できる。テンプレートは約200種類が同梱されると README は述べており、データ項目用のコンポーネントとレイアウトも含まれる。テーマは手描き風、グラデーション、パターンなどのプリセットがあり、カスタマイズも可能とされている。
AI エージェント側から使う: skills の配布形態
リポジトリには skills ディレクトリがあり、AI エージェントに読み込ませるためのスキルが配布されている。README が挙げるのは infographic-creator、infographic-syntax-creator、infographic-structure-creator、infographic-item-creator、infographic-template-updater の5つで、それぞれ HTML ファイルの生成、説明からの構文生成、独自構造の設計、独自データ項目の設計、テンプレートライブラリの更新を担う。Claude Code ではプラグインのマーケットプレイス経由か、リリースの skills.zip を .claude/skills に展開する手動インストールが案内されている。手動の手順は VERSION 変数にタグを入れて curl で zip を取得し、unzip で展開する。Codex 向けには $skill-installer install でスキル単位の URL を指定する形が示されている。
テンプレート駆動であることが意味する制約
この設計の弱点は、表現の自由度がテンプレートの語彙に縛られる点である。構文の先頭で指定するのはテンプレート名であり、描画の構造はそのテンプレートが決める。README は独自の構造設計やデータ項目設計のためのスキルを用意しているので、用意された約200種で足りなければ自分で追加する道はある。ただしそれは、テンプレートを書いてリポジトリの流儀に合わせて保守するという作業を引き受けることを意味する。ピクセル単位の配置や、既存のデザインシステムに厳密に合わせた図を求められる場面では、汎用の SVG 生成ライブラリや D3 系のほうが素直な選択になる。構文が AI 向けに最適化されているぶん、人間が手で細部を詰める用途には向いていない。
代替との違い: 図のライブラリではなく構文のレイヤー
比較対象として分かりやすいのは、ECharts や AntV G2 のような汎用の可視化ライブラリである。これらはデータ系列とエンコーディングを指定してチャートを描く。数値の比較や時系列の表現に強く、軸やスケールの制御も細かい。antvis/Infographic が扱うのはチャートではなく、手順、リスト、比較といった情報の図解であり、入力もデータ系列ではなく自然言語に近いテキストである。もう一つの近い選択肢は、LLM に SVG を直接生成させる方法だ。この場合はテンプレートの制約がない代わりに、出力のたびに構造が変わり、崩れもする。antvis/Infographic はテンプレートという固定点を置くことで、ストリーミング中の途中状態でも破綻しにくくしている。制約と引き換えに安定性を得る取引だと読める。
ライセンスと保守の見通し
ライセンスは MIT で、リポジトリの LICENSE ファイルを参照する形になっている。商用利用を含めて条件が緩い部類だが、同梱テンプレートやテーマの扱いについては配布物の表記を自分で確認する必要がある。ここは法的助言ではないので、判断は各自で行ってほしい。保守面では、リリースが 0.2.x 系で続いており、0.2.16、0.2.17、0.2.19 と 2026 年前半に複数回の更新がある。メジャーバージョンが 1 に達していないため、構文やオプションの互換性が今後も保証されるとは限らない。package.json でバージョンを固定し、構文リファレンスとテンプレート一覧の差分を更新時に確認する運用が現実的である。
編集部の結論
LLM の出力をそのまま図解に流し込みたいプロダクト、とくにチャットやスライド生成の UI を持つチームに向く。逆に、ピクセル単位のレイアウト制御や独自の図法をゼロから設計したい場合、組み込みの約200テンプレートと構文の語彙が上限になるため向かない。導入前に確認すべきは、対象バージョンの構文リファレンスとテンプレート一覧が自分の表現したい図に対応しているか、そして editable: true で有効になるエディタがどの程度の編集操作を許すかである。
コミュニティノート