antv-infographic

インフォグラフィックは、データ、情報、知識を認識可能な視覚言語に変換します。ビジュアルデザインとデータビジュアライゼーションを組み合わせ、複雑な情報を直感的な記号で簡潔に表現することで、見る人が要点をすばやく理解し、記憶できるようにします。

インフォグラフィック = 情報構造 + 視覚表現

このタスクでは、AntV Infographicを使用して、視覚的なインフォグラフィックを作成します。

タスクを開始する前に、テンプレート一覧、データ構造、テーマなど、AntV Infographicの構文仕様を理解しておく必要があります。

仕様

AntV Infographicの構文

AntV Infographicの構文は、インフォグラフィックの描画設定を記述するカスタムDSLです。インデントを使って情報を記述し、高い堅牢性を備えているため、AIによるストリーミング出力やインフォグラフィックの描画に適しています。主に次の情報で構成されます。

1. template：テンプレートを使ってテキスト情報の構造を表現します。
2. data：タイトル、説明、データ項目などのインフォグラフィックデータです。データ項目には通常、label、desc、iconなどのフィールドが含まれます。
3. theme：パレットやフォントなどのスタイル設定を含むテーマです。

例：

infographic list-row-horizontal-icon-arrow
data
  title Title
  desc Description
  lists
    - label Label
      value 12.5
      desc Explanation
      icon document text
theme
  palette #3b82f6 #8b5cf6 #f97316

構文仕様

• 1行目は必ずinfographic <template-name>とします。テンプレートは以下の一覧から選択してください（「利用可能なテンプレート」セクションを参照）。

• data／themeブロックを使用し、ブロック内は2つのスペースでインデントします。

• キーと値のペアは「キー スペース 値」の形式で記述し、配列の各要素には-を付けます。

• iconにはアイコンのキーワードを使用します（例：star fill）。

• dataには、タイトル／説明に加え、テンプレート固有の主要データフィールドを含めます（必ずしもitemsとは限りません）。

• 主要データフィールドの選択（1つだけ使用し、混在させないでください）：

  • list-* → lists
  • sequence-* → sequences（order asc|descは任意）
  • compare-* → compares（グループ化した比較にはchildrenを使用可能）。複数の比較項目を含めることができます。
  • hierarchy-structure → items（各項目は独立した階層に対応し、各レベルにサブ項目を含めることができます。最大3レベルまでネストできます）
  • hierarchy-* → 単一のroot（childrenでツリー構造をネストします）
  • relation-* → nodes + relations。シンプルな関係図ではnodesを省略し、relations内で矢印構文を使用できます。
  • chart-* → values（数値統計。categoryは任意）
  • 判断に迷う場合は、代わりにitemsを使用します。

• compare-binary-*／compare-hierarchy-left-right-*のバイナリテンプレートでは、2つのルートノードが必須です。すべての比較項目は、この2つのルートノードのchildrenの下に配置します。

• hierarchy-*では、単一のrootを使用し、childrenでネストします（rootを繰り返し指定しないでください）。

• themeはテーマ（パレット、フォントなど）のカスタマイズに使用します。 例：ダークテーマ＋カスタムカラースキーム

  infographic list-row-horizontal-icon-arrow
  theme dark
    palette
      - #61DDAA
      - #F6BD16
      - #F08BB4
  

• フォントを指定するには、theme.base.text.font-familyを使用します。手書き風フォントの例：851tegakizatsu

• theme.stylizeを使用して組み込みスタイルを選択し、パラメーターを渡します。 主なスタイル：

  • rough：手描き風の効果
  • pattern：パターン塗りつぶし
  • linear-gradient／radial-gradient：線形グラデーション／放射状グラデーション

  例：手描き風スタイル（rough）

  infographic list-row-horizontal-icon-arrow
  theme
    stylize rough
    base
      text
        font-family 851tegakizatsu
  

• JSON、Markdown、説明文は出力しないでください。

データ構文の例

テンプレートカテゴリごとのデータ構文の例です（対応するフィールドを使用し、同時にitemsを追加しないでください）。

• list-*テンプレート

infographic list-grid-badge-card
data
  title Feature List
  lists
    - label Fast
      icon flash fast
    - label Secure
      icon secure shield check

• sequence-*テンプレート

infographic sequence-steps-simple
data
  sequences
    - label Step 1
    - label Step 2
    - label Step 3
  order asc

• hierarchy-*テンプレート

infographic hierarchy-structure
data
  root
    label Company
    children
      - label Dept A
      - label Dept B

• compare-*テンプレート

infographic compare-swot
data
  compares
    - label Strengths
      children
        - label Strong brand
        - label Loyal users
    - label Weaknesses
      children
        - label High cost
        - label Slow release

象限図

infographic compare-quadrant-quarter-simple-card
data
  compares
    - label High Impact & Low Effort
    - label High Impact & High Effort
    - label Low Impact & Low Effort
    - label Low Impact & High Effort

• chart-*テンプレート

infographic chart-column-simple
data
  values
    - label Visits
      value 1280
    - label Conversion
      value 12.4

• relation-*テンプレート

エッジラベルの構文：A -label-> B または A -->|label| B

infographic relation-dagre-flow-tb-simple-circle-node
data
  nodes
    - id A
      label Node A
    - id B
      label Node B
  relations
    A - approves -> B
    A -->|blocks| B

• 代替としてitemsを使用する例

infographic list-row-horizontal-icon-arrow
data
  items
    - label Item A
      desc Description
      icon sun
    - label Item B
      desc Description
      icon moon

利用可能なテンプレート

• chart-bar-plain-text
• chart-column-simple
• chart-line-plain-text
• chart-pie-compact-card
• chart-pie-donut-pill-badge
• chart-pie-donut-plain-text
• chart-pie-plain-text
• chart-wordcloud
• compare-binary-horizontal-badge-card-arrow
• compare-binary-horizontal-simple-fold
• compare-binary-horizontal-underline-text-vs
• compare-hierarchy-left-right-circle-node-pill-badge
• compare-quadrant-quarter-circular
• compare-quadrant-quarter-simple-card
• compare-swot
• hierarchy-mindmap-branch-gradient-capsule-item
• hierarchy-mindmap-level-gradient-compact-card
• hierarchy-structure
• hierarchy-tree-curved-line-rounded-rect-node
• hierarchy-tree-tech-style-badge-card
• hierarchy-tree-tech-style-capsule-item
• list-column-done-list
• list-column-simple-vertical-arrow
• list-column-vertical-icon-arrow
• list-grid-badge-card
• list-grid-candy-card-lite
• list-grid-ribbon-card
• list-row-horizontal-icon-arrow
• list-sector-plain-text
• list-zigzag-down-compact-card
• list-zigzag-down-simple
• list-zigzag-up-compact-card
• list-zigzag-up-simple
• relation-dagre-flow-tb-animated-badge-card
• relation-dagre-flow-tb-animated-simple-circle-node
• relation-dagre-flow-tb-badge-card
• relation-dagre-flow-tb-simple-circle-node
• sequence-ascending-stairs-3d-underline-text
• sequence-ascending-steps
• sequence-circular-simple
• sequence-color-snake-steps-horizontal-icon-line
• sequence-cylinders-3d-simple
• sequence-filter-mesh-simple
• sequence-funnel-simple
• sequence-horizontal-zigzag-underline-text
• sequence-mountain-underline-text
• sequence-pyramid-simple
• sequence-roadmap-vertical-plain-text
• sequence-roadmap-vertical-simple
• sequence-snake-steps-compact-card
• sequence-snake-steps-simple
• sequence-snake-steps-underline-text
• sequence-stairs-front-compact-card
• sequence-stairs-front-pill-badge
• sequence-timeline-rounded-rect-node
• sequence-timeline-simple
• sequence-zigzag-pucks-3d-simple
• sequence-zigzag-steps-underline-text

テンプレート選択の推奨事項:

• 厳密な順序 (プロセス/ステップ/開発トレンド) → sequence-*
  • タイムライン → sequence-timeline-*
  • 階段図 → sequence-stairs-*
  • ロードマップ → sequence-roadmap-vertical-*
  • ジグザグパス → sequence-zigzag-*
  • 円形プログレス → sequence-circular-simple
  • カラフルなスネークステップ → sequence-color-snake-steps-*
  • ピラミッド → sequence-pyramid-simple
• 意見の列挙 → list-row-* または list-column-*
• 二項比較 (長所/短所) → compare-binary-*
• SWOT → compare-swot
• 階層構造 (ツリー図) → hierarchy-tree-*
• データチャート → chart-*
• 四象限分析 → compare-quadrant-*
• グリッドリスト (要点) → list-grid-*
• 関係性の表示 → relation-*
• ワードクラウド → chart-wordcloud
• マインドマップ → hierarchy-mindmap-*

例

インターネット技術の進化のインフォグラフィックを作成する

infographic list-row-horizontal-icon-arrow
data
  title Internet Technology Evolution
  desc From Web 1.0 to AI era, key milestones
  lists
    - time 1991
      label Web 1.0
      desc Tim Berners-Lee published the first website, opening the Internet era
      icon web
    - time 2004
      label Web 2.0
      desc Social media and user-generated content become mainstream
      icon account multiple
    - time 2007
      label Mobile
      desc iPhone released, smartphone changes the world
      icon cellphone
    - time 2015
      label Cloud Native
      desc Containerization and microservices architecture are widely used
      icon cloud
    - time 2020
      label Low Code
      desc Visual development lowers the technology threshold
      icon application brackets
    - time 2023
      label AI Large Model
      desc ChatGPT ignites the generative AI revolution
      icon brain

生成プロセス

ステップ 1: ユーザーの要件を理解する

インフォグラフィックを作成する前に、まずユーザーのニーズと表現したい情報を理解し、テンプレートとデータ構造を決定します。

ユーザーが明確なコンテンツの説明を提供した場合は、それを明確で簡潔な構造に分解する必要があります。

そうでない場合は、ユーザーに確認する必要があります (例: 「明確で簡潔なコンテンツの説明を提供してください。」「どのテンプレートを使用しますか?」)

• 主要な情報構造 (title、desc、items など) を抽出します。
• 必要なデータフィールド (title、desc、items、label、value、icon など) を明確にします。
• 適切なテンプレートを選択します。
• AntV Infographic 構文 {syntax} を使用してインフォグラフィックのコンテンツを記述します。

重要な注意点: ユーザー入力の言語を尊重する必要があります。たとえば、ユーザーが中国語で入力した場合、構文内のテキストも中国語である必要があります。

ステップ 2：インフォグラフィックをレンダリングする

AntV Infographic の構文が完成したら、以下の手順で完全な HTML ファイルを生成できます。

1. 以下の構成で完全な HTML ファイルを作成します。
   • DOCTYPE と HTML メタ情報（charset：utf-8）
   • タイトル：{title} - Infographic
   • AntV Infographic のスクリプトを含めます：https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js
   • id が container のコンテナ div を作成します
   • Infographic を初期化します（width: '100%'、height: '100%'）
   • {title} を実際のタイトルに置き換えます
   • {syntax} を実際の AntV Infographic 構文に置き換えます
   • SVG エクスポート機能を追加します：const svgDataUrl = await infographic.toDataURL({ type: 'svg' });

HTML テンプレートの例：

<div id="container"></div>
<script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>
<script>
 const infographic = new AntVInfographic.Infographic({
    container: '#container',
    width: '100%',
    height: '100%',
  });
  document.fonts?.ready.then(() => {
    infographic.render(`{syntax}`);
  }).catch((error) => {
    console.error('Error waiting for fonts to load:', error);
    infographic.render(`{syntax}`);
  });
</script>

2. Write ツールを使って、<title>-infographic.html という名前の HTML ファイルを生成します

3. ユーザーに以下を提示します。

   • 生成したファイルのパスとプロンプト：「ブラウザーで直接開くと、表示して SVG として保存できます」
   • 構文とプロンプトを出力します：「テンプレート、色、コンテンツの調整が必要であればお知らせください」

注記： HTML ファイルには以下を含める必要があります。

• エクスポートボタンからの SVG エクスポート
• 幅と高さがどちらも 100％のレスポンシブなコンテナ