SuperAPI AI 工具集

infographic-creation

通用与其它

查看项目

更新于 10-16 00:04

技能介绍

用途:把数据、信息与知识转化为可视化信息图,用直观符号压缩复杂内容,帮助受众快速理解与记忆。核心公式为“信息结构 + 视觉表达”。

主要能力:使用 AntV Infographic 的类 Mermaid DSL 描述渲染配置,包含 template(模板)、data(标题、描述、items 等)、theme(调色板、字体、样式)。items 支持 label、value、desc、icon、children 等字段,children 可表达层级结构。支持图标(Iconify,格式如 mdi/rocket-launch)与插画(unDraw,如 coding)。主题可自定义 palette、font,并支持 rough 手绘、pattern 图案、linear-gradient/radial-gradient 渐变等 stylize 样式。

使用方式:先理解需求并拆解信息结构,选择合适模板,用 AntV Infographic Syntax 描述内容,再生成完整 HTML 文件。HTML 需引入 https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js,注册资源加载器处理 Iconify 图标与 unDraw 插画,创建 id 为 container 的容器,初始化 Infographic 实例(width/height 均为 100%),并调用 infographic.render({syntax})。导出 SVG 使用 const svgDataUrl = await infographic.toDataURL({ type: 'svg' });。文件命名为 <title>-infographic.html,提示用户在浏览器中打开查看并保存 SVG。

模板选择:顺序流程用 sequence-,时间线用 sequence-timeline-,阶梯用 sequence-stairs-,路线图用 sequence-roadmap-vertical-,对比用 compare-binary-,SWOT 用 compare-swot,层级树用 hierarchy-tree-,数据图表用 chart-,象限用 quadrant-,网格列表用 list-grid-,关系展示用 relation-circle-,词云用 chart-wordcloud。

限制:需遵循用户输入语言;对比模板需构造恰好两个根节点;图标与插画并非所有模板都支持;插画体积较大应节制使用;资源加载失败需做错误处理。具体收费、平台与效果资料暂未提供。