Infographic Builder

Two Approaches

Primary: AntV Infographic (DSL-based)

Use this for infographics where the content maps cleanly to a single visualization type — a list, a sequence, a comparison, a hierarchy, a chart, or a relationship diagram. AntV Infographic provides 60+ pre-built templates with a simple DSL syntax. It's fast and produces polished results. Read antv-syntax.md for the full DSL specification and template list.

Fallback: React Component (Mockup Sandbox)

Use this when the infographic needs multiple visualization types combined (e.g., summary stats + bar chart + pie chart + detailed table), when the user provides raw data that needs analysis and categorization before visualization (e.g., bank transactions, CSV data), or when the layout doesn't fit any single AntV template. Read react-fallback.md for this workflow.

How to choose

• Content fits one template category (e.g., "show a process flow", "make a SWOT analysis") → AntV

• Content is raw data needing analysis, or requires multiple chart types in one visual → React fallback

• User wants a completely bespoke design or pixel-level control → React fallback

Infographic Types → Template Categories

| Content Type | Best For | AntV Template Category |

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

| Statistical | Numbers, percentages, survey results | chart-* (pie, bar, column, line) |

| Process / Flow | Step-by-step workflows, how-tos | sequence-* (steps, funnel, pyramid, stairs) |

| Comparison | Side-by-side analysis, pros/cons, SWOT | compare-* (binary, swot, quadrant) |

| Timeline | Historical events, project phases, roadmaps | sequence-timeline-*,sequence-roadmap-* |

| Hierarchical | Org structures, category breakdowns, mind maps | hierarchy-* (tree, mindmap, structure) |

| List / Informational | Tips, facts, feature lists | list-* (grid, row, column, zigzag) |

| Relationships | Flow diagrams, dependency graphs | relation-* (dagre flow) |

| Word Cloud | Keyword frequency, topic prominence | chart-wordcloud |

| Multi-section summary| Financial reports, data analysis, dashboards |React fallback (no single AntV template fits) |

AntV Infographic Workflow

Step 1: Understand User Requirements

Before creating an infographic, understand the user's needs and the information they want to express.

• If the user provides a clear content description, break it down into a clear and concise structure.
• Otherwise, ask for clarification (e.g., "What data or content should the infographic show?", "Do you have a preference for the visual style?")

Extract:

• Title and subtitle — the main headline and supporting context

• Data points — numbers, labels, descriptions, icons for each item

• Sections/items — logical groupings (3-7 sections work best)

• Source attribution — where the data comes from (if applicable)

• Style preferences — colors, dark/light theme, hand-drawn style (if any)

Do not invent data or placeholder text. If the user provides incomplete content, ask for the missing pieces.

Language rule: Always respect the language of user input. If the user inputs in Chinese, all text in the syntax must also be in Chinese. Same for any other language.

Step 2: Select Template and Write DSL

Choose the right template from the available templates list (see references/antv-syntax.md for the full list).

Template selection guide:

• Strict sequence (process/steps/development trend) → sequence-*

• Timeline → sequence-timeline-*

• Staircase diagram → sequence-stairs-*

• Roadmap → sequence-roadmap-vertical-*

• Zigzag path → sequence-zigzag-*

• Circular progress → sequence-circular-simple

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

• Hierarchical structure (tree diagram) → hierarchy-tree-*

• Mind map → hierarchy-mindmap-*

• Org chart / structure → hierarchy-structure

• Data charts (bar, pie, line) → chart-*

• Relationship / flow diagram → relation-*

• Word cloud → chart-wordcloud

Write the AntV Infographic DSL syntax. The syntax rules are documented in references/antv-syntax.md — read it before writing any DSL.

Key syntax rules:

• First line must be infographic <template-name>

• Use data/theme blocks with two-space indentation

• Key-value pairs use key space value; arrays use- as entry prefix

• Main data field depends on template category:

• list-*→lists

• sequence-*→sequences

• compare-*→compares

• hierarchy-structure→items

• hierarchy-*(others) → singlerootwith nestedchildren

• relation-*→nodes+relations

• chart-*→values

• Use items as fallback when uncertain

Step 3: Render as HTML File

Create a complete HTML file using this template:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>{title} - Infographic</title>

<style>

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { width: 100%; height: 100%; }

#container { width: 100%; height: 100%; }

</style>

</head>

<body>

<div id="container"></div>

<script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>

<script>

const infographic = new AntVInfographic.Infographic({