skills.rest
mdnaimul22
mdnaimul22COMMUNITY
Explore all skills by this author →
GitHub

infographic-creator

Converts user text into AntV Infographic HTML with SVG export.

2|Updated Apr 15, 2026
Search Tags:#html generation#visualization#infographics#svg export#antv infographic#data-to-design#template dsl
One-click install
npx skills add https://github.com/mdnaimul22/human-skills --skill infographic-creator-mdnaimul22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: infographic-creator
Source: https://github.com/mdnaimul22/human-skills/tree/main/skills/antv-infographic-generator
Command: npx skills add https://github.com/mdnaimul22/human-skills --skill infographic-creator-mdnaimul22

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

It helps you quickly transform structured text content into a visually clear infographic, so you can communicate key information faster and more memorably than with plain text.

Core Features & Use Cases

  • Generates AntV Infographic HTML from text specifications using the AntV Infographic DSL (templates, data blocks, and themes).
  • Selects the right visualization template (lists, sequences, hierarchies, charts, comparisons, and relations) based on your content structure.
  • Produces a browser-ready, responsive SVG workflow so you can view and save the final graphic.

Example use case: You want to present a project timeline with milestones; provide the milestone labels and supporting descriptions, and the skill outputs an AntV-rendered infographic you can export as SVG.

Quick Start

Ask the AI to create an infographic for your content using AntV Infographic syntax and request the resulting responsive HTML file with SVG export.

Frequently Asked Questions about infographic-creator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn text into an infographic for a web page?▼

To turn text into an infographic, you provide structured text content and theme preferences to generate a browser-renderable HTML output. The system uses AntV syntax to map your data into visual templates like hierarchies, comparisons, and process diagrams.

Can I export SVG graphics from plain text data?▼

Yes, you can export SVG graphics from plain text data. The generated HTML output includes an SVG export workflow, allowing you to view and save the final infographic visualization directly from your browser.

What is the AntV infographic template DSL structure?▼

The AntV infographic template DSL structure requires an infographic template line alongside data and theme blocks. These blocks must use two-space indentation to correctly render the visualization in the final HTML output.

How do I create a process diagram or hierarchy from structured text?▼

You can create a process diagram or hierarchy by providing milestone labels and supporting descriptions. The system selects the right visualization template based on your content structure and generates the corresponding graphic.

What are the limitations of generating AntV infographics from text?▼

A key limitation is the strict requirement for correct AntV DSL structure, specifically two-space indentation for data and theme blocks. If the structured text format deviates from this syntax, the infographic will not render correctly.

Do I need any specific dependencies to render AntV infographics in a browser?▼

No external dependencies are required to start rendering AntV infographics. The skill produces a browser-ready, responsive HTML file that handles the visualization workflow and SVG export independently.

Related Skills

Explore More Design & Creative Skills→
twwchtwwch
68

infographic-creator

Translate text into AntV Infographic DSL snippets with template, data, and theme sections.

Community
Intermediate
mkalhitti-cloudmkalhitti-cloud
2

algorithmic-art

Translate algorithmic philosophy into self-contained p5.js generative art HTML artifacts.

Community
Advanced
wachawowachawo

ckm:slides

Generate responsive HTML presentation decks with Chart.js visualizations.

Community
Intermediate
fefogarciafefogarcia
1

data-visualization

Generate charts, dashboards, and infographics from datasets in React, Python, and HTML formats.

Community
Intermediate