docs: add graph layout optimization record to editor README

editor/README.md

@@ -112,3 +112,49 @@ interface Choice {
   timeLimit?: number      // 限时秒数，0=不限
 }
 ```
+
+## 图布局
+
+场景节点图使用 [dagre](https://github.com/dagrejs/dagre) 进行层级化自动布局。
+
+### 布局策略演进
+
+| 版本 | 方式 | 问题 |
+|------|------|------|
+| v1 | 网格排列 `(i % 4) * 220` | 不反映拓扑关系 |
+| v2 | BFS 层级分配 | 多父同子时边交叉严重 |
+| v3 (当前) | Dagre (Sugiyama 算法) | — |
+
+Dagre 自动处理：
+
+- **层内排序** — Barycenter 启发式最小化边交叉
+- **多父同子** — 插入虚拟节点，边不交织
+- **回边处理** — 循环引用自动反向路由
+- **间距优化** — 根据节点度自适应分布
+
+### 配置
+
+布局参数在 `editor/composables/useLayout.ts`：
+
+| 参数 | 值 | 说明 |
+|------|-----|------|
+| `rankdir` | `'LR'` | 左→右方向 |
+| `nodesep` | `50` | 同层节点垂直间距（px） |
+| `ranksep` | `240` | 层级间水平间距（px） |
+| `marginx` / `marginy` | `60` | 画布四周边距（px） |
+| `NODE_W` / `NODE_H` | `180 × 60` | 节点尺寸，用于居中偏移 |
+
+### 连线样式
+
+- 边类型：`SmoothStepEdge`（正交线，拐角带圆角），在 `SceneGraph.vue` 通过 `:default-edge-type="SmoothStepEdge"` 全局设置
+- 动画：已禁用
+- 回边：Dagre 自动路由，Vue Flow 渲染为从右往左的回线
+
+### 调参指南
+
+| 现象 | 调整 |
+|------|------|
+| 节点堆叠拥挤 | 增大 `nodesep` / `ranksep` |
+| 节点间距过大 | 减小 `ranksep` |
+| 边碰到画布边缘 | 增大 `marginx` / `marginy` |
+| 节点定位偏左/上 | 检查 `NODE_W` / `NODE_H` 是否匹配实际节点尺寸 |