前言

一到年末，撰写年终总结总是绕不开一项费时又费力的任务——绘制图表。作为量化工作成果、直观呈现业务进展的重要方式，图表既要清晰传达信息，又需在视觉上吸引眼球。以往笔者常借助阿里 AntV 团队推出的 mcp-server-chart，通过对话式交互快速生成基础图表，虽然方便，但其样式较为简单，难以在汇报中脱颖而出（关于mcp-server-chart的使用大家可以参考笔者的文章推荐一款宝藏MCP Server—mcp-server-chart, 从此再也不发愁绘制图表啦！）。

正为此发愁时笔者偶然发现了 AntV 新推出的信息图可视化引擎——AntV Infographic。它同样出自 AntV 团队，能够通过简洁的配置生成设计感十足、重点突出的信息图表，正好切中了笔者在图表展示上的痛点。

这么好的工具，自然不能独享，本篇分享笔者就把这个工具库分享给大家， 同时作为长期关注智能体开发的博主，笔者更进一步结合 AntV Infographic 与 vibe coding 快速搭建了一个轻量级图表生成智能体。本文将分享整个实现思路与过程，手把手带你用 AntV + Trae，在五分钟内构建属于自己的“智能图表生成器”，让大家今年的年终报告，用图表说话，靠颜值出彩！(希望大家可以到github上给Infographic 点 star 打 call，支持antv团队开发出更多实用美丽的可视化图表功能~)

一、AntV Infographic简介

1.1 什么是信息图（Infographic）？

在深入了解 AntV Infographic 之前，首先需要明确一个核心概念：信息图（Infographic） 。

传统图表（如折线图、柱状图）的核心目标是精确、标准化地呈现数据。而信息图则更进一步，它融合了数据可视化与视觉设计，旨在将复杂的数据、信息和知识转化为直观的、富有美感的图形语言。它通过视觉元素来“压缩”信息，突出重点、叙述故事、传达洞察，最终目标是让受众“看得懂、记得住”。

笔者这里通过AntV官网的例子来让大家直观了解信息图，以下是一段关于阿里巴巴技术职级的文字描述：

在阿里巴巴，技术人的职级从 P5 到 P10，每一级都对应着不同的职责与能力要求。  
P5 是初入职场的执行者，主要负责完成具体任务，在指导下学习和成长；  
P6 是独立贡献者，能够自主解决问题并交付模块级的工作成果；P7 开始承担更复杂的系统设计与项目推进，成为团队中的技术骨干；  
P8 则需要具备架构能力，主导大型项目的实施，并在领域内形成影响力；  
P9 是技术专家或管理者，负责跨团队的战略规划与资源整合，推动业务创新；  
而 P10 作为行业领军人物，不仅要在公司内部引领技术方向，还要在行业内树立标杆，为组织带来深远的技术和商业价值。

如果将其转化为信息图，效果如下：

对比可见信息图通过层次化的视觉设计，极大地提升了信息的传达效率与视觉吸引力。

1.2 AntV Infographic 是什么？

AntV Infographic 正是为了解决“如何高效创建精美信息图”而生的新一代前端可视化引擎。它不是一个简单的图表库，将复杂数据转化为优雅、可交互信息图的完整解决方案。该框架的核心思想是：用户只需要通过简洁的声明式JSON配置方式描述数据与想要的视觉呈现，引擎便会自动将其渲染为高质量的信息图，无需你手动计算像素或绘制图形。

1.3 如何用 Infographic 构建信息图？

InfoGraphic的使用非常简单，用户只需要按规定传入配置项，定义结构、设计、数据与主题，InfoGraphic即可自动根据用户的配置绘制出精美的信息图。可以说Infographic的整个过程围绕三个核心配置项展开：

• 设计 (design) ：定义信息图的视觉样式，参考https://infographic.antv.vision/learn/design 了解更多。

  • structure：布局与组织方式（如列表、网格）。
  • title：标题的样式设计。
  • item：每个数据单元的视觉样式（如卡片、箭头图）。

• 数据 (data) ：填入要展示的具体内容，参考https://infographic.antv.vision/learn/data 了解更多。

  • 支持一维列表数据（如上图示例）和层级数据。
  • 每个数据项可包含标签、描述、时间、图标等字段。

• 主题 (theme) ：控制全局视觉风格，参考https://infographic.antv.vision/learn/theme 了解更多。

  • 配置主色、色板、背景等。
  • 自定义文本、图形等元素的样式。
  • 应用手绘风等风格化效果。

下面是一个完整的代码示例，它创建了一个包含三个步骤的“计划进展”图:

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: '计划进展',
    items: [
      {
        label: '步骤 1',
        desc: '开始',
        time: 'Last Day',
        icon: 'mdi/rocket-launch',
      },
      {
        label: '步骤 2',
        desc: '进行中',
        time: 'Today',
        icon: 'mdi/progress-clock',
      },
      {label: '步骤 3', desc: '完成', time: 'Tomorrow', icon: 'mdi/trophy'},
    ],
  },
});

infographic.render();

代码要点解析:

• 资源加载器：通过 registerResourceLoader 从 Iconify 按需拉取 SVG。
• 编辑器：设置 editable: true 启用交互式编辑功能。
• 设计：design 字段自定义标题、结构与数据项类型及参数。
• 主题：切换暗色主题并用 themeConfig 配置色板、字体、风格化。
• 数据：传入标题与数据项（标签、描述、时间、图标）。

最终绘制的图片效果如下：

1.4 Infographic模板基本介绍

对于常见的图表类型，每次都从头配置 design 显然效率不高。为此，Infographic 提供了模板（Template） 功能。用户可以将一套成熟的 design 配置保存为模板，以便复用。

1. 注册与使用自定义模板:

   import {registerTemplate, Infographic} from '@antv/infographic';
   
   registerTemplate('simple-list', {
     design: {
       structure: 'list-row',
       item: 'simple',
     },
   });
   
   new Infographic({
     // 其他配置项...
     template: 'simple-list',
   });
   

2. 使用官方模板:

除了自定义模板的方法外，鉴于现实生活中有许多设计好的信息展示图表组件，大家直接在上面替换数据呈现的效果往往比自定义的图表组件展示效果还要好。基于此AntV 团队已经为我们准备了上百种精心设计的模板，覆盖了时间轴、组织架构、产品路线图等多种场景。你可以在 官方示例库 中浏览并找到心仪的样式，直接复制其模板名称并将数据修改为自己的数据即可。

例如，以下代码使用官方 list-row-simple-horizontal-arrow 模板，在纯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>

至此，大家已经掌握了 AntV Infographic 的核心用法。如果你想深入了解其所有功能，建议查阅 官方教程。接下来，笔者将进入实战环节，看看如何将它与智能体（Agent）技术结合，打造一个真正“能说会画”的图表生成器。

二、基于AntV Infographic的图表生成智能体

笔者在文章 LangChain1.0实战之多模态RAG系统（四）——Trae Solo搭建部署多模态RAG前端(附AI编程实践指南)介绍了 Vibe Coding（氛围编程） 的理念，并展示了如何利用字节跳动的 Trae Solo 模式，仅凭自然语言描述就能快速开发出功能完整的前端应用。

这次笔者同样要借助 Vibe Coding 的力量，并遵循其最佳实践，快速构建一个能够理解需求、自动生成精美信息图的智能体。

2.1 核心思路：让大模型“学会”图表配置

要构建这个智能体，首先要理清它的运作逻辑。AntV Infographic 生成图表高度依赖配置项（data, design, theme），而官方又提供了丰富的模板库。那么一个很自然的想法是：能否让大模型充当“配置工程师”？ 让大模型从用户输入的自然语言描述中，智能地抽取出关键数据、判断合适的图表类型（选择模板），并生成完整的 Infographic 配置代码。这个想法与 AntV 官方的 AI Infographic 网站不谋而合。

为了让大模型掌握这项技能笔者需要给它一份“说明书”。最直接的方式就是借鉴官方 AI 功能的提示词（Prompt）。通过浏览器的开发者工具（Network 面板）笔者捕获到 AI Infographic 网站与大模型交互时使用的提示词模板。

获取到的提示词笔者将其保存在提示词.txt文件中。限于篇幅原因，提示词就不在这里展示啦，感兴趣的小伙伴大家可以关注笔者同名微信公众号：大模型真好玩， 并私信 Infographic智能体 获得全部源码。

2.2 编写结构化代码开发提示词

有了核心思路和提示词基础，接下来就轮到 Vibe Coding 上场了。遵循最佳实践的第一步，笔者需要为 Trae Solo 撰写一份结构清晰、要素完整的提示词。

1. 角色定位： 明确赋予 Trae Solo 一个专业身份和能力范围

你是一个智能体应用开发人员，熟练掌握使用langchain1.0 python语言开发一个智能体

2. 清晰需求： 详细描述业务场景与功能点

该智能体可以通过根据用户输入的数据，采用提示词.txt文件中的提示词，生成一个.html文件。
该智能体使用deepseek接口作为大模型服务，api key在.env文件配置中，该智能体会根据用户输入搭配我提示词.txt中的内容，生成相关配置。同时参考example.html中的代码，将其中的infographic配置项替换成你生成的配置项

3. 明确的任务: 将需求转化为具体的开发指令

请使用Python代码和Langchain1.0版本生成我的需求

4. 代码约束规范: 因为这里的代码比较简单，属于玩具代码也不是完整项目，这里就不写啦，但大家要系统开发项目还是应该加上。

2.3 DeepSeek提示优化

原始提示词已经具备了所有要素，但其表述偏向口语化，逻辑连贯性有待加强。现在笔者执行第二步：使用另一个大模型（这里选用 DeepSeek）对提示词进行优化，使其更符合大模型的“阅读习惯”。

原始提示词:

你是一个智能体应用开发人员，熟练掌握使用langchain1.0 python语言开发一个智能体。该智能体可以通过根据用户输入的数据，采用提示词.txt文件中的提示词，生成一个.html文件。
该智能体使用deepseek接口作为大模型服务，api key在.env文件配置中，该智能体会根据用户输入搭配我提示词.txt中的内容，生成相关配置。同时参考example.html中的代码，将其中的infographic配置项替换成你生成的配置项。
请使用Python代码和Langchain1.0版本生成我的需求

DeepSeek优化后的结果:

项目概述：
开发一个基于LangChain的智能体应用，它能够：1. 读取用户输入的文本数据 2. 结合提示词.txt文件中的提示词模板 3. 调用DeepSeek API生成配置项 4. 读取example.html中的代码，使用新生成的配置项替换掉example.html中infographic的配置项，并写入新的名为example-result.html的文件中。
功能详细需求：
输入处理：智能体接收用户输入的文本数据作为内容素材
读取提示词.txt文件作为系统提示词
配置管理：
API密钥从.env文件中读取，变量名建议为DEEPSEEK_API_KEY
支持配置DeepSeek模型参数（如temperature, max_tokens等）
核心功能：
1. 将用户输入与提示词模板智能结合
2. 调用DeepSeek API生成正确的配置
3. 确保替换后的HTML文件可直接在浏览器中打开并正确显示
文件操作：
读取：提示词.txt（提示词模板）
写入：example-result.html（最终生成的HTML文件）
配置：.env（API密钥配置）
所有文件均为utf-8编码格式
智能体设计：
1. 使用LangChain的Agent框架
2. 包含错误处理机制（API调用失败、文件读取错误等）
提供清晰的执行状态反馈

优化后的提示词层级分明、指令明确，消除了冗余和歧义。此时将其提交给 Trae Solo，能够确保指令被最高效、最准确地执行。

2.4 Trae Solo 自动开发

将优化后的提示词提交给 Trae Solo，它便开始自动进行代码开发。整个过程流畅，Trae Solo 依次完成了环境设置、文件读取、API 调用、模板替换等核心模块的编写。

笔者审查一下生成的 infographic_agent.py 核心代码逻辑。虽然 Trae Solo 本次并未严格使用 LangChain 框架（这反映了当前 AI 编程工具在精准遵循框架指令上仍有提升空间），但它生成的代码逻辑清晰、功能完整：

1. 加载环境：读取 .env 中的 API Key。
2. 读取知识：加载 提示词.txt 中的模板。
3. 获取输入：接收用户描述文本。
4. 调用大模型：拼接提示词和用户输入，请求 DeepSeek API 生成配置。
5. 替换模板：读取 example.html，将其中预设的配置替换为新生成的配置。
6. 输出结果：保存为新的 example-result.html 文件。

# ... (代码导入和环境加载部分)
def main():
    # 1. 加载环境变量
    load_dotenv()
    api_key = os.getenv("DEEPSEEK_API_KEY")
    # ... (校验API Key)

    # 2. 读取提示词模板
    with open("提示词.txt", "r", encoding="utf-8") as f:
        prompt_template = f.read()
    
    # 3. 获取用户输入
    user_input = input("请输入文本数据作为内容素材: ")
    
    # 4. 调用DeepSeek API生成配置
    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"} # 关键：要求返回JSON
    }
    response = requests.post("https://api.deepseek.com/v1/chat/completions", ...)
    config = response.json() # 解析大模型返回的配置
    
    # 5. 读取并替换HTML模板
    with open("example.html", "r", encoding="utf-8") as f:
        html_content = f.read()
    # ... (使用生成的config替换html中的Infographic配置项)
    
    # 6. 写入新文件
    with open("example-result.html", "w", encoding="utf-8") as f:
        f.write(updated_html)
    print("✅ 操作完成！")
# ... (主函数调用)

2.5 测试与效果展示

测试流程：

运行 python infographic_agent.py，并输入一段业务描述：

2020年聚焦亚太市场，营收占比60%。
2021年拓展欧洲市场，占比提升至25%。
2022年进军北美，三大市场形成均衡格局，分别为40%、30%、25%。2023年新兴市场突破，拉美和中东合计贡献15%，全球化布局初步完成。

程序运行后，成功生成了 example-result.html。在浏览器中打开得到了一个可视化全球市场拓展历程的信息图

效果分析：

智能体成功理解了时间序列数据，并选择了一个合适的时间线模板进行展示。它将各年份的市场分布数据提取并结构化，生成了一份基本可用的信息图。当然，与官方 AI Infographic 的产出相比，在细节优化、图表精准度和视觉丰富度上还有差距，这可能与提示词的完整性、模型参数调优等因素有关，值得进一步探索和优化。

三、总结

本文分享了利用AntV Infographic可视化引擎，通过声明式配置快速生成精美信息图。同时结合Trae Solo与Vibe Coding方法，构建智能体实现自然语言描述自动转换为图表代码。五分钟即可搭建智能图表生成器。想让智能体真正融入日常生活，不必从一开始就追求宏大构想。从解决一个具体问题的小工具起步，往往就是最好的开始。当简洁灵巧的小工具遇上大模型的能力，常常能碰撞出令人惊喜的火花！