xyflow 核心架构概述 ​

xyflow 是 React Flow / Svelte Flow 的 monorepo：框架无关逻辑在 @xyflow/system，React 绑定在 @xyflow/react（包名随版本可能为 reactflow）。

1. 包分工 ​

为何拆 system：双框架复用、核心可单测、发布可独立版本。

2. React 侧组件层次（概念） ​

ReactFlow（props、Provider、样式）
  → Wrapper（创建 store、受控同步）
    → GraphView（节点/边/视口组合）
      → ZoomPane（viewport 变换）
        → Pane（画布事件）
          → Viewport
            → EdgeRenderer / NodeRenderer / ConnectionLine

各层只做一件事：数据在 store，变换在 viewport，绘制在 Renderer。

3. 核心数据 ​

4. 与 Zustand / React 的关系 ​

• 每个 ReactFlow 实例一个 store（ReactFlowProvider 隔离多实例）。
• 组件通过 selector 订阅片段；见 02-状态管理。

5. 阅读路径 ​

总结 ​

xyflow = system 算几何与交互 + React 层管状态与渲染；读源码先 packages/system 再 packages/react/src/store。