SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsinfographic-creator

infographic-creator

General & other

View repository

Updated 10-15 23:45

About this skill

Infographics transform data, information, and knowledge into a perceptible visual language. They combine visual design and data visualization, compressing complex information with intuitive symbols to help audiences quickly understand and remember key points.

Infographic = Information Structure + Visual Expression

This task uses AntV Infographic to create a visualized infographic.

Before starting the task, you need to understand the AntV Infographic syntax specification, including the template list, data structures, themes, etc.

Specification

AntV Infographic Syntax

The AntV Infographic syntax is a custom DSL used to describe infographic rendering configurations. It uses indentation to describe information, has strong robustness, and is convenient for AI streaming output and rendering infographics. It mainly includes the following information:

  1. template: Use a template to express the structure of the text information.
  2. data: Infographic data, including title, desc, data items, etc. Data items usually include fields such as label, desc, icon, etc.
  3. theme: The theme includes style configurations such as palette, font, etc.

For example:

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

Syntax Specification

  • The first line must be infographic <template-name>, and the template is selected from the list below (see the "Available Templates" section).

  • Use the data / theme block, with two-space indentation inside the block.

  • Key-value pairs use "key space value"; arrays use - as the item prefix.

  • icon uses icon keywords (such as star fill）。

  • data should include title/desc + the main data field corresponding to the template (not necessarily items）。

  • Main data field selection (use only one, avoid mixing):

    • list-* → lists
    • sequence-* → sequences(optional order asc|desc）
    • compare-* → compares(supports children grouped comparison), can include multiple comparison items
    • hierarchy-structure → items(each item corresponds to an independent level, each level can contain sub-items, and can be nested up to 3 levels)
    • hierarchy-* → single root(tree structure, through children nesting);
    • relation-* → nodes + relations; simple relationship diagrams can omit nodes, and use arrow syntax in relations
    • chart-* → values(numeric statistics, optional category）
    • When uncertain, use items as a fallback

  • compare-binary-* / compare-hierarchy-left-right-* binary template: must have two root nodes, and all comparison items are attached to the children of these two root nodes

  • hierarchy-*: use a single root, through children nesting (do not repeat root）

  • theme is used for custom themes (palette, font, etc.) For example: dark theme + custom color scheme

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

  • Use theme.base.text.font-family to specify the font, such as handwritten style 851tegakizatsu

  • Use theme.stylize to select a built-in style and pass parameters Common styles:

    • rough: hand-drawn effect
    • pattern: pattern fill
    • linear-gradient / radial-gradient: linear/radial gradient

    For example: hand-drawn style (rough)

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

  • Outputting JSON, Markdown, or explanatory text is prohibited

Data Syntax Examples

Data syntax examples by template category (use the corresponding fields, avoid adding items）：

  • list-* template
infographic list-grid-badge-card
data
  title Feature List
  lists
    - label Fast
      icon flash fast
    - label Secure
      icon secure shield check
  • sequence-* template
infographic sequence-steps-simple
data
  sequences
    - label Step 1
    - label Step 2
    - label Step 3
  order asc
  • hierarchy-* template
infographic hierarchy-structure
data
  root
    label Company
    children
      - label Dept A
      - label Dept B
  • compare-* template
infographic compare-swot
data
  compares
    - label Strengths
      children
        - label Strong brand
        - label Loyal users
    - label Weaknesses
      children
        - label High cost
        - label Slow release

Four-quadrant chart

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-* template
infographic chart-column-simple
data
  values
    - label Visits
      value 1280
    - label Conversion
      value 12.4
  • relation-* template

Edge label syntax: A -label-> B or 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
  • Fallback items Example
infographic list-row-horizontal-icon-arrow
data
  items
    - label Item A
      desc Description
      icon sun
    - label Item B
      desc Description
      icon moon

Available Templates

  • 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

Template selection suggestions:

  • Strict sequence (process/steps/development trends) → sequence-*
    • Timeline → sequence-timeline-*
    • Step chart → sequence-stairs-*
    • Roadmap → sequence-roadmap-vertical-*
    • Polyline path → sequence-zigzag-*
    • Circular progress → sequence-circular-simple
    • Colorful serpentine steps → sequence-color-snake-steps-*
    • Pyramid → sequence-pyramid-simple
  • Point listing → list-row-* or list-column-*
  • Binary comparison (pros and cons) → compare-binary-*
  • SWOT → compare-swot
  • Hierarchical structure (tree diagram) → hierarchy-tree-*
  • Data charts → chart-*
  • Quadrant analysis → quadrant-*
  • Grid list (key points) → list-grid-*
  • Relationship display → relation-*
  • Word cloud → chart-wordcloud
  • Mind map → hierarchy-mindmap-*

Example

Draw an infographic of internet technology evolution

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

Generation process

Step 1: Understand user requirements

Before creating an infographic, first understand the user's requirements and the information they want to express, so as to determine the template and data structure.

If the user provides a clear content description, it should be broken down into a clear and concise structure.

Otherwise, clarify with the user (e.g., "Please provide a clear and concise content description.", "Which template would you like to use?")

  • Extract the key information structure (title, desc, items, etc.).
  • Identify the required data fields (title, desc, items, label, value, icon, etc.).
  • Choose an appropriate template.
  • Use AntV Infographic syntax to describe the infographic content {syntax}。

Key note: The language of the user input must be respected. For example, if the user inputs Chinese, the text in the syntax must also be Chinese.

Step 2: Render the infographic

After obtaining the final AntV Infographic syntax, generate the complete HTML file according to the following steps:

  1. Create a complete HTML file with the following structure:
    • DOCTYPE and HTML meta (charset: utf-8)
    • Title：{title} - Infographic
    • Import the AntV Infographic script:https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js
    • Create a container div with id container container div
    • Initialize Infographic (width: '100%'、height: '100%'）
    • Replace with the actual title {title}
    • Replace with the actual AntV Infographic syntax {syntax}
    • Add the SVG export feature:const svgDataUrl = await infographic.toDataURL({ type: 'svg' });

HTML template for reference:

<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%',
  });
  infographic.render(`{syntax}`);
  document.fonts?.ready.then(() => {
    infographic.render(`{syntax}`);
  }).catch((error) => console.error('Error waiting for fonts to load:', error));
</script>

  1. Use the Write tool to generate the HTML file, named <title>-infographic.html

  2. Show to the user:

    • Generate the file path and prompt: "Open it directly in a browser to view and save the SVG"
    • Output the syntax and prompt: "Let me know if you need to adjust the template/color scheme/content"

**Note:** The HTML file must include:

  • Implement SVG export via an export button
  • The container is responsive, with width and height both at 100%