- 分組
- 机制 · 讲清“它是怎么运转的”
- 元件
FlowDiagram·#flow-diagram- 互動
- 箭头先生长再持续流动；焦点环节使用强调色光环。
適合
- 解释一个系统或机制：数据怎么流、请求怎么处理
- 一个过程里有一步是听众能影响的，用 focus 和 band 指出来
不適合
- 听众要照着操作的步骤：用 StepTrack
- 有分支或循环的流程：拆成两页或画专门的图
內容上限
| 1 | nodes 3–5 个；title ≤ 8 字；body ≤ 30 字 |
| 2 | parts 每个环节最多 3 个，每个 ≤ 12 字 |
| 3 | focus 最多标 1 个环节 |
| 4 | band.items 3–4 项：title ≤ 6 字，body ≤ 14 字；label ≤ 10 字 |
| 5 | 示意图要在 lead 或 source 里写明“简化示意” |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
nodes · 必填 | { icon, title, body, parts?, focus? }[] | 流程环节 |
band | { label, items: { icon, title, body }[] } | 底部输入色带 |
範例程式碼
<FlowDiagram
kicker="AI 回答"
title="AI 怎样拼出一个回答"
lead="各助手只公开了流程的一部分，下图是简化示意。"
nodes={[
{ icon: 'user-speak', title: '顾客提问', body: '顾客用自然语言提出一个问题。' },
{ icon: 'branch', title: '拆成子查询', body: '改写成多个子查询，分别检索。' },
{ icon: 'database', title: '检索候选', body: '从三类来源找候选内容。', parts: ['搜索索引', '平台自家内容', '实时抓取'], focus: true },
{ icon: 'chat-quote', title: '附链接的回答', body: '挑选内容写成回答，附上来源。' },
]}
band={{ label: '你能影响的来源', items: [{ icon: 'home', title: '你的官网', body: '事实、价格、常见问题' }] }}
source="示例知识库 · 图示「AI 助手如何拼出一个回答」"
/>