#AntV Infographic Syntax Reference

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 streaming output and infographic rendering.

#Core Structure

Every infographic has three parts:

1. template — the first line selects the visual template

2. data — the content: title, description, and data items

3. theme — optional style customization (palette, font, effects)

#Syntax Rules

• First line must be infographic <template-name>

• Use data/themeblocks with two-space indentation within blocks

• Key-value pairs usekey space value(e.g.,title My Title)

• Arrays use -as entry prefix

-iconuses icon keywords (e.g.,star fill, cloud, brain)

• datashould containtitle/desc+ the template-specific main data field

• Do not output JSON, Markdown, or explanatory text — only the DSL syntax

#Main Data Field by Template Category

Use only one main data field per infographic. Do not mix them.

| Template Category | Main Data Field | Notes |

|-------------------|----------------|-------|

|list-*|lists| Array of items with label, desc, icon |

|sequence-*|sequences| Optionalorder asc\\desc|

|compare-*|compares| Supportschildrenfor grouped comparisons |

|hierarchy-structure|items| Each item is an independent hierarchy, nestable up to 3 levels |

|hierarchy-*(others) |root| Single root, nested throughchildren|

|relation-*|nodes+relations| Simple relations can omitnodes, using arrow syntax |

| chart-*|values| Numeric statistics, optionalcategory|

| Fallback |items| Use when uncertain about which field to use |

#Special Rules

-compare-binary-*andcompare-hierarchy-left-right-*templates: must have exactly two root nodes; all comparison items hang under these two root nodes'children-hierarchy-*(non-structure): use singleroot, nested through children— do not repeat root

-relation-*edge label syntax:A -label-> BorA -->|label| B

#Basic 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

#Data Syntax Examples by Category

#list-* templates

infographic list-grid-badge-card

data

title Feature List

lists

- label Fast

icon flash fast

- label Secure

icon secure shield check

#sequence-* templates

infographic sequence-steps-simple

data

sequences

- label Step 1
- label Step 2

- label Step 3

order asc

#hierarchy-* templates

infographic hierarchy-structure

data

root

label Company

children

- label Dept A
- label Dept B

#compare-* templates

infographic compare-swot

data

compares

- label Strengths

children

- label Strong brand
- label Loyal users

- label Weaknesses

children

- label High cost
- label Slow release

#Quadrant diagram

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-* templates

infographic chart-column-simple

data

values

- label Visits

value 1280

- label Conversion

value 12.4

#relation-* templates

Edge label syntax: A -label-> BorA -->|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

#Theme Customization

#Custom palette

infographic list-row-horizontal-icon-arrow

theme

palette \#3b82f6 \#8b5cf6 \#f97316

#Dark theme with custom colors

infographic list-row-horizontal-icon-arrow

theme dark

palette

- \#61DDAA
- \#F6BD16

- \#F08BB4

#Hand-drawn style (rough)

Use theme.stylizefor built-in visual styles. Common styles:

-rough— hand-drawn effect -pattern— pattern fill

-linear-gradient/radial-gradient — gradient fills

infographic list-row-horizontal-icon-arrow

theme

stylize rough

base

text

font-family 851tegakizatsu

#Custom font

theme

base

text

font-family 851tegakizatsu

#Available Templates

#Chart 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

#Comparison templates

• 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 templates

• 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 templates

• 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 templates

• 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 templates

• 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 Quick Reference

| Use Case | Recommended Templates |

|----------|----------------------|

| Strict sequence (process/steps) | sequence-*|

| Timeline |sequence-timeline-*|

| Staircase diagram |sequence-stairs-*|

| Roadmap |sequence-roadmap-vertical-*|

| Zigzag path |sequence-zigzag-*|

| Circular progress |sequence-circular-simple|

| Snake steps |sequence-color-snake-steps-*, sequence-snake-steps-*|

| Pyramid |sequence-pyramid-simple|

| Funnel |sequence-funnel-simple|

| Opinion listing |list-row-*orlist-column-*|

| Grid list (key points) |list-grid-*|

| Binary comparison (pros/cons) |compare-binary-*|

| SWOT analysis |compare-swot|

| Quadrant analysis |compare-quadrant-*|

| Tree diagram |hierarchy-tree-*|

| Mind map |hierarchy-mindmap-*|

| Org chart |hierarchy-structure|

| Data charts |chart-*|

| Flow / relationship diagram |relation-*|

| Word cloud |chart-wordcloud |

#Full Example

Internet technology evolution infographic:

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