> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ahaslides.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 使用 Diagram 幻灯片制作流程图

> 直接在演示文稿中制作流程图、组织结构图、时间线和数据图表，数据驱动的可视化内容实时更新，无需上传图片。

Diagram 幻灯片可让您直接在 AhaSlides 内构建并展示结构化的可视化图表，包括流程图、层级结构、图表、时间线、对比等。您无需粘贴静态截图，只需在右侧面板中以结构化的形式定义内容，图表就会自动生成，无需任何外部工具。

## Diagram 概览

| | |
| - | - |
| 类型 | 仅用于展示，无观众回应 |
| 位置 | **新幻灯片** (New slide)，然后在幻灯片类型选择器的 **内容** (Content) 标签页中选择 **Diagram** |
| 图表类型 | 七种：Relation、Hierarchy、Items、Chart、Word Cloud、Compare、Advanced |
| 流式动画 | 关闭（默认）、慢速、中速或快速 |

当您需要展示关系、流程、数据或结构，而不是一列文字或投票结果时，都可以使用 Diagram 幻灯片。该幻灯片支持七种图表类型：

* **流程图和网络图** — 展示各步骤或各系统之间如何连接。
* **组织结构图和决策树** — 构建带有嵌套层级的层级结构。
* **条形图、柱状图、折线图、饼图和环形图** — 展示带标签的数值数据。
* **时间线、路线图和金字塔图** — 排布有先后顺序或分层的项目。
* **对比** — SWOT 分析、象限图、二元对比。
* **词云** — 以权重决定大小来直观呈现词语。
* **自定义信息图** — 编写原始 AntV 语法以获得完全的控制权。

与使用静态图片的 Content 幻灯片不同，Diagram 幻灯片由数据驱动：您在面板中输入标签和数值，可视化内容就会实时更新。

## 创建 Diagram 幻灯片

<Frame>
  <img src="https://mintcdn.com/ahaslides/wJ1GvGkoLZ_3Etc-/images/diagram-add-slide.png?fit=max&auto=format&n=wJ1GvGkoLZ_3Etc-&q=85&s=094076075f4a480ae2c91dfc6ce33f53" alt="通过在幻灯片类型选择器中搜索找到的 AhaSlides Diagram 幻灯片类型" width="1920" height="1080" data-path="images/diagram-add-slide.png" />
</Frame>

<Steps>
  <Step title="添加幻灯片">
    在编辑器中，点击 **新幻灯片** (New slide)，然后从幻灯片类型选择器的 **内容** (Content) 标签页中选择 **Diagram**。
  </Step>

  <Step title="选择图表类型">
    在右侧面板中，打开 **Diagram type** 下拉菜单，选择适合您内容的类型。切换类型时，画布会预览该图表。
  </Step>

  <Step title="选择变体">
    打开 **Variant** 下拉菜单，选择图表的视觉布局方式。下拉菜单中会显示可视化预览，帮助您挑选。
  </Step>

  <Step title="填写您的内容">
    根据类型的不同：添加节点和连接（**Relation**），在根节点下嵌套子节点（**Hierarchy**），添加带有标签和描述的项目（**Items**），添加带有标签和数值的数据点（**Chart**），添加带有权重的词语（**Word Cloud**），添加分组及其项目（**Compare**），或直接输入 AntV 语法（**高级** (Advanced)）。
  </Step>

  <Step title="设置流式动画（可选）">
    使用 **Streaming animation** 控件，使图表在幻灯片首次出现时带有动画。选项有 **关闭** (Off)（默认）、**Slow**、**中型** (Medium) 和 **Fast**。
  </Step>

  <Step title="添加标题（可选）">
    在右侧面板顶部的 **Title** 字段中输入标题，下方还可添加一段简短的说明。
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/ahaslides/xRqJBlSTbY-PEvpk/images/diagram-choose-type.png?fit=max&auto=format&n=xRqJBlSTbY-PEvpk&q=85&s=f544cd177e9cf2da3986468854043943" alt="编辑器中的 AhaSlides Diagram 幻灯片，图表类型下拉菜单被高亮显示" width="1920" height="1080" data-path="images/diagram-choose-type.png" />
</Frame>

<Tip>
  * **从选对类型开始** — 之后切换类型会重置内容，因此请在填写项目之前选好类型。
  * **连接式流程用 Relation，树形结构用 Hierarchy** — 如果各项目具有严格的父子嵌套且没有交叉连接，Hierarchy 更易于管理。
  * **演示前先预览** — 点击编辑器顶部栏中的 **预览** (Preview)，查看图表在全屏下的显示效果。
  * **谨慎使用动画** — 流式动画最适合用于 Relation 和 Hierarchy 类型，可逐步揭示连接关系；对于内容密集的 Chart 或 Word Cloud，通常关闭动画会更清爽。
</Tip>

<Tip>
  编辑器工具栏中的 **改进** (Improve) AI 按钮同样适用于 Diagram 幻灯片：用自然语言描述您想要的流程或结构，让 AI 生成初始数据，再在面板中进一步完善。
</Tip>

<Note>
  AhaSlides MCP 的 `create_slides()` 工具目前不支持 Diagram 幻灯片。请在编辑器中手动添加 Diagram 幻灯片。
</Note>

## 演示 Diagram 幻灯片

在演示过程中进入 Diagram 幻灯片时，图表会铺满演示者屏幕上的幻灯片区域。在自己设备上观看的参与者会以只读格式看到同样的画面，Diagram 幻灯片不需要观众做出任何回应或互动。如果启用了流式动画，图表会在幻灯片首次出现时以动画方式呈现。

<Frame>
  <img src="https://mintcdn.com/ahaslides/TKkv83kp-W9KNutc/images/diagram-presenting.png?fit=max&auto=format&n=TKkv83kp-W9KNutc&q=85&s=83447271ec200d22ffc4b749cf574f08" alt="演示过程中的 AhaSlides Diagram 幻灯片，演示者屏幕上显示“开始—流程—结束”的流程" width="1600" height="1000" data-path="images/diagram-presenting.png" />
</Frame>

## 图表类型和变体

| 类型 | 说明 | 变体 |
| - | - | - |
| **Relation** | 由节点和边构成的流程/网络图。定义 **Nodes** 以及它们之间的 **Connections**，可选择添加连线标签。 | Flow (left → right), Flow (top → bottom), Flow LR (animated), Flow TB (animated), Circle (progress), Circle (icons), Network |
| **Hierarchy** | 带有嵌套子节点的树。定义一个根节点，并在其下嵌套子节点和孙节点。 | Radial tree, Tree (top → bottom), Tree (left → right), Tree (right → left), Tree (bottom → top), Tech-style tree |
| **Items** | 平铺列表或步骤序列。定义一个项目列表，每个项目带有标签和可选的说明。 | Pyramid, Horizontal arrows, Row (icon arrows), Vertical arrows, Grid, Grid (progress), Zigzag (down), Zigzag (up), Sector, Sector (half), Stairs, Timeline, Roadmap, Funnel, Circular, Steps, Snake steps, Pyramid (sequence) |
| **Chart** | 根据带标签的数值生成条形图、柱状图、折线图、饼图或环形图。定义带有 **Label** 和数值 **Value** 的项目。 | Bar, Column, Line, Pie, Donut |
| **Word Cloud** | 词语大小由权重决定。定义一个词语列表，每个词语带有数值 **Weight**（最小为 1）。 | Standard |
| **Compare** | 并排对比。定义多个分组，每个分组带有标签和可选的项目。默认模板为 SWOT 分析。 | Quadrant (cards)，以及其他二元和层级变体 |
| **高级** (Advanced) | 直接手写原始 AntV 信息图标记，没有 Variant 下拉菜单。 | — |

<Note>
  Word Cloud 图表类型生成的是由您自行配置的静态加权词云，它不同于参与者提交实时回应的交互式 [Word Cloud 幻灯片](/cn/using-slide-types/using-the-word-cloud-slide)。
</Note>

## Diagram 幻灯片与 Content 幻灯片对比

| | Diagram 幻灯片 | Content 幻灯片 |
| - | - | - |
| 来源 | 在右侧面板中输入的数据 | 上传的静态图片 |
| 可在编辑器中编辑 | 是，可更改标签和数值 | 否（需重新上传才能更改） |
| 最适合 | 流程、树形结构、图表、时间线、SWOT | 照片、截图、信息图 |
| 自动布局 | 是，变体会自动控制布局 | 否 |
| 参与者互动 | 无（仅用于展示） | 无（仅用于展示） |

**有疑问？**

请联系我们的支持团队：如果您已登录，请使用控制面板右下角的聊天图标；如果尚未登录，请[在此联系我们](https://ahaslides.com/contact-us/)，或发送邮件至 [hi@ahaslides.com](mailto:hi@ahaslides.com)。

想与其他用户交流？欢迎加入 [AhaSlides 社区](https://community.ahaslides.com/)，分享使用技巧、提出功能建议，了解其他人如何与观众互动。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.