Infographic

An infographic fence picks an AntV template and renders “a title plus a list of items” as an infographic. Use it for structure: order, hierarchy, comparison. When you need axes and numeric precision use ECharts; when you need a flow with conditional branches use Mermaid. The fence body is data, and it stays readable text on GitHub.

Shortest form

The first line is infographic <template>, followed by a data block: title is the title and every entry under items needs at least a label.

```infographic
infographic list-row-simple-horizontal-arrow
data
  title Three steps in one documentation change
  items
    - label Write
      desc Start with the source language
    - label Check
      desc Zero build warnings, every example really rendered
    - label Ship
      desc Add the translated peer, open the PR
```

Indentation decides the structure, two spaces per level. Keep labels short and put the explanation in desc.

Timelines

The sequence-timeline-* family lays the items out on a time axis, with label as the point in time and desc as the event.

```infographic {height="420px"}
infographic sequence-timeline-simple
data
  title The last five PostgreSQL major versions
  items
    - label 2021
      desc 14: another round of parallel query and logical replication work
    - label 2022
      desc 15: the MERGE statement
    - label 2023
      desc 16: logical replication from a standby
    - label 2024
      desc 17: incremental backup and JSON_TABLE
    - label 2025
      desc 18: the asynchronous IO subsystem
```

Funnels

sequence-funnel-simple draws stages that narrow. Below are the theme’s five release states: they are not interchangeable, and only the last one is live.

```infographic {height="420px"}
infographic sequence-funnel-simple
data
  title The five states a theme release passes through
  items
    - label Source complete
      desc The code is written, and that is all
    - label Validated
      desc Theme checks and the site suite are green
    - label Published
      desc An immutable signed tag, resolvable through the Go proxy
    - label Documented
      desc The documentation site pins that tag
    - label Deployed
      desc Production runs this version
```

Grid cards

When items have no order between them, list-grid-* arranges them in a grid rather than a queue.

```infographic {height="380px"}
infographic list-grid-compact-card
data
  title One page, four outputs
  desc Every content component has to produce something usable in all four
  items
    - label HTML
      desc Interactive, runtimes loaded on demand
    - label Print
      desc Disclosures expanded, zoom and copy removed
    - label Markdown
      desc Plain text, compared byte for byte against goldens
    - label RSS
      desc Static, from the same source as print
```

Items with values

Add value to an item and templates that express proportion — pies, doughnuts, progress — will use it.

```infographic {height="400px"}
infographic chart-pie-donut-plain-text
data
  title How the 29 shortcodes break down
  items
    - label Core components
      value 14
    - label Book numbering and indexes
      value 10
    - label Releases and downloads
      value 3
    - label OpenAPI
      value 2
```

Hierarchy and hand-drawn style

Items can nest through children, and hierarchy-mindmap-* draws two levels of structure. A top-level theme block changes the whole look; type takes light, dark or hand-drawn.

```infographic {height="320px"}
infographic hierarchy-mindmap-level-gradient-compact-card
theme
  type hand-drawn
data
  root
    label Theme repository
    children
      - label layouts
        desc templates
        children
          - label _markup
            desc render hooks
          - label _partials
            desc shell and helpers
      - label assets
        desc resources
        children
          - label scss
            desc tokens and component styles
          - label js
            desc browser runtimes
          - label third_party
            desc libraries shipped with the theme
```

theme belongs to the DSL, not to the fence attributes, and it does not follow the site’s colour scheme: a diagram with type dark stays dark on a light page. Check contrast in both modes.

Picking a template

Template names are structure-variant, and one structure has several visual variants. The common families:

Choose the smallest form that makes the relationship clear. The full gallery is at AntV Infographic, and the template names match the version shipped with the theme.

Output

Whatever the diagram says, say it in the prose too: print and RSS carry the DSL and nothing else.

Parameter reference

The fence attribute line (```infographic {…}):

style, on*, and unknown attributes warn and are ignored. An empty DSL body warns and renders nothing. Strict publishing rejects all these warnings.

The DSL’s top-level keys (AntV’s, not the theme’s):

Each entry under items accepts label, desc, value, icon, children, group and id. The DSL is defined by the AntV Infographic documentation; the version shipped with the theme and its checksum are recorded in the theme’s VENDOR.json.

Limits

• A wrong template name does not fail the build: Hugo checks the fence attributes only, the DSL is parsed by the browser runtime, and a missing template shows a line of error text in the container. Check the page after changing a template name.
• No colour-scheme awareness: theme lives in the DSL, so check contrast in both modes.
• Print and RSS carry the DSL only, so the conclusion belongs in the prose.
• SVG is not a semantic structure: the order a screen reader gets is not necessarily the visual order. Prefer headings, lists and tables when they can say it.
• Keep labels short: long text is truncated or squeezed on a narrow screen, so check at phone width after editing.

Related

• ECharts — when you need axes and exact numbers
• Steps — when the reader has to follow the procedure
• Cards — a grid of clickable entry points
• Mermaid — flows with branches and conditions