AntV Infographicとは｜AIが書いた構文をSVG図解にするエンジンを日本語で動かして実測

AntV Infographic は、短いテキストの構文から SVG のインフォグラフィックを描く TypeScript 製のエンジンだ。Ant Group の可視化チーム AntV が MIT ライセンスで公開しており、2026-10-16 時点の GitHub Star は約7.0k、npm の最新版は 0.2.20（2026-08-19 公開）。本記事では 0.2.20 を Linux に入れ、日本語の図を実際に描き、テンプレートの数、描画時間、AI の出力を少しずつ流し込むストリーミング描画、Claude Code 向けスキルの中身を確かめた。2026年5月の @antv 系 npm 汚染でこのパッケージが該当したかも、一次データで確認している。

スキルとして Claude Code に組み込む使い方が中心になるため、Claude Code 全体の設定や運用は Claude Code｜2026年版・インストールからCLAUDE.md・Hooks・本番運用までの実装手引き を先に読むと位置づけがつかみやすい。

AntV Infographicとは：構文からインフォグラフィックを描くエンジン

README は自らを「宣言的なインフォグラフィック可視化エンジン」と呼び、特徴に「AI フレンドリー」「約200の組み込みテンプレート」「手描き風やグラデーションのテーマ」「組み込みの編集機能」「SVG 出力」を挙げる。読者の3つの疑問に答えると次のとおりだ。

・何ができる：箇条書き・手順・比較・階層・関係図・簡単なグラフを、テンプレート名とデータを書くだけで図にする
・何を解決する：図の見た目をテンプレート側に持たせるので、AI には中身のテキストだけを書かせればよい
・何を代替する：スライドや記事の説明図を手で描く作業と、画像生成 AI に図そのものを描かせるやり方

構文の1行目は infographic <テンプレート名>、続く data に title と項目を2字下げで書く。テンプレート名の先頭がデータの形を決め、list- なら lists、sequence- なら sequences、compare- なら compares に項目を並べる。getTemplates() の内訳は hierarchy 112、sequence 83、list 29、compare 20、relation 18、chart 11、quadrant 3 だった。同じ構文から Node で2回描いた SVG は1文字も違わず一致したので、構文を Git で管理すれば図も再現できる。

AntV Infographicを動かす：インストールから日本語の描画まで

npm から入れた。install スクリプトを止めて入れても描画に支障はなく、0.2.20 と依存先に install スクリプトを持つパッケージは無かった（lock ファイルの hasInstallScript が0件）。

npm install @antv/[email protected] --ignore-scripts
npm ls @antv/infographic
# `-- @antv/[email protected]

直接の依存は d3・roughjs・linkedom など13個で、lock ファイルに載ったパッケージは本体を含めて96個、node_modules は 66MB になった。本体の展開サイズは 8.2MB（1,732ファイル）で、ブラウザ用の dist/infographic.min.js は 878KB、gzip すると 289KB だった。

Node だけで SVG を作るなら @antv/infographic/ssr の renderToString を使う。次のファイルを Node 22 で実行し、日本語のラベルが SVG に入ることを確かめた。

import { renderToString } from '@antv/infographic/ssr';
import { writeFileSync } from 'node:fs';

const syntax = `infographic sequence-steps-simple
data
  title 手元で図を出すまで
  sequences
    - label インストール
      desc npm install で入れる
    - label 構文を書く
      desc 1行目にテンプレート名
    - label 描画する
      desc render() にそのまま渡す`;

const svg = await renderToString(syntax);
writeFileSync('steps.svg', svg);
console.log(svg.length, svg.includes('構文を書く')); // 4540 true

ブラウザでは new Infographic({ container: '#box' }) を作って render(構文) を呼ぶ。headless Chromium で20回ずつ測った render() の中央値は、比較の図で 5.5ms、4段の手順図で 3.9ms だった。PNG への書き出し（toDataURL）は 53.6ms。Node の renderToString は手順図で中央値 13.9ms だった。

なお Node の SSR は、登録していない書体名を指定すると「fallback font data を使う」という警告を出し、文字の幅を代替の値で見積もる。日本語の幅が実際の書体とずれる可能性があるので、SSR で書体を変えるなら registerFont で登録しておくのが筋だ（登録後の見え方は未検証）。

ストリーミング描画を12字ずつ試した結果

README の「ストリーミング描画」は、AI の出力を受け取るたびにバッファへ足して render(buffer) を呼び直すだけの方式だ。冒頭の比較図の構文（389字）を12字ずつ33回に分けて渡し、毎回の様子を記録した。

・33回とも例外は投げなかった。error イベントは9回出た。テンプレート名と data がそろうまでの7回は何も描かず、途中の2回は直前の図をそのまま残した
・96字目で題名が出て、以降は項目が届くたびに1つずつ増えた。1回の描画は初めて図が出た回（248.5ms）を除いて 0.2〜12.2ms だった
・書きかけのキー名が一瞬だけ項目として表示された。label の途中まで届いた時点で「lab」や「label」という文字が箱に出て、値が届くと正しい文字に置き換わった

チャット画面のように1文字ずつ出す用途ではちらつきとして見える。気になるなら行の末尾（改行）が届いたときだけ render() を呼べばよい。

Claude Code・Codexのスキル連携

リポジトリの skills/ には5本のスキルがあり、.claude-plugin/ に Claude Code のマーケットプレイス定義が置かれている。Releases の 0.2.19 にある skills.zip（36,296 バイト）を一時ディレクトリに展開し、各 SKILL.md の frontmatter を確かめた。スキルの仕組み自体は Claude Skillsとは｜「スキル=フォルダ」の仕組みと作り方・使い方を徹底解説 にまとめている。

README の導入方法は、Claude Code なら /plugin marketplace add https://github.com/antvis/Infographic.git のあと /plugin install antv-infographic-skills@antv-infographic、または skills.zip を .claude/skills に展開する手動の方法、Codex なら $skill-installer install にスキルの URL を渡す方法の3つだ。Claude Code 上でスキルを動かして図を作る工程は、本記事では試していない（未検証）。

確かめて気づいた点が3つある。

・版のずれ：プラグイン定義の version は 0.2.14 のままで、npm の 0.2.20 と合っていない。Git のタグは 0.2.19 までで、0.2.20 のタグと skills.zip は無い（手動導入は 0.2.19 を指定する）
・CDN の @latest：infographic-creator が書く HTML は、unpkg の @antv/infographic@latest/dist/infographic.min.js を読み込むよう指示されている。版を固定しないため、次に公開された版がそのまま読み込まれる
・説明文の言語：infographic-creator の description は中国語。日本語で頼んだときに呼ばれるかは未検証

コードベースの構造を図にするスキルとしては、Mermaid を使う oh-my-mermaid解説｜コードベースをAIでアーキテクチャ図化するClaude Codeスキル もある。設計図なら Mermaid、説明用の1枚絵なら AntV Infographic と分けると選びやすい。

導入前の注意：外部への通信と2026年5月のnpm汚染

描画の計算は手元で完結するが、ブラウザの通信を記録すると外へ出るものが3種類あった。

・書体の CSS：1枚目の描画で assets.antv.antgroup.com の CSS を6本読みにいった。font-family を自分で指定しても読みにいく
・アイコン検索：構文の icon に「cloud」のような語を書くと、その語を www.weavefox.cn/api/v1/infographic/icon に送って画像を探す（constants/service.js に固定で書かれている）
・CDN：スキルが書く HTML は本体そのものを unpkg から読む

当サイトの検証環境は外部への通信が通らず、アイコン検索はすべて失敗した。そのときアイコンは空の丸で描かれ、エラーはコンソールに出るだけで図そのものは完成扱いになる。社外秘の語をアイコン名に書かない、通信できない環境ではアイコンを使わない、の2点を決めておくとよい。

もう1つは2026年5月19日の @antv 系 npm 汚染だ。当サイトの記事「@antv npmに不正コード混入｜Mini Shai-HuludがAnt Design可視化323パッケージを22分で汚染」で全体像を扱ったが、そこでは @antv/infographic を名指ししていなかった。一次データを当たると、このパッケージも対象だった。

・悪性版：OpenSSF の malicious-packages に MAL-2026-4028 として登録され、該当版は 0.3.19 と 0.4.19。仕掛けは preinstall フックで、認証情報を盗むスクリプトを走らせる
・公開時刻：npm レジストリの記録では 0.3.19 が 01:56:42、0.4.19 が 02:06:01（UTC）。同じ事件の @antv/g2 の悪性版（5.5.8・5.6.8）とほぼ同じ時刻で、どちらも版番号を1段上げる形で公開されている
・現在：2つともバージョン一覧から消え、tarball は HTTP 404。最新の 0.2.20 と 0.2.19 は対象外で、tarball は 200 を返す

自分のプロジェクトが当時の版を入れていないかは、次の2行で確かめられる。2行目は lock ファイルの resolved 欄を見るもので、該当版に書き換えた検証用の lock ファイルでは1行ヒットし、実際の 0.2.20 の lock ファイルでは0件だった。

npm view @antv/infographic time --json | grep 2026-05-19
grep -nE 'infographic-0\.[34]\.19\.tgz' package-lock.json

1行目で出る2つの版番号が、2行目でヒットしなければ該当しない。ヒットした場合の対処は上の記事の緊急対処手順に沿って、認証情報の入れ替えから始める。なお 0.2.20 の npm メタデータには provenance（attestations）が付いておらず、公開者は個人のメンテナーアカウントだった。

AntV InfographicとMermaid・ECharts・画像生成AIの違い

同じ「テキストから図」でも、得意な図が違う。性能は比べていないので、用途と出力の形だけを並べる。

参照ソース

・antvis/Infographic（公式リポジトリ） — README・LICENSE・skills・.claude-plugin（2026-10-16時点、main は 2ea1894）
・@antv/infographic（npm） — 版の一覧と公開時刻（registry.npmjs.org で取得）
・MAL-2026-4028（OpenSSF malicious-packages） — 悪性版 0.3.19 / 0.4.19 の登録
・AntV Infographic 公式ドキュメント — 構文の説明（README からのリンク）