图表与插图：解释机制的工作原理

图表展示了命名部分如何连接、它们之间传递什么以及这些关系产生什么结果。当读者需要同时理解多个关系时使用图表，同时将解释保留为文本形式。

页面如何变得可检索： 源页面经过提取和规范化处理后，其有用的段落到达答案索引。

1. 源页面提供HTML、标题、图片和结构化字段。
2. 提取和规范化去除呈现噪音，同时保留文本、层级结构、实体和关系。
3. 答案索引存储可检索的段落，以便与后续问题匹配。
4. 第一个箭头将页面表示带入处理过程；第二个箭头将规范化、可搜索的段落带入索引。

图示使流程一目了然。标题和编号说明在无图情况下承载相同含义。这种双通道契约将解释性图表与装饰性艺术作品区分开来。

为什么这个元素很重要

文字可能迫使读者在揭示关系之前记住多个部分。图表将这一模型外化：节点展示部分，连接线展示关系，边界展示范围。当仅靠顺序不足时，它最为有用。一句话可以说爬虫获取页面、解析器提取内容、索引存储段落；图表还可以展示故障点、并行路径和反馈。它减少了重构的努力，而非对精确措辞的需求。

图表也可能比文字更快地误导人。一个未标注的箭头可能意味着因果关系、传递、顺序或关联；一个循环可能错误地暗示自动反馈。每个关系都需要明确、可辩护的含义。

机器可提取性是指软件在不丢失含义的情况下隔离内容单元的能力。搜索系统、翻译工具、屏幕阅读器和AI检索系统不能期望从像素中重构机制。光学字符识别可以恢复标签，但不能恢复箭头或边界的含义。标题、说明文字、结构化的节点和连接线以及可见的文本等价描述使得无需计算机视觉即可提取机制。

共同的元素编写规则 设定了优先级规则：根据段落执行的任务选择元素，而不是根据其标题或外观。本页面在图表特定字段、密度限制、文本等价要求和无障碍行为方面具有优先权。如果内容的职务是视觉上解释机制，则使用图表元素，而不是使用带有临时说明的通用图片。

何时使用

当结论依赖于同时查看至少两个关系时使用图表。强适用场景包括带有分支或反馈的流程、组件交换数据的系统、返回到早期状态的生命周期、存在中介因素的因果链，或其边界很重要的概念模型。读者应能从图示中回答具体问题，例如"这个过程哪里可能失败？“或"哪个组件发送标准化记录？”

首先应用文字测试：用三到八句话描述机制。如果没有交叉引用、分支、循环或空间关系，文字可能更合适。当准确的文本等价描述在认知上难以构建时，图表值得占据空间。

常见误用情况：

• 使用步骤列表处理可执行操作；箭头不能替代前提条件、成功检查或恢复说明。
• 使用比较表格处理替代方案间的重复属性。未标注的两轴图隐藏了判断标准。
• 使用决策树处理由明确条件选择的路径。一般流程图说明移动，而非决策。
• 使用带注释的截图在实际界面中定位控件。重绘会丢失该证据。
• 使用图表处理定量尺度编码的值。装饰性的上升箭头不得暗示已测量的增长。
• 使用内嵌图片描绘对象、地点或结果，而非机制。

不要将图表用作装饰或重复的方框。在图片和文本中都标记假设性、争议性、条件性或简化性的关系。

放置位置

在介绍机制和问题的段落之后放置图表。后面跟随着可见的文本等价描述，然后是解释、证据、局限性或操作步骤。

将标题、图片、说明文字、图例和文本等价描述保持在一个图区域中。不得有任何内容将图片与其解释分开。将较长的等价描述直接放在其后面，标题为"文字说明"。

图表不得直接位于另一个全宽图表、柱状图、视频、图片库、密集表格或截图旁边。在下一个密集视觉内容之间插入解释性文字。不要将其放置在表格单元格、列表项、折叠面板、提示框、可点击卡片或图中。

对于操作流程，将概览放在第一个操作之前，而不是放在耦合的步骤之间。对于论证，将其放在机制主张之后和证据之前。在产品页面，将其放在功能解释之后，切勿仅仅为了看起来技术化而将其放在直接答案之上。

结构解析

结构解析描述的是含义，而非样式。框阴影、插画风格、箭头粗细、圆角和背景颜色属于渲染器或艺术指导范畴。

1. 标题： 用三到十个字命名机制或问题。
2. 范围说明： 用一句话定义图表包含、排除或简化了什么。
3. 节点： 表示一个组件、状态、参与者、输入或结果。
4. 节点标签： 使用具体的名词短语，而非未解释的缩写。
5. 连接线： 表示两个节点之间的一个声明关系。
6. 连接线标签： 用动词或传递对象命名该关系，如"发送事件"或"生成段落"。
7. 方向标记： 显示阅读或传递方向，不依赖位置判断。
8. 边界： 对共享所有权、阶段、环境或范围的项目进行分组。
9. 图例： 定义任何改变含义的线条样式、符号或颜色。
10. 说明文字： 陈述主要结论，而非重复标题。
11. 来源说明： 当模型来源于研究、政策或专有系统时，标识证据或所有者。
12. 文本等价描述： 按照可读顺序重述每个承载含义的节点、连接线、方向、条件、边界和例外情况。

设计变体

每个变体都需要标题、说明文字、文本等价描述和明确的连接线含义。选择能回答问题的最简单变体。

线性流程

当机制主要朝一个方向移动时，使用三到七个阶段。标注阶段之间传递的内容；不要仅依赖箭头。如果读者必须执行这些阶段，将概览与单独的步骤列表配对。

系统图

当所有权、接口或数据交换比时间顺序更重要时，使用三到九个组件。边界标识环境或团队；交叉线表示需要重新分组或拆分视图。

因果链

用于原因、中间机制和结果。标记条件和不确定性。箭头绝不能将相关性转变为因果性；文字和来源必须支持每个因果主张。

生命周期循环

仅在输出成为后续输入时使用循环。编号阶段并说明重启触发条件；装饰性圆圈会错误地暗示重复。

概览带局部放大

当一个组件需要细节但依赖系统上下文时，使用一个局部放大图。重复其标签。多于一个放大图通常需要单独的图表。

在移动设备上，按阅读顺序堆叠线性图表。系统图可以变为简化概览加编号关系。绝不允许通过水平滚动页面或缩放来获取含义。

参数

内容模型存储机制。坐标、颜色、字体大小、图标选择、连接线路径和响应式断点属于渲染器或源素材。

source对于外部研究、标准、受监管流程或改编模型是必需的。每个节点和连接线必须出现在文本等价描述中；文字可以合并重复内容。

语法和代码示例

三种映射保留相同的字段。示例资产路径描述生产契约；在文件实际存在之前，它们不得作为实时图片引用出现。

可移植Markdown指令

:::diagram{variant=process src="/cdn-assets/seo-playbook/examples/content-pipeline.svg" alt="从源页面到答案索引的三阶段流程：提取和规范化"}
## 页面如何变得可检索

该模型涵盖页面获取后的内容处理。

::item{id=source-pages}
### 源页面

提供HTML、标题、图片和结构化字段。
::
::item{id=extract-normalize}
### 提取和规范化

保留有用的文本、层级结构、实体和关系。
::
::item{id=answer-index}
### 答案索引

存储可与问题匹配的段落。
::
::relationship{from=source-pages to=extract-normalize label="发送页面表示" kind=flow}
::relationship{from=extract-normalize to=answer-index label="生成可检索段落" kind=flow}

规范化段落仅在保留有用结构后到达答案索引。

### 文字说明

源页面将其页面表示发送到提取和规范化阶段。该阶段保留有用的文本、层级结构、实体和关系，然后为答案索引生成可检索段落。
:::

第一个标题映射到title；下一个段落映射到scope；项指令定义节点；关系指令定义连接线；它们后面的段落映射到caption；文字说明部分映射到textEquivalent。

Hugo短代码映射

{{< diagram variant="process" src="/cdn-assets/seo-playbook/examples/content-pipeline.svg" alt="从源页面到答案索引的三阶段流程：提取和规范化" >}}
## 页面如何变得可检索
{{< diagram-node id="source-pages" label="源页面" >}}提供页面内容。{{< /diagram-node >}}
{{< diagram-node id="extract-normalize" label="提取和规范化" >}}保留有用结构。{{< /diagram-node >}}
{{< diagram-node id="answer-index" label="答案索引" >}}存储段落。{{< /diagram-node >}}
{{< diagram-relationship from="source-pages" to="extract-normalize" label="发送页面表示" kind="flow" >}}
{{< diagram-relationship from="extract-normalize" to="answer-index" label="生成可检索段落" kind="flow" >}}
### 文字说明
源页面发送内容进行提取和规范化，后者生成段落供答案索引使用。
{{< /diagram >}}

完全使用命名参数。这是一个可移植适配器规范，并非声称这些短代码已在当前主题中注册。在存在已批准的渲染器之前，通过已建立的图片管道发布语义图，并将其文本等价描述保留在普通页面内容中。

WordPress区块

<!-- wp:amicited/diagram {"variant":"process","src":"/cdn-assets/seo-playbook/examples/content-pipeline.svg","alt":"从源页面到答案索引的三阶段流程：提取和规范化"} -->
<figure>
  <h2>页面如何变得可检索</h2>
  <img src="/cdn-assets/seo-playbook/examples/content-pipeline.svg"
       alt="从源页面到答案索引的三阶段流程：提取和规范化">
  <figcaption>规范化段落仅在保留有用结构后到达答案索引。</figcaption>
  <div class="diagram-text-equivalent">
    <h3>文字说明</h3>
    <p>源页面发送内容进行提取和规范化，后者生成段落供答案索引使用。</p>
  </div>
</figure>
<!-- /wp:amicited/diagram -->

将节点和连接线存储为区块属性。导出必须保留它们和文本等价描述；扁平化图片不是可移植内容。

示例

好示例：图示和文字表达相同主张

好示例回答一个问题：提交的问题如何成为有支持的答案。四个具体节点遵循清晰的方向。连接线标签区分路由、检索和组合。虚线反馈路径在图例中定义为可选的人工审核，因此它不暗示自动循环。说明文字陈述结论，旁边的文本命名每个阶段和传递。

这为视觉读者提供了快速模型，同时文字承载相同的机制和限定条件。机器接收命名关系，而无需从坐标进行猜测。

坏示例：无明确含义的混乱图

坏示例将"AI"置于中心，周围环绕着模糊名词如内容、数据、用户、信任、收入和增长。未标注的箭头指向两个方向，但读者无法判断它们表示因果关系、交换、顺序还是关联。颜色看似有意义但没有图例。增长箭头暗示改进但没有数据。小标签在移动设备上无法阅读，也没有文字解释声称的机制。

修复方法：选择一个具体问题，移除无关节点，命名连接线，区分原因和关联，并添加范围、说明文字、文本等价描述和来源。如果只剩利益点，则列出清单即可。

Schema标记和无障碍

图表没有专用的Schema.org类型或独立的富结果资格。有意义的图表可以填充Article.image或ImageObject，并包含准确的URL、标题、尺寸、创建者、署名、版权和许可数据。不要发明元数据或关系词汇；节点和连接线保持为可见内容。

使用<figure>放置图片和说明文字。替代文本标识机制和结论，而非转录内容。目标为40–180字符，避免使用"某图表"这类表述。示例：“从源页面到答案索引的三阶段流程：提取和规范化。”

可见的文本等价描述包括每个有意义的节点、连接线、条件、反馈触发器、边界、图例和例外情况。不要将其隐藏在ARIA、悬停文本、元数据或折叠面板中。

将颜色、图标、图案、形状和位置与文本标签配对。保持对比度、可见箭头和与文本等价描述匹配的阅读顺序。真实的SVG文本很有用，但不能替代可见的文字。

在320 CSS像素宽度下，从相同数据堆叠、简化或渲染移动视图。绝不删除节点、裁剪连接线或改变阅读顺序。附近的文本必须在不缩放的情况下保留所有必要含义。

编写规则

先编写并验证文本，然后仅绘制其中包含的关系。这防止视觉美化引入新的主张。

• 给图表分配一个问题或机制。不要在一个画布上混搭架构、工作流、利益点和路线图。
• 使用3–9个主要节点，最多12个。将过载模型拆分为概览图和详细图。
• 用1–6个具体词语标注节点。在页面文字中首次使用时定义缩写，避免读者无法理解的内部团队名称。
• 用1–6个词的动词短语或传递对象标注每个承载含义的连接线。“发送事件"比"集成"更清晰。
• 说明文字保持在8–30个词，并陈述读者应记住的结论或关系。
• 范围说明保持一句话。当省略可能改变解读时，说明排除项或简化项。
• 文本等价描述保持在50–250个词，除非准确性需要更多。
• 使用解释性的中性语气。区分系统做什么、可能做什么、应该做什么或被假设做什么。
• 使用"可能”、“条件性"或"拟议"等词语标记不确定性，并在图例中定义虚线或点线路径。
• 切勿将段落、引用、原始URL、促销口号、精确证据或完整说明放入素材内。将它们放在可选择的页面文本中。
• 切勿使用无标签的图标、无第二线索的颜色或无声明含义的箭头。
• 切勿通过大小或方向暗示尺度、数量、因果强度、确定性或衡量的增长，除非证据和图例支持该编码。
• 切勿发布不存在的资产路径；将待定的素材保留为带有screenshotsPending = true的捕获注释。

使用该图表的文章类型

postTypes前置元数据是注册的连接点。每个列出的文章类型使用相同的图表契约，但门槛不同。

QA检查清单

• 目的： 一个机制或流程通过视觉比纯文字更容易理解。
• 文字优先： 审核过的解释先于素材存在；未添加无支持的关系。
• 范围： 标题和范围使边界、简化和排除项清晰明了。
• 节点： 通常为3–9个，每个都具体且必要。
• 连接线： 每条都有方向和标签；样式和颜色有图例。
• 主张： 因果性、自动化、规模、强度、确定性和增长仅在证据支持时才显示。
• 文本等价描述： 可见文本包括每个节点、关系、条件、边界、图例和例外情况。
• 说明文字： 在8–30个词内陈述结论。
• 无障碍： 颜色不是唯一线索；对比度、箭头、替代文本和阅读顺序正常运作。
• 移动端： 在320 CSS像素下无需页面级滚动或强制缩放，含义仍可理解。
• 放置： 介绍性上下文在图表之前；说明文字和文本等价描述保持附连；竞争性的密集视觉效果不紧邻放置。
• 来源： 研究、标准、受监管流程和改编模型有准确的可见来源或所有权说明。
• 可移植性： 所有映射保留标题、节点、连接线、说明文字和文本等价描述。
• 资产安全： 文件在发布实时路径前已存在、权利已记录，待定素材保持为SCREENSHOT注释。
• 优先级： 区块被类型化为图表，因为其目的匹配此元素，而不是因为通用图片恰好看起来相似。

常见问题

学院模板渲染存储在本页面[[faq]]前置元数据中的五个已审核问题。它们涵盖使用图表的门槛、强制性的文本等价描述、替代文本范围、结构化数据和节点限制。