Build an Intelligent Chart Generator in 5 Minutes with AntV and Trae Solo
This article walks through using AntV Infographic together with Vibe Coding and Trae Solo to create an AI‑powered chart generator that turns natural‑language descriptions into beautiful infographics, covering configuration basics, prompt engineering, automated code generation, testing, and result analysis.
AntV Infographic Overview
Infographic is a front‑end engine that renders design‑rich information graphics from a declarative JSON configuration. It separates three core sections: design (visual style, structure, title, item), data (labels, descriptions, timestamps, icons), and theme (global palette, fonts, stylization).
Basic Usage Example
The following JavaScript creates a three‑step “Plan Progress” infographic with a dark palette and a rough sketch style. It registers a resource loader that fetches SVG icons from Iconify, enables interactive editing, and customizes title, structure and item types.
import { Infographic, registerResourceLoader, loadSVGResource } from '@antv/infographic';
registerResourceLoader(async config => {
const { data } = config;
const res = await fetch(`https://api.iconify.design/${data}.svg`);
const text = await res.text();
return loadSVGResource(text);
});
const infographic = new Infographic({
container: '#container',
width: '100%',
height: '100%',
editable: true,
padding: 30,
design: {
title: { type: 'default', width: 300 },
structure: { type: 'list-row', gap: 0, zigzag: true },
item: { type: 'horizontal-icon-arrow' }
},
theme: 'dark',
themeConfig: {
palette: ['#61DDAA', '#F6BD16', '#F08BB4'],
base: { text: { 'font-family': '851tegakizatsu' } },
stylize: { type: 'rough' }
},
data: {
title: 'Plan Progress',
items: [
{ label: 'Step 1', desc: 'Start', time: 'Last Day', icon: 'mdi/rocket-launch' },
{ label: 'Step 2', desc: 'In progress', time: 'Today', icon: 'mdi/progress-clock' },
{ label: 'Step 3', desc: 'Complete', time: 'Tomorrow', icon: 'mdi/trophy' }
]
}
});
infographic.render();Key points:
Resource loader – fetches SVG icons on demand.
Editable – enables interactive editing.
Design – custom title, structure and item types.
Theme – dark palette and rough stylization.
Template Mechanism
Repeatedly configuring design is inefficient. Infographic provides a template API. A custom template can be registered:
import { registerTemplate, Infographic } from '@antv/infographic';
registerTemplate('simple-list', {
design: {
structure: 'list-row',
item: 'simple'
}
});
new Infographic({
// other config …
template: 'simple-list'
});Official templates (e.g., list-row-simple-horizontal-arrow) cover timelines, org charts, roadmaps, etc. Using a template in plain HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Infographic Demo</title>
</head>
<body>
<div id="container"></div>
<script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>
<script>
const { Infographic } = AntVInfographic;
const infographic = new Infographic({
container: '#container',
width: '100%',
height: '100%',
template: 'list-row-simple-horizontal-arrow',
data: {
items: [
{ label: '步骤 1', desc: '开始' },
{ label: '步骤 2', desc: '进行中' },
{ label: '步骤 3', desc: '完成' }
]
}
});
infographic.render();
</script>
</body>
</html>AI‑Driven Infographic Generation
The goal is to let a large language model act as a “configuration engineer”: given a natural‑language description, the model extracts key data, selects an appropriate template, and returns a complete Infographic JSON configuration.
Prompt Collection and Optimization
The original prompt used by AntV’s AI Infographic site was saved as prompt.txt. It was refined with DeepSeek to improve clarity, logical flow, and to enforce JSON output.
Automated Development with Trae Solo
Trae Solo consumes the optimized prompt and generates a Python agent that performs the following steps:
Load the DeepSeek API key from .env.
Read the prompt template from prompt.txt.
Accept user‑provided natural‑language data.
Call the DeepSeek API with a system message (the prompt) and a user message (the data) to obtain a JSON configuration.
Read example.html, replace the original Infographic configuration with the generated one, and write example-result.html.
import os, requests, json
from dotenv import load_dotenv
load_dotenv()
api_key = os.getenv('DEEPSEEK_API_KEY')
with open('prompt.txt', 'r', encoding='utf-8') as f:
prompt_template = f.read()
user_input = input('Enter text data as content material: ')
headers = {
"Authorization": f"Bearer {api_key}",
"Content-Type": "application/json"
}
payload = {
"model": "deepseek-chat",
"messages": [
{"role": "system", "content": prompt_template},
{"role": "user", "content": user_input}
],
"temperature": 0.7,
"max_tokens": 2048,
"response_format": {"type": "json_object"}
}
response = requests.post('https://api.deepseek.com/v1/chat/completions', headers=headers, json=payload)
config = response.json()
with open('example.html', 'r', encoding='utf-8') as f:
html_content = f.read()
updated_html = html_content.replace('/* original config */', json.dumps(config, indent=2))
with open('example-result.html', 'w', encoding='utf-8') as f:
f.write(updated_html)
print('✅ Operation completed!')Testing and Results
Running python infographic_agent.py and providing a multi‑year market‑expansion description generates example-result.html. The resulting infographic displays a timeline that correctly reflects the time‑series data. Compared with the official AI Infographic output, the generated graphic lacks some visual refinements, indicating that further prompt tuning or model‑parameter adjustment may improve quality.
Summary of Findings
AntV Infographic can render high‑quality information graphics from a concise JSON configuration.
Template registration reduces repetitive design configuration.
DeepSeek‑driven prompt optimization yields a structured specification that a Trae Solo‑generated agent can execute.
The end‑to‑end pipeline (natural language → prompt → LLM → JSON config → HTML) produces functional infographics within minutes.
Visual quality gaps relative to the official AI service suggest opportunities for prompt refinement and parameter tuning.
Fun with Large Models
Master's graduate from Beijing Institute of Technology, published four top‑journal papers, previously worked as a developer at ByteDance and Alibaba. Currently researching large models at a major state‑owned enterprise. Committed to sharing concise, practical AI large‑model development experience, believing that AI large models will become as essential as PCs in the future. Let's start experimenting now!
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.