Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart), including layout logic, component composition, and registration.

2026-01-103

infographic-syntax-creator

yusixian/astro-koharu

Generate AntV Infographic syntax outputs. Use when asked to turn user content into the Infographic DSL (template selection, data structuring, theme), or to output `infographic <template>` plain syntax.

2026-01-103

blog-writer

yusixian/astro-koharu

帮助用户按照 astro-koharu 博客的规范创建新博文。自动生成正确的 frontmatter 结构、选择合适的分类路径，并提供 Markdown 内容框架建议。使用场景：写一篇博文、创建新文章、写文章、写博客、new post、create blog post。

2026-01-023

infographic list-row-horizontal-icon-arrow data title Title desc Description items - label Label value 12.5 desc Explanation icon mdi/rocket-launch theme palette #3b82f6 #8b5cf6 #f97316

infographic list-row-simple-horizontal-arrow theme dark palette - #61DDAA - #F6BD16 - #F08BB4 data items - label Step 1 desc Start - label Step 2 desc In Progress - label Step 3 desc Complete

infographic list-row-simple-horizontal-arrow theme stylize rough base text font-family 851tegakizatsu data items - label Step 1 desc Start - label Step 2 desc In Progress - label Step 3 desc Complete

interface Data { title?: string; desc?: string; items: ItemDatum[]; [key: string]: any; } interface ItemDatum { icon?: string; label?: string; desc?: string; value?: number; illus?: string; children?: ItemDatum[]; [key: string]: any; }

infographic list-row-horizontal-icon-arrow data title Internet Technology Evolution desc From Web 1.0 to AI era, key milestones items - time 1991 label Web 1.0 desc Tim Berners-Lee published the first website, opening the Internet era icon mdi/web - time 2004 label Web 2.0 desc Social media and user-generated content become mainstream icon mdi/account-multiple - time 2007 label Mobile desc iPhone released, smartphone changes the world icon mdi/cellphone - time 2015 label Cloud Native desc Containerization and microservices architecture are widely used icon mdi/cloud - time 2020 label Low Code desc Visual development lowers the technology threshold icon mdi/application-brackets - time 2023 label AI Large Model desc ChatGPT ignites the generative AI revolution icon mdi/brain

infographic sequence-horizontal-zigzag-simple-illus data title Product Development Phases desc Key stages in our development process items - label Research desc Understanding user needs illus user-research - label Design desc Creating user experience illus design-thinking - label Development desc Building the product illus coding - label Launch desc Going to market illus launch-day

<div id="container"></div> <script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script> <script> // Resource Loader Script // Use the following resource loader script to handle icon and illustration loading: const svgTextCache = new Map(); const pendingRequests = new Map(); AntVInfographic.registerResourceLoader(async (config) => { const { data, scene } = config; try { const key = `${scene}::${data}`; let svgText; // 1. Check cache if (svgTextCache.has(key)) { svgText = svgTextCache.get(key); } // 2. Check if request is already in progress else if (pendingRequests.has(key)) { svgText = await pendingRequests.get(key); } // 3. Make new request else { const fetchPromise = (async () => { try { let url; if (scene === 'icon') { url = `https://api.iconify.design/${data}.svg`; } else if (scene === 'illus') { url = `https://raw.githubusercontent.com/balazser/undraw-svg-collection/refs/heads/main/svgs/${data}.svg`; } else return null; if (!url) return null; const response = await fetch(url, { referrerPolicy: 'no-referrer' }); if (!response.ok) { console.error(`HTTP ${response.status}: Failed to load ${url}`); return null; } const text = await response.text(); if (!text || !text.trim().startsWith('<svg')) { console.error(`Invalid SVG content from ${url}`); return null; } svgTextCache.set(key, text); return text; } catch (fetchError) { console.error(`Failed to fetch resource ${key}:`, fetchError); return null; } })(); pendingRequests.set(key, fetchPromise); try { svgText = await fetchPromise; } catch (error) { pendingRequests.delete(key); console.error(`Error loading resource ${key}:`, error); return null; } finally { pendingRequests.delete(key); } } if (!svgText) { return null; } const resource = AntVInfographic.loadSVGResource(svgText); if (!resource) { console.error(`loadSVGResource returned null for ${key}`); svgTextCache.delete(key); return null; } return resource; } catch (error) { console.error('Unexpected error in resource loader:', error); return null; } }); </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>

infographic list-row-horizontal-icon-arrow data title Title desc Description items - label Label value 12.5 desc Explanation icon mdi/rocket-launch theme palette #3b82f6 #8b5cf6 #f97316

infographic list-row-simple-horizontal-arrow theme dark palette - #61DDAA - #F6BD16 - #F08BB4 data items - label Step 1 desc Start - label Step 2 desc In Progress - label Step 3 desc Complete

infographic-creator

SPECs

AntV Infographic Syntax

The Syntax

Icon and Illustration Resources

Available Templates

Example

Example 2: Using Illustrations

Creation Process

Step 1: Understanding User Requirements

Step 2: Rendering the Infographic