AIが書いたSVG図解を、ロスレスでJSONに変換し、 スクロールアニメーション付きでレンダリングする独自エンジン。
LLMはSVG/HTMLの学習データが膨大にあり、直接SVGを書くときの精度が圧倒的に高い。 一方、データの保存・検索・バリデーションにはJSONが最適。 この矛盾を解決するのが、SVGとJSONの自動往復変換レイヤーです。
往復変換で情報が落ちないことをロスレス検証で保証。SVG → JSON → SVG → JSON の完全一致を自動テスト。
左がAIが生成したJSONデータ。右がDiagramRendererによるリアルタイム描画。 同じデータから、アニメーション付きのインタラクティブな図解が生成されます。
{
"viewBox": [-180, -211.47, 360, 360],
"elements": [
{
"type": "path",
"d": "M-122.3,-48.2L...",
"fill": "#111115",
"stroke": "#222228"
},
{
"type": "circle",
"cx": -122.4,
"cy": -37.8,
"r": 4,
"fill": "rgba(51,195,255,0.25)",
"stroke": "#33c3ff",
"animated": "pulse"
},
{
"type": "text",
"x": -120,
"y": -39.5,
"text": "San Francisco",
"fill": "#33c3ff",
"size": 4
},
{
"type": "line",
"x1": -122.4, "y1": -37.8,
"x2": 139.7, "y2": -35.7,
"stroke": "#33ff99",
"animated": "flow-dot"
}
],
"entrance": {
"sequence": [
{ "ids": ["el-0", ...], "delay": 0 },
{ "ids": ["el-5", ...], "delay": 200 }
]
}
}汎用AIに「図を描いて」と頼んでも、矢印が逆を向き、テキストがはみ出し、色がバラバラになる。 ZUKAIはこの問題を、独自のスキルシステムで解決しています。座標計算、カラー設計、 レイアウト配置、矢印制御、テキストサイジング——あらゆる図解生成の知見が 構造化されたルールとしてAIに注入され、人間のデザイナーが描いたかのような品質を実現します。
ダークテーマに最適化された43色のカラーシステム。 JSONでは意味名（accent-800）で指定し、 レンダラーが実際の色コードに解決します。
記事データは1つのJSONファイル。テキストも図解もアニメーション定義も同一ファイル内に格納。 レンダラーがJSONを読み、SVGプリミティブに変換し、スクロール位置に応じてアニメーションを実行します。
各要素にミリ秒単位のディレイを設定し、スクロールで画面に入ったタイミングで 段階的にフェードイン。図解の「読む順序」をアニメーションで制御します。