这是本节的多页打印视图。 .

使用 AntV 创建信息图

把简洁的声明式数据转换成本地 SVG 信息图。

1: 流程、时间线与循环
2: 信息图布局、漏斗与主题

infographic 短代码使用 Oink 随主题分发的固定版本 AntV Infographic 运行时渲染 DSL。它适合展示流程、时间线、循环、漏斗、路线图与紧凑信息摘要；如果统计图显得过于生硬，可以选择信息图。

DSL 会作为数据序列化，不会作为任意 HTML 或可执行代码插入页面。浏览器运行时把它转换成 SVG，并且只在实际使用该短代码的页面加载。

快速开始

{{< infographic >}}
infographic list-row-simple-horizontal-arrow
data
  title 文档工作流
  items
    - label 草稿
      desc 写出第一个版本
    - label 评审
      desc 检查事实与语言
    - label 发布
      desc 构建并验证站点
{{< /infographic >}}

下图展示同样的三个步骤：草稿阶段写出初版，评审阶段核对事实与语言，发布阶段则构建并验证站点。

语法结构

信息图通常包含：

infographic TEMPLATE：选择内置 AntV 模板；
data 块：包含可选的 title 与 desc；
items 列表：包含 label、desc，以及可选的 value 和嵌套 children；
可选的 theme 块：选择内置主题或显式颜色。

缩进决定结构。标签应保持简短，描述用于补充上下文；模板表达的视觉关系必须与正文一致。装饰性的序列不能替代真实的层级或对比关系。

短代码参数

参数	默认值	行为
`height`	`auto`	接受 `auto`，或非负数字与 `px`、`rem`、`em`、`vh`、`vw`、`%` 单位
`full`	`false`	设为 `true` 后移除 Oink 的常规正文宽度限制

无效高度与空 DSL 正文会让 Hugo 构建失败。DSL Schema 或模板错误则由浏览器运行时显示在信息图容器中。

AntV 主题属于 DSL，而不是短代码参数。它不会自动跟随 Oink 站点配色模式，因此必须在深浅两种模式中检查前景、背景与页面周围区域的对比度。

选择指南

流程、时间线与循环演示三种常见的顺序说明方式；
布局、漏斗与主题演示网格、逐步收窄的阶段、模板选择与内置手绘主题。

AntV 包含大量模板。请优先选择足以解释关系的最小视觉形式，不要只追求最具装饰性的模板。

创作与无障碍

在图形前后使用普通正文概括同一结论；
保持阅读顺序有意义，并缩短标签；
不要只通过颜色或形状传递状态；
检查长译文标签、窄屏、打印与站点深浅两种配色模式；
本地优先页面应避免远程图片或图标标识；确需使用时，必须显式审查网络与许可证边界；
非演示数值应注明来源与日期。

SVG 可以提高视觉保真度，但不能保证每种模板都能提供与原生标题、列表、表格相同的语义结构。关键指令必须继续出现在相邻正文中。

延伸参考

OINK 负责记录短代码与交付边界。完整 DSL、模板图库与主题模型请查阅 AntV Infographic 文档、图库与源码仓库。Oink 主题的 VENDOR.json 记录随附版本、校验值与 MIT 许可证文件。

1 - 流程、时间线与循环

根据顺序关系选择横向、时间线或循环模板。

不同序列模板回答不同问题。横向流程强调有序交接，时间线强调先后顺序，循环则强调末尾阶段会再次回到起点。相邻正文必须说明真正重要的是哪一种关系。

横向流程

简短的从左到右流程可以使用 list-row-simple-horizontal-arrow。请缩短标签，并在窄屏下确认渲染顺序仍然清晰。

{{< infographic >}}
infographic list-row-simple-horizontal-arrow
data
  title 文档交付
  items
    - label 规划
      desc 明确读者与预期结果
    - label 撰写
      desc 完成最小而完整的页面
    - label 评审
      desc 核对事实、语言与链接
    - label 交付
      desc 构建并验证线上路由
{{< /infographic >}}

该流程从规划进入撰写和评审，最后得到经过单独验证的线上结果。

时间顺序

时间或版本先后是主要关系时，使用 sequence-timeline-simple。

{{< infographic >}}
infographic sequence-timeline-simple
data
  title 发布证据
  items
    - label 源码就绪
      desc 范围、文案、归属与评审全部完成
    - label 检查通过
      desc 主题与项目站测试套件通过
    - label 标签公开
      desc 不可变模块版本可以解析
    - label 站点部署
      desc 生产路由通过冒烟测试
{{< /infographic >}}

这条时间线区分四项证据：测试通过不能跳过公开标签与部署阶段。

持续循环

只有最后一项确实会把工作送回第一项时，才使用 sequence-circular-simple。存在终止状态的流程不应画成循环。

{{< infographic height="480px" >}}
infographic sequence-circular-simple
data
  title 文档维护循环
  items
    - label 观察
      desc 收集支持请求与搜索信号
    - label 排序
      desc 选择要解决的读者问题
    - label 改进
      desc 更新内容与示例
    - label 验证
      desc 检查链接、渲染与结果
{{< /infographic >}}

验证会产生新的观察结果，因此维护循环会再次回到第一阶段。

选择原则

如果去掉箭头或时间轴也不会改变含义，请改用原生列表或卡片。信息图应该揭示关系，而不是装饰一组彼此无关的陈述。

2 - 信息图布局、漏斗与主题

无需自定义 JavaScript，即可展示分组、收窄与风格化信息。

AntV 模板由结构、数据项与标题样式组成。切换模板也会改变隐含关系，因此应先审查含义，再考虑外观。下面的示例只使用扁平 items 数据，不包含远程图标。

分组事实网格

多项事实围绕同一主题，但没有固定顺序时，可以使用 list-grid-badge-card。

{{< infographic >}}
infographic list-grid-badge-card
data
  title 文档质量门槛
  items
    - label 准确性
      desc 命令与版本符合产品事实
    - label 覆盖度
      desc 包含必要概念与任务
    - label 语言
      desc 中英文保持等价
    - label 交付
      desc 线上路由与评审源码一致
{{< /infographic >}}

这四项门槛彼此并列，不应把其中一项画成另一项的前提。

逐步收窄的漏斗

每个阶段都会有意减少总体数量时，使用 sequence-funnel-simple。请加入 value 字段，并在正文中重复这些数字。

{{< infographic height="460px" >}}
infographic sequence-funnel-simple
data
  title 文档评审漏斗
  items
    - label 完成草稿
      value 40
      desc 提交评审的页面
    - label 事实核对
      value 34
      desc 验证命令与论断
    - label 语言评审
      value 31
      desc 对齐中英文内容
    - label 完成发布
      value 28
      desc 验证线上页面
{{< /infographic >}}

40 页草稿经过评审后，得到 34 页已核对事实的页面、31 页已完成语言评审的页面，以及 28 页经过验证的线上页面。

内置手绘主题

主题只改变样式，不改变数据含义。hand-drawn 适合非正式规划材料，也可以使用自定义主色与站点视觉保持一致。

{{< infographic >}}
infographic sequence-stairs-front-simple
data
  title 从笔记到可维护文档
  items
    - label 记录
      desc 写下观察到的行为
    - label 解释
      desc 补充上下文与读者目标
    - label 验证
      desc 测试示例与链接
    - label 维护
      desc 指定负责人和更新路径
theme hand-drawn
  colorPrimary #2563eb
{{< /infographic >}}

选择模板家族

关系	推荐起点
有序交接	`list-row-simple-horizontal-arrow`、`sequence-steps-simple`
时间或路线图	`sequence-timeline-simple`、`sequence-roadmap-vertical-simple`
重复循环	`sequence-circular-simple`、`sequence-circle-arrows-indexed-card`
并列事实	`list-grid-badge-card`、`list-grid-compact-card`
逐步减少	`sequence-funnel-simple`、`sequence-pyramid-simple`
层级	`hierarchy-tree-`、`hierarchy-mindmap-`

模板可用性取决于随附 AntV 版本。采用较少见的模板前，请使用真实中英文内容渲染，并固定其 VENDOR.json 已包含该模板的 Oink 发行版。

布局检查清单

并列标签应保持语法一致；
只有数值单位或含义明确时才使用 value；
避免固定高度裁掉译文；
只有周围页面与打印布局确有需要时才设置 full=true；
分别检查模板含义、对比度、溢出与阅读顺序；
网络隔离文档不得引用远程图标或图片。