画布（Canvas）总览
VizChat 画布是一块基于 React Flow 的无限二维工作空间，用 widget 承载内容、用连线组织关系、用键盘和 AI 双手操作。
VizChat 的画布是一块无限二维工作空间，底层基于 @xyflow/react（React Flow v12）。你在这里把图表、表格、PDF、网页、信息图、MCP App、Widget 等内容 widget 自由摆放、缩放、连线，再配合左侧 AI 对话让 Agent 直接读写画布，而不是"帮你想办法然后让你自己去做"。
画布 UI 的四要素
| 元素 | 作用 | 在哪里 |
|---|---|---|
| Widget | 内容容器：图表、表格、PDF、HTML widget 等 | 画布主体 |
| 连线（Edge） | widget 之间的数据流 / 引用 / 顺序关系 | widget handle 之间 |
| 工具栏（Controls） | 缩放 / 适配 / 锁定 | 画布左下角（React Flow <Controls />） |
| 缩略图（MiniMap） | 鸟瞰当前可见区域 | 画布右下角（React Flow <MiniMap />） |
创建 widget 的 4 种方式
- AI 对话生成：在右侧对话里描述需求（"做一张 2024 Q4 营收柱状图"），Agent 会直接调用 canvas 工具把 widget 插到画布上。
- 斜杠命令：在对话输入框里输入
/唤出命令面板，快速创建常见 widget。 - Widget Marketplace：点击画布内的 Widget Marketplace 入口，安装社区或自己发布的 HTML Widget。
- 拖拽 / 复制粘贴：Cmd/Ctrl+C 和 Cmd/Ctrl+V 在画布之间复制 widget，连同 snapshot 一起带过去。
与 Notion / Tableau 的区别
- Notion：线性文档，无空间布局；VizChat 既能线性（文档模式）又能空间（画布模式）。
- Tableau：一张图一个 worksheet；VizChat 把多张图 + 说明文字 + 数据源表格放在一块画布上。
- Figma：面向设计师的矢量画布；VizChat 画布上的每个 widget 都是可交互的数据/内容单元，不是图像。
Next step
- Widget 类型总览 — 画布上能放哪些东西
- 连线与数据流 — widget 之间如何引用