infographic-creation

An infographic (Infographic) transforms data, information, and knowledge into perceivable visual language. It combines visual design with data visualization, using intuitive symbols to compress complex information and help audiences quickly understand and remember key points.

Infographic = Information Structure + Visual Expression

This is a task that utilizes AntV Infographic to create visual infographics.

Before you start the task, you need to understand the AntV Infographic Syntax specification, including template lists, data structures, themes, and more.

SPECs

AntV Infographic Syntax

AntV Infographic Syntax is a mermaid-like DSL for describing infographic rendering configuration. It uses indentation to describe information, has strong robustness, and makes it easy to render infographics through AI streaming output. It mainly contains the following information:

1. template: Use template to express text information structure.
2. data: the infographic data, which contains title, desc, items, etc. The items is an array containing label, value, desc, icon, children, etc.
3. theme: Theme contains palette, font, and other styling options.

e.g.:

infographic list-row-horizontal-icon-arrow
data
  title Title
  desc Description
  items
    - label Label
      value 12.5
      desc Explanation
      icon mdi/rocket-launch
theme
  palette #3b82f6 #8b5cf6 #f97316

The Syntax

• The first line starts with infographic <template-name>, and the template is selected from the list below (the Available Templates section).
• Use blocks to describe data / theme, with two-space indentation
• Key-value pairs are expressed as "key value", and arrays are expressed as "-" items
• The icon value is provided directly with keywords or icon names (such as mdi/chart-line)
• data should contain title/desc/items (which can be omitted according to semantics)
• data.items should contain label(string)/value(number)/desc(string)/icon(string)/children(object), where children represents the hierarchical structure
• For comparison templates (template names starting with compare-), construct exactly two root nodes and place every comparison item under them as children to keep the hierarchy clear
• theme field is for customizing the theme of the infographic, including palette, font, etc. e.g. dark theme with custom palette:

  infographic list-row-simple-horizontal-arrow
  theme dark
    palette
      - #61DDAA
      - #F6BD16
      - #F08BB4
  data
    items
      - label Step 1
        desc Start
      - label Step 2
        desc In Progress
      - label Step 3
        desc Complete
  

• Use theme.base.text.font-family to specify fonts, such as the handwriting style '851tegakizatsu'
• Use theme.stylize to select built-in styles and pass parameters Common stylization types include:
  • rough: Apply hand-drawn style to make graphics look like they were drawn by hand.
  • pattern: Apply pattern fill to add repeated pattern effects to graphics.
  • linear-gradient / radial-gradient: Apply gradient fill to add linear or radial gradient effects to graphics.