Create beautiful infographics based on given text content. Use when users request to create infographics.

Infographics convert data, information, and knowledge into perceptible visual language. They combine visual design with data visualization, compressing complex information with intuitive symbols to help audiences quickly understand and remember key points. Infographic = Information Structure + Visual Expression This task uses [AntV Infographic](https://infographic.antv.vision/) to create visual infographics. Before starting the task, you need to understand the AntV Infographic syntax specifications, including template list, data structure, themes, etc. Specifications AntV Infographic Syntax 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 AI streaming output and infographic rendering. It mainly contains the following information: 1. template: Use templates to express the text information structure. 2. data: Infographic data, including title, desc, data items, etc. Data items typically contain fields such as label, desc, icon, etc. 3. theme: Theme contains style configurations such as palette, font, etc. For example: Syntax Specifications The first line must be infographic <template name , template selected from the list below (see "Available Templates" section). Use data / theme blocks, with two space indentation within blocks. Key value pairs use "key space value"; arrays use as entry prefix. icon uses icon keywords (e.g., star fill ). data should contain title/desc + template specific main data field (not necessarily items ). Main data field selection (use only one, avoid mixing): list → lists sequence → sequences (optional order asc desc ) compare → compares (supports children for grouped comparisons), can contain multiple comparison items hierarchy structure → items (each item corresponds to an independent hierarchy, each level can contain sub items, can be nested up to 3 levels) hierarchy → single root (tree structure, nested through children ); relation → nodes + relations ; simple relation diagrams can omit nodes , using arrow syntax in relations chart → values (numeric statistics, optional category ) Use items as fallback when uncertain compare binary / compare hierarchy left right binary templates: must have two root nodes, all comparison items hang under these two root nodes' children hierarchy : use single root , nested through children (do not repeat root ) theme is used to customize themes (palette, font, etc.) For example: dark theme + custom color scheme Use theme.base.text.font family to specify font, such as handwriting style 851tegakizatsu Use theme.stylize to select built in styles and pass parameters Common styles: rough : hand drawn effect pattern : pattern fill linear gradient / radial gradient : linear/radial gradient For example: hand drawn style (rough) Do not output JSON, Markdown, or explanatory text Data Syntax Examples Data syntax examples by template category (use corresponding fields, avoid adding items simultaneously): list templates sequence templates hierarchy templates compare templates Quadrant diagram chart templates relation templates Edge label syntax: A label B or A label B Fallback items example 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 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 Template Selection Recommendations: 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 Colorful snake steps → sequence color snake steps Pyramid → sequence pyramid simple Opinion listing → list row or list column Binary comparison (pros/cons) → compare binary SWOT → compare swot Hierarchical structure (tree diagram) → hierarchy tree Data charts → chart Quadrant analysis → compare quadrant Grid list (key points) → list grid Relationship display → relation Word cloud → chart wordcloud Mind map → hierarchy mindmap Example Creating an Internet technology evolution infographic Generation Process Step 1: Understand User Requirements Before creating an infographic, first understand the user's needs 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 do you want to use?") Extract key information structure (title, desc, items, etc.). Clarify required data fields (title, desc, items, label, value, icon, etc.). Select appropriate template. Describe infographic content using AntV Infographic syntax {syntax} . Key Note : Must respect the language of user input. For example, if the user inputs in Chinese, the text in the syntax must also be in Chinese. Step 2: Render the Infographic When you have the final AntV Infographic syntax, you can generate a complete HTML file following these steps: 1. Create a complete HTML file with the following structure: DOCTYPE and HTML meta (charset: utf 8) Title: {title} Infographic Include AntV Infographic script: https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js Create container div with id container Initialize Infographic ( width: '100%' , height: '100%' ) Replace {title} with actual title Replace {syntax} with actual AntV Infographic syntax Add SVG export functionality: const svgDataUrl = await infographic.toDataURL({ type: 'svg' }); Reference HTML template: 2. Use the Write tool to generate HTML file, named as <title infographic.html 3. Show to user: Generate file path and prompt: "Open directly with a browser to view and save as SVG" Output syntax and prompt: "Tell me if you need to adjust template/colors/content" Note: The HTML file must include: SVG export via export button Container is responsive, both width and height are 100%

infographic-creator