# 流程、时间线与循环

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

---

LLMS index: [llms.txt](/llms.txt)

---

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

## 横向流程 {#horizontal-process}

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

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

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

<!-- prettier-ignore-start -->

<div id="td-infographic-6f78508094dd1cb7c680d76bec346303-0" class="td-infographic td-max-width-on-larger-screens"
  data-td-infographic data-height="auto">
  <div id="td-infographic-6f78508094dd1cb7c680d76bec346303-0-canvas" data-td-infographic-canvas></div>
  <script type="application/json" data-td-infographic-syntax>"infographic list-row-simple-horizontal-arrow\ndata\n  title 文档交付\n  items\n    - label 规划\n      desc 明确读者与预期结果\n    - label 撰写\n      desc 完成最小而完整的页面\n    - label 评审\n      desc 核对事实、语言与链接\n    - label 交付\n      desc 构建并验证线上路由"</script>
</div>


<!-- prettier-ignore-end -->

## 时间顺序 {#chronological-timeline}

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

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

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

<!-- prettier-ignore-start -->

<div id="td-infographic-6f78508094dd1cb7c680d76bec346303-1" class="td-infographic td-max-width-on-larger-screens"
  data-td-infographic data-height="auto">
  <div id="td-infographic-6f78508094dd1cb7c680d76bec346303-1-canvas" data-td-infographic-canvas></div>
  <script type="application/json" data-td-infographic-syntax>"infographic sequence-timeline-simple\ndata\n  title 发布证据\n  items\n    - label 源码就绪\n      desc 范围、文案、归属与评审全部完成\n    - label 检查通过\n      desc 主题与项目站测试套件通过\n    - label 标签公开\n      desc 不可变模块版本可以解析\n    - label 站点部署\n      desc 生产路由通过冒烟测试"</script>
</div>


<!-- prettier-ignore-end -->

## 持续循环 {#continuous-cycle}

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

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

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

<!-- prettier-ignore-start -->

<div id="td-infographic-6f78508094dd1cb7c680d76bec346303-2" class="td-infographic td-max-width-on-larger-screens"
  data-td-infographic data-height="480px">
  <div id="td-infographic-6f78508094dd1cb7c680d76bec346303-2-canvas" data-td-infographic-canvas style="height: 480px"></div>
  <script type="application/json" data-td-infographic-syntax>"infographic sequence-circular-simple\ndata\n  title 文档维护循环\n  items\n    - label 观察\n      desc 收集支持请求与搜索信号\n    - label 排序\n      desc 选择要解决的读者问题\n    - label 改进\n      desc 更新内容与示例\n    - label 验证\n      desc 检查链接、渲染与结果"</script>
</div>


<!-- prettier-ignore-end -->

## 选择原则 {#selection-rule}

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