用途:把数据、信息与知识转成可视化信息图,用直观符号压缩复杂内容,帮助受众快速理解与记忆。核心公式为“信息结构 + 视觉表达”,底层使用 AntV Infographic。
主要能力:通过自定义 DSL 描述渲染配置,包含 template(模板,决定文本信息结构)、data(标题、描述、数据项等)、theme(调色板、字体等样式)。支持列表、序列、对比、层级、关系、图表等大量模板,如 list-row-horizontal-icon-arrow、sequence-timeline-simple、compare-swot、hierarchy-tree-、chart-column-simple、relation-dagre-flow-、chart-wordcloud、hierarchy-mindmap-* 等。主题可设 dark、自定义 palette,并用 theme.stylize 选择 rough(手绘)、pattern、linear-gradient、radial-gradient 等内置样式,字体可用 theme.base.text.font-family 指定。
使用方式:先理解需求并拆解出标题、描述、数据项等关键结构,选定模板,用 AntV Infographic 语法描述内容(须与用户输入语言一致),再生成完整 HTML 文件。HTML 需含 utf-8 元信息、标题 {title} - Infographic、引入 https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js、id 为 container 的容器,初始化 Infographic(width/height 均为 100%),并加入 SVG 导出:const svgDataUrl = await infographic.toDataURL({ type: 'svg' });。文件命名为 <title>-infographic.html,提示用户用浏览器打开并可另存为 SVG。
语法要点:首行必须为 infographic <模板名>;data/theme 块内用两空格缩进;键值对用“键 空格 值”,数组用 - 前缀;icon 用图标关键词。主数据字段按模板类别选择且避免混用:list-* 用 lists,sequence-* 用 sequences(可选 order asc|desc),compare-* 用 compares(支持 children 分组),hierarchy-structure 用 items,hierarchy-* 用单一 root 并通过 children 嵌套,relation-* 用 nodes + relations,chart-* 用 values;不确定时用 items 兜底。二元对比模板须有两个根节点。不要输出 JSON、Markdown 或解释性文字。
适用场景:流程步骤、时间线、路线图、阶梯、金字塔、观点罗列、优劣对比、SWOT、象限分析、树状层级、关系图、数据图表、词云、思维导图等。
限制:资料未提供收费、价格、平台支持范围及渲染效果保证等信息;模板与语法细节以官方资料为准。