infographic-creator

インフォグラフィックスはデータ、情報、知識を知覚可能なビジュアル言語に変換します。ビジュアルデザインとデータビジュアライゼーションを組み合わせ、複雑な情報を直感的なシンボルで圧縮して、聴衆が要点をすばやく理解して記憶するのを支援します。

インフォグラフィック = 情報構造 + ビジュアル表現

このタスクは 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

構文仕様

• 最初の行は 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: ユーザー要件を理解する

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

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

それ以外の場合、ユーザーに説明を求める必要があります（例：「明確で簡潔なコンテンツ説明を提供してください。」、「どのテンプレートを使用したいですか？」）

• 主要情報構造（タイトル、説明、アイテムなど）を抽出します。
• 必要なデータフィール（タイトル、説明、アイテム、ラベル、値、アイコンなど）を明確にします。
• 適切なテンプレートを選択します。
• 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 ツールを使用して HTML ファイルを生成します。名前は <title>-infographic.html です

3. ユーザーに表示します:

   • ファイルパスを生成してプロンプトを表示します: 「ブラウザで直接開いて表示でき、SVG として保存できます」
   • 構文を出力してプロンプトを表示します: 「テンプレート/色/コンテンツを調整する必要がある場合は教えてください」

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

• エクスポートボタンを使用した SVG エクスポート
• コンテナはレスポンシブで、幅と高さの両方が 100% です