SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsinfographic-creator

infographic-creator

General & other

View repository

Updated 10-15 16:51

About this skill

Infographics transform data, information, and knowledge into a perceptible visual language. They combine visual design and data visualization, using intuitive symbols to compress complex information and help audiences quickly understand and remember key points.

Infographic = Information Structure + Visual Expression

This task uses AntV Infographic to create a visual infographic.

Before starting the task, you need to understand the AntV Infographic syntax specification, including the template list, data structures, themes, etc.

Language Lock

  • The language in which the prompt is written and the language of the examples cannot determine the final output language.
  • If the user inputs English, then the generated title、desc、label and other copy must remain in English; do not automatically translate it into Chinese.
  • If the user inputs Chinese, then the generated title、desc、label and other copy must remain in Chinese; do not automatically translate it into English.

Specification

AntV Infographic Syntax

The AntV Infographic syntax is a custom DSL used to describe infographic rendering configuration. It uses indentation to express structure, making it suitable for AI to directly generate and stream output. The core information includes:

  1. template: Use a template to express the information structure.
  2. data: Infographic data, including title、desc and the main data field.
  3. theme: Theme configuration, including palette, fonts, stylization, etc.

For 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

Hard Syntax Rules

  • The first line must be infographic <template-name>。
  • In the template list, write only the template name itself; in the actual output, the first line must explicitly write the infographic prefix.
  • Use data / theme blocks, and use two spaces for indentation consistently within the block.
  • The key-value pair syntax is 键 空格 值; object arrays use - as the item prefix.
  • icon You can use an exact icon ID, for example mingcute/server-line, or you can use a semantic keyword phrase, for example star fill。
  • If using semantic keyword phrases, separate multiple keywords with spaces, not hyphens; for example, write rocket launch, do not write rocket-launch。
  • For lists、sequences、nodes、items as well as compares/children semantic data items under it, by default iconshould be added; do not omit it just because the field is optional.
  • If the template name or visual style clearly depends on icons, then each main data item should include icon。
  • If you are unsure of the exact icon ID, still prioritize writing a concise semantic keyword, for example rocket、shield、database、users、chart line, rather than omitting the icon field.
  • Only for pure chart-type data points, pure numeric sequences, or when the user explicitly requests a minimal text version, may icon。
  • value be omitted. Use pure numeric values as much as possible; express numeric units preferentially in label or desc .
  • palette It is recommended to use the inline simple array syntax, for example palette #4f46e5 #06b6d4 #10b981。
  • palette The color values in are bare values, without quotes and without commas.
  • data Put only one main data field matching the template, and avoid mixing lists、sequences、compares、values、root、nodes。

Main data field selection rules:

  • list-* → lists
  • sequence-* → sequences, optional order asc|desc
  • sequence-interaction-* → sequences + relations
    • sequences represents the lane list
    • Each lane must include label
    • Each lane's children represents the node list
    • children Each item under must be written as an object item and include label
    • Nodes may optionally id、icon、step、desc、value
    • step used to represent time hierarchy; identical step are at the same level
  • compare-* → compares
    • compare-binary-* / compare-hierarchy-left-right-*
      • compares The first level must have exactly two root nodes, representing the two sides of the comparison respectively
      • Both root nodes should contain children
      • The actual comparison items are written under their respective children under
      • children Each item under must be written as an object entry and contain label
      • Even if each side has only 1 metric, it must still be written as children containing 1 object entry
    • compare-swot
      • compares can directly hold multiple root nodes
      • Each root node may optionally have children
    • compare-quadrant-*
      • compares directly place 4 quadrant root nodes
  • hierarchy-structure → items
  • hierarchy-* → single root, through children recursively nested
  • relation-* → nodes + relations
    • Simple relationships can also directly use arrow syntax to express relationships
  • chart-* → values
    • chart-line-plain-text / chart-bar-plain-text / chart-column-simple all use a single ordered values
    • Each data point uses label to represent the category, and uses value to represent the value
    • The order of the line chart is expressed by the values by the order of the entries in
  • When the structure cannot be clearly determined, use items as a fallback

Theme rules:

  • theme used to customize the theme, for example palette、base、stylize
  • Use theme.base.text.font-family to specify the font, such as 851tegakizatsu
  • Use theme.stylize to select a built-in style and pass parameters
    • rough: hand-drawn effect
    • pattern: pattern fill
    • linear-gradient / radial-gradient: gradient style
  • Output only the Infographic syntax itself, without outputting JSON, explanatory text, or extra Markdown paragraphs

Data syntax examples

Give concise but complete positive examples by template category:

  • list-* template
infographic list-grid-badge-card
data
  title Feature List
  lists
    - label Fast
      icon flash fast
    - label Secure
      icon shield check
  • sequence-* template
infographic sequence-ascending-steps
data
  title 发布流程
  sequences
    - label 需求确认
      icon clipboard check
    - label 开发实现
      icon code
    - label 发布上线
      icon rocket
  order asc
  • sequence-interaction-* template
infographic sequence-interaction-compact-animated-badge-card
data
  title 登录校验流程
  sequences
    - label 用户
      icon user
      children
        - label 发起登录
          id user-login
          step 0
          icon login
        - label 收到结果
          id user-result
          step 2
          icon inbox check
    - label 服务端
      icon server
      children
        - label 校验凭证
          id server-verify
          step 1
          icon shield check
        - label 返回结果
          id server-return
          step 2
          icon send
  relations
    user-login - 提交账号密码 -> server-verify
    server-verify - 生成结果 -> server-return
    server-return - 返回结果 -> user-result
  • hierarchy-* template
infographic hierarchy-tree-curved-line-rounded-rect-node
data
  title 组织结构
  root
    label 公司
    children
      - label 产品部
      - label 技术部
  • compare-swot template
infographic compare-swot
data
  title 产品 SWOT
  compares
    - label Strengths
      icon trophy
      children
        - label 品牌认知高
          icon star
    - label Weaknesses
      icon alert circle
      children
        - label 成本压力大
          icon wallet
  • compare-binary-* template
infographic compare-binary-horizontal-simple-fold
data
  title 餐桌价格对比
  compares
    - label 原价
      icon tag
      children
        - label 原价
          value 500
          icon tag
    - label 实际支付
      icon wallet
      children
        - label 实际支付
          value 450
          icon check bold
  • compare-quadrant-* template
infographic compare-quadrant-quarter-simple-card
data
  title 任务优先级
  compares
    - label 高价值低成本
    - label 高价值高成本
    - label 低价值低成本
    - label 低价值高成本
  • chart-line-plain-text template
infographic chart-line-plain-text
data
  title 模型 A 准确率变化
  desc 第 4 周提升最明显
  values
    - label Week1
      value 86.5
    - label Week2
      value 87.3
    - label Week3
      value 89.1
    - label Week4
      value 91.2
theme
  palette #4f46e5 #db2777 #14b8a6
  • relation-* template
infographic relation-dagre-flow-tb-simple-circle-node
data
  title 系统关系
  nodes
    - label API
    - id db
      label DB
  relations
    API - 读写 -> db
  • fallback items example
infographic list-row-horizontal-icon-arrow
data
  title 要点总结
  items
    - label 效率优先
      desc 聚焦关键动作
    - label 结果导向
      desc 输出可执行结论

Available 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
  • 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-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-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-waterfall-badge-card
  • list-waterfall-compact-card
  • list-zigzag-down-compact-card
  • list-zigzag-down-simple
  • list-zigzag-up-compact-card
  • list-zigzag-up-simple
  • 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-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
  • sequence-interaction-default-badge-card
  • sequence-interaction-default-animated-badge-card
  • sequence-interaction-default-compact-card
  • sequence-interaction-default-capsule-item
  • sequence-interaction-default-rounded-rect-node

Template selection suggestions

  • Strict order, step progression, stage evolution → sequence-*
  • Multi-role or multi-system interaction → sequence-interaction-*
  • Listing parallel key points → list-row-* / list-column-* / list-grid-*
  • Two-party comparison, option comparison, before-and-after comparison → compare-binary-*
    • First determine who the two sides are
    • Then expand children
  • SWOT analysis → compare-swot
  • Quadrant analysis → compare-quadrant-*
  • Hierarchical tree structure → hierarchy-tree-*
  • Statistical trends, single-series changes → chart-line-plain-text
  • Statistical comparison, single-group value comparison → chart-bar-plain-text / chart-column-simple
  • Node relationships, process dependencies → relation-*
  • Word frequency topic display → chart-wordcloud
  • Mind map → hierarchy-mindmap-*

Complete output example

infographic list-row-horizontal-icon-arrow
data
  title 产品增长要点
  desc 聚焦获客、转化、复购三个阶段
  lists
    - label 获客
      desc 多渠道投放与内容触达
      icon rocket launch
    - label 转化
      desc 优化路径并减少流失
      icon chart line
    - label 复购
      desc 会员权益与分层运营
      icon repeat
theme
  palette #3b82f6 #8b5cf6 #f97316

Output format

Output only one plain code block, without adding any explanatory text:

infographic list-row-horizontal-icon-arrow
data
  title 标题
  desc 描述
  lists
    - label 条目
      value 12.5
      desc 说明
      icon document text
theme
  palette #3b82f6 #8b5cf6 #f97316

Self-check list

Before outputting, check the following items:

  • Whether the first line is infographic <template-name>
  • Whether only one main data field matching the template is used
  • Whether the main data items all have reasonable icon, especially lists, steps, nodes, comparison items, and templates whose names contain icon templates
  • palette Whether it is a bare color value, without quotes and commas
  • sequence-interaction-* Are all lane nodes written as children -> - label ...
  • compare-binary-* / compare-hierarchy-left-right-* Does it have only two root nodes, with the content on both sides placed under their respective children under
  • children Does every item under explicitly include label
  • chart-line-plain-text Does it use a single ordered values
  • Is there no JSON, explanatory text, or extra code blocks in the output?

Generation workflow

Step 1: Understand user requirements

Before creating an infographic, first understand the user's requirements and the information they want to express, in order to determine the template and data structure.

If the user provides a clear content description, it should be broken down into a clear and concise structure.

Otherwise, clarification from the user is needed (e.g., "Please provide a clear and concise content description.", "Which template would you like to use?")

  • Extract the key information structure (title, desc, items, etc.).
  • Clarify the required data fields (title, desc, items, label, value, icon, etc.).
  • Proactively supplement semantically clear major data items with icon, without waiting for the user to remind you separately.
  • Choose an appropriate template.
  • Use AntV Infographic syntax to describe the infographic content. {syntax}。

Key notes: The language of user input must be respected. For example, if the user inputs Chinese, the text in the syntax must also be Chinese.

Step 2: Render the infographic

Once the final AntV Infographic syntax is obtained, follow these steps to generate the complete HTML file:

  1. Create a complete HTML file containing the following structure:
    • DOCTYPE and HTML meta (charset: utf-8)
    • Title：{title} - Infographic
    • Import the AntV Infographic script:https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js
    • Create a container div with id container container div
    • Initialize Infographic (width: '100%'、height: '100%'）
    • Replace with the actual title {title}
    • Replace with the actual AntV Infographic syntax {syntax}
    • Add SVG export functionality:const svgDataUrl = await infographic.toDataURL({ type: 'svg' });

HTML template for reference:

<div id="container"></div>
<script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>
<script>
 const infographic = new AntVInfographic.Infographic({
    container: '#container',
    width: '100%',
    height: '100%',
  });
  infographic.render(`{syntax}`);
  document.fonts?.ready.then(() => {
    infographic.render(`{syntax}`);
  }).catch((error) => console.error('Error waiting for fonts to load:', error));
</script>

  1. Use the Write tool to generate an HTML file named <title>-infographic.html

  2. Show to the user:

    • Generate the file path and prompt: "Open it directly in a browser to view and save the SVG"
    • Output the syntax and prompt: "Let me know if you need to adjust the template/color scheme/content"

**Note:** The HTML file must include:

  • Implement SVG export via an export button
  • The container is responsive, with width and height both 100%