@fectivnfy112358/minimax-code-web 0.1.0-preview.0 → 0.1.0-preview.3

package/server/assets/skills/lark-tools/cli-skills/lark-whiteboard-cli/scenes/line-chart.md

@@ -0,0 +1,208 @@
+# 折线图
+
+## Content 约束
+
+- 数据点 ≤ 15
+- Y 轴必须有单位标注（如 "万元"、"%"）
+- 折线系列 ≤ 3（超过太密看不清）
+
+## Layout 选型
+
+- **脚本生成坐标**（推荐）：用 .js 脚本计算数据点坐标和折线路径，脚本输出 JSON 文件后调用 `npx -y @larksuite/whiteboard-cli@^0.2.0` 渲染
+
+## Layout 规则
+
+- 白板坐标系 Y 轴向下为正，图表"底部原点"拥有最大 Y 值，数据点向上分布时 Y 减小
+- 数据点用小 ellipse 标记（width: 12, height: 12）
+- 折线用 connector straight 连接相邻数据点，endArrow: "none"
+- 坐标轴用 connector 直线，末端带箭头（endArrow: "arrow"）
+- 格线用虚线 connector（lineStyle: "dashed"，endArrow: "none"）
+- 刻度线短横线 connector（endArrow: "none"）
+- 数值标注放在数据点上方
+- 类别标签放在 X 轴下方，居中对齐数据点
+
+## 坐标与尺寸计算指南
+
+白板坐标系中，**X 轴向右为正，Y 轴向下为正**。图表的"底部原点"拥有最大的 Y 坐标，数据点向上分布时 Y 坐标减小。
+
+1. **确定图表区域**：
+   - 设定图表区高度 `chartHeight` 和宽度 `chartWidth`
+   - 设定左下角坐标原点 `(originX, originY)`
+   - 示例：originX=80, originY=480, chartWidth=900, chartHeight=400
+2. **Y 轴范围自适应**：
+   - 找出数据最小值 `dataMin` 和最大值 `dataMax`
+   - yMin 不一定为 0：若数据集中在 80-120，Y 轴从 0 开始会让折线挤在顶部一小段区域
+   - 推荐：yMin = 向下取整到合适刻度（如 dataMin=82 → yMin=80），yMax = 向上取整（如 dataMax=118 → yMax=120）
+   - 当数据波动极小时（如 98-102），适当扩大范围避免折线过于平坦
+3. **数据点坐标计算**：
+   - X 坐标：在可用宽度内均匀分布。`pointX = originX + (i / (pointCount - 1)) * chartWidth`
+   - Y 坐标：按比例映射到高度。`pointY = originY - ((value - yMin) / (yMax - yMin)) * chartHeight`
+   - ellipse 定位：`ellipseX = pointX - 6, ellipseY = pointY - 6`（圆心对齐数据点）
+4. **连线逻辑**：
+   - 用 connector straight 将相邻数据点连接
+   - `from` = 点[i] 的 (pointX, pointY)，`to` = 点[i+1] 的 (pointX, pointY)
+   - startArrow: "none", endArrow: "none"
+5. **Y 轴刻度计算**：
+   - 将 yMin 到 yMax 等分为 4-5 个刻度
+   - 每个刻度的 Y 坐标：`gridY = originY - ((tickValue - yMin) / (yMax - yMin)) * chartHeight`
+
+## 完整 JSON 示例
+
+以下示例：4 个数据点，数据 [120, 200, 150, 180]，yMin=100, yMax=220，originX=80, originY=480, chartWidth=900, chartHeight=400。
+
+- 刻度：100, 130, 160, 190, 220（每 30 一格）
+- 点0 (120): pointX=80, pointY=480-((120-100)/120)*400=480-66.7=413
+- 点1 (200): pointX=80+300=380, pointY=480-((200-100)/120)*400=480-333.3=147
+- 点2 (150): pointX=80+600=680, pointY=480-((150-100)/120)*400=480-166.7=313
+- 点3 (180): pointX=80+900=980, pointY=480-((180-100)/120)*400=480-266.7=213
+
+```json
+{
+  "version": 2,
+  "nodes": [
+    { "type": "rect", "x": 0, "y": 0, "width": 1100, "height": 580 },
+
+    { "type": "text", "x": 80, "y": 10, "width": 900, "height": "fit-content",
+      "text": "季度销售额趋势", "fontSize": 24, "textAlign": "center" },
+
+    { "type": "text", "x": 10, "y": 40, "width": 60, "height": "fit-content",
+      "text": "万元", "fontSize": 12, "textAlign": "center" },
+
+    { "type": "connector", "connector": {
+      "from": { "x": 80, "y": 480 }, "to": { "x": 80, "y": 55 },
+      "lineShape": "straight", "lineWidth": 2, "endArrow": "arrow"
+    }},
+    { "type": "connector", "connector": {
+      "from": { "x": 80, "y": 480 }, "to": { "x": 1000, "y": 480 },
+      "lineShape": "straight", "lineWidth": 2, "endArrow": "arrow"
+    }},
+
+    { "type": "connector", "connector": {
+      "from": { "x": 70, "y": 480 }, "to": { "x": 80, "y": 480 },
+      "lineShape": "straight", "lineWidth": 1,
+      "startArrow": "none", "endArrow": "none"
+    }},
+    { "type": "text", "x": 20, "y": 470, "width": 50, "height": 20,
+      "text": "100", "fontSize": 12, "textAlign": "right" },
+
+    { "type": "connector", "connector": {
+      "from": { "x": 70, "y": 380 }, "to": { "x": 80, "y": 380 },
+      "lineShape": "straight", "lineWidth": 1,
+      "startArrow": "none", "endArrow": "none"
+    }},
+    { "type": "text", "x": 20, "y": 370, "width": 50, "height": 20,
+      "text": "130", "fontSize": 12, "textAlign": "right" },
+    { "type": "connector", "connector": {
+      "from": { "x": 80, "y": 380 }, "to": { "x": 980, "y": 380 },
+      "lineShape": "straight", "lineWidth": 1, "lineStyle": "dashed",
+      "startArrow": "none", "endArrow": "none"
+    }},
+
+    { "type": "connector", "connector": {
+      "from": { "x": 70, "y": 280 }, "to": { "x": 80, "y": 280 },
+      "lineShape": "straight", "lineWidth": 1,
+      "startArrow": "none", "endArrow": "none"
+    }},
+    { "type": "text", "x": 20, "y": 270, "width": 50, "height": 20,
+      "text": "160", "fontSize": 12, "textAlign": "right" },
+    { "type": "connector", "connector": {
+      "from": { "x": 80, "y": 280 }, "to": { "x": 980, "y": 280 },
+      "lineShape": "straight", "lineWidth": 1, "lineStyle": "dashed",
+      "startArrow": "none", "endArrow": "none"
+    }},
+
+    { "type": "connector", "connector": {
+      "from": { "x": 70, "y": 180 }, "to": { "x": 80, "y": 180 },
+      "lineShape": "straight", "lineWidth": 1,
+      "startArrow": "none", "endArrow": "none"
+    }},
+    { "type": "text", "x": 20, "y": 170, "width": 50, "height": 20,
+      "text": "190", "fontSize": 12, "textAlign": "right" },
+    { "type": "connector", "connector": {
+      "from": { "x": 80, "y": 180 }, "to": { "x": 980, "y": 180 },
+      "lineShape": "straight", "lineWidth": 1, "lineStyle": "dashed",
+      "startArrow": "none", "endArrow": "none"
+    }},
+
+    { "type": "connector", "connector": {
+      "from": { "x": 70, "y": 80 }, "to": { "x": 80, "y": 80 },
+      "lineShape": "straight", "lineWidth": 1,
+      "startArrow": "none", "endArrow": "none"
+    }},
+    { "type": "text", "x": 20, "y": 70, "width": 50, "height": 20,
+      "text": "220", "fontSize": 12, "textAlign": "right" },
+    { "type": "connector", "connector": {
+      "from": { "x": 80, "y": 80 }, "to": { "x": 980, "y": 80 },
+      "lineShape": "straight", "lineWidth": 1, "lineStyle": "dashed",
+      "startArrow": "none", "endArrow": "none"
+    }},
+
+    { "type": "connector", "connector": {
+      "from": { "x": 80, "y": 413 }, "to": { "x": 380, "y": 147 },
+      "lineShape": "straight", "lineWidth": 3,
+      "startArrow": "none", "endArrow": "none"
+    }},
+    { "type": "connector", "connector": {
+      "from": { "x": 380, "y": 147 }, "to": { "x": 680, "y": 313 },
+      "lineShape": "straight", "lineWidth": 3,
+      "startArrow": "none", "endArrow": "none"
+    }},
+    { "type": "connector", "connector": {
+      "from": { "x": 680, "y": 313 }, "to": { "x": 980, "y": 213 },
+      "lineShape": "straight", "lineWidth": 3,
+      "startArrow": "none", "endArrow": "none"
+    }},
+
+    { "type": "ellipse", "id": "pt-0", "x": 74, "y": 407,
+      "width": 12, "height": 12 },
+    { "type": "text", "x": 55, "y": 383,
+      "width": 50, "height": 20,
+      "text": "120", "fontSize": 14, "textAlign": "center" },
+    { "type": "text", "x": 50, "y": 490,
+      "width": 60, "height": 30,
+      "text": "Q1", "fontSize": 14, "textAlign": "center" },
+
+    { "type": "ellipse", "id": "pt-1", "x": 374, "y": 141,
+      "width": 12, "height": 12 },
+    { "type": "text", "x": 355, "y": 117,
+      "width": 50, "height": 20,
+      "text": "200", "fontSize": 14, "textAlign": "center" },
+    { "type": "text", "x": 350, "y": 490,
+      "width": 60, "height": 30,
+      "text": "Q2", "fontSize": 14, "textAlign": "center" },
+
+    { "type": "ellipse", "id": "pt-2", "x": 674, "y": 307,
+      "width": 12, "height": 12 },
+    { "type": "text", "x": 655, "y": 283,
+      "width": 50, "height": 20,
+      "text": "150", "fontSize": 14, "textAlign": "center" },
+    { "type": "text", "x": 650, "y": 490,
+      "width": 60, "height": 30,
+      "text": "Q3", "fontSize": 14, "textAlign": "center" },
+
+    { "type": "ellipse", "id": "pt-3", "x": 974, "y": 207,
+      "width": 12, "height": 12 },
+    { "type": "text", "x": 955, "y": 183,
+      "width": 50, "height": 20,
+      "text": "180", "fontSize": 14, "textAlign": "center" },
+    { "type": "text", "x": 950, "y": 490,
+      "width": 60, "height": 30,
+      "text": "Q4", "fontSize": 14, "textAlign": "center" }
+  ]
+}
+```
+
+坐标推导验证：
+- 点0 (Q1, 120): pointX = 80 + (0/3)*900 = 80, pointY = 480 - ((120-100)/120)*400 = 413
+- 点1 (Q2, 200): pointX = 80 + (1/3)*900 = 380, pointY = 480 - ((200-100)/120)*400 = 147
+- 点2 (Q3, 150): pointX = 80 + (2/3)*900 = 680, pointY = 480 - ((150-100)/120)*400 = 313
+- 点3 (Q4, 180): pointX = 80 + (3/3)*900 = 980, pointY = 480 - ((180-100)/120)*400 = 213
+- ellipse 定位：ellipseX = pointX - 6, ellipseY = pointY - 6
+
+## 陷阱
+
+- Y 轴范围不合理：若数据集中在 80-120，Y 轴从 0 到 120 会让折线挤在顶部一小段区域，应设 yMin 接近数据最小值
+- 缺 Y 轴单位标注，读者无法理解数值含义
+- 数据点太密时标注互相遮挡（超过 10 个点考虑隔一个标注一次）
+- 折线段忘记设 endArrow: "none"，默认带箭头
+- 多系列时折线颜色相近难以区分，应使用对比度高的不同色系

package/server/assets/skills/lark-tools/cli-skills/lark-whiteboard-cli/scenes/mermaid.md

@@ -0,0 +1,136 @@
+# Mermaid 图表路径
+
+本场景与 DSL 路径互斥。
+
+| | DSL 路径 | Mermaid 路径 |
+|---|---|---|
+| 中间格式 | JSON（WBDocument） | Mermaid 文本（.mmd 文件） |
+| 布局控制 | 精确控制（x/y 坐标、Flex） | 由 parser-kit 自动布局 |
+| 视觉定制 | 完全可控（颜色、字号、圆角等） | 有限（Mermaid 语法） |
+| 参考模块 | references/ + 对应 scene | 仅本文件 |
+
+## 适用条件
+
+满足以下任一条件时使用：
+- 用户明确要求 "用 Mermaid" 或 "输出 Mermaid"
+- 用户直接粘贴了 Mermaid 语法文本
+- 图表类型为思维导图、时序图、类图、饼图（自动路由）
+
+## CLI 用法
+
+```bash
+npx -y @larksuite/whiteboard-cli@^0.2.0 -i ./diagrams/{name}.mmd -o ./diagrams/{name}.png
+```
+
+## 思维导图 (Mindmap)
+
+```mermaid
+mindmap
+  root((主题))
+    分支A
+      子项A1
+      子项A2
+    分支B
+      子项B1
+    分支C
+```
+
+## 时序图 (Sequence Diagram)
+
+```mermaid
+sequenceDiagram
+    participant A as 浏览器
+    participant B as 服务器
+    participant C as 数据库
+    A->>B: 请求数据
+    B->>C: 查询
+    C-->>B: 返回结果
+    B-->>A: 响应数据
+```
+
+消息类型：
+- `->>` 实线箭头（同步请求）
+- `-->>` 虚线箭头（响应/异步）
+- `-x` 带 x 箭头（失败）
+
+## 类图 (Class Diagram)
+
+```mermaid
+classDiagram
+    class Animal {
+        +String name
+        +int age
+        +makeSound()
+    }
+    class Dog {
+        +fetch()
+    }
+    Animal <|-- Dog
+```
+
+## 饼图 (Pie Chart)
+
+```mermaid
+pie title 分布
+    "类别A" : 40
+    "类别B" : 30
+    "类别C" : 20
+    "类别D" : 10
+```
+
+## 流程图 (Flowchart)
+
+> [!WARNING]
+> **流程图不推荐使用 Mermaid 路径！**
+> 带复杂分支、复合节点、高保真卡片样式的流程图应优先走 **DSL 路径**（参见 `scenes/flowchart.md`）。只有用户明确给出 Mermaid 代码，或场景本身就是极简文字流程时，才走此路径。
+
+适用于：极简的文字节点判断业务流。
+
+```mermaid
+flowchart TD
+    A([开始]) --> B{条件判断}
+    B -->|是| C[处理步骤]
+    B -->|否| D[另一步骤]
+    C --> E([结束])
+    D --> E
+```
+
+### 约束与规范
+
+- **节点文字 ≤ 8 字**（超过必须缩写，必要时加图例说明）
+- 判断节点（菱形）只写条件关键词，不写长描述
+- 步骤数 ≤ 12（超过需合并步骤或拆分为子流程）
+- 遵循标准流程图符号：开始/结束用体育场形状或圆形 `A([开始])`，判断用菱形 `B{判断}`，步骤用矩形 `C[步骤]`
+
+### 语法参考
+
+方向：`TD`（上到下）、`LR`（左到右）、`BT`（下到上）、`RL`（右到左）
+
+节点形状：`A[矩形]`、`A(圆角)`、`A{菱形}`、`A((圆形))`、`A([体育场])`、`A[[子程序]]`
+
+连线：`-->`（实线）、`-.->`（虚线）、`==>`（粗线）、`-->|标签|`（带标签）
+
+## State Diagram
+
+```mermaid
+stateDiagram-v2
+    [*] --> Idle
+    Idle --> Processing : 收到请求
+    Processing --> Success : 处理成功
+    Processing --> Failed : 处理失败
+    Success --> [*]
+    Failed --> Idle : 重试
+```
+
+## 其他支持的图表类型
+
+- **甘特图**：`gantt`
+- **ER 图**：`erDiagram`
+- **Git 分支图**：`gitGraph`
+
+## 注意事项
+
+- 输出纯 Mermaid 文本，不是 JSON，不要混用 DSL
+- 节点文字含特殊字符时用双引号包裹：`A["包含(括号)的文字"]`
+- `subgraph` 用于逻辑分组
+- Mermaid 的流程图样式较基础，也无法在节点内部嵌套复杂排版；复杂流程优先走 DSL（见 `scenes/flowchart.md`），极简文字流程或用户显式给 Mermaid 代码时再使用 Mermaid。

package/server/assets/skills/lark-tools/cli-skills/lark-whiteboard-cli/scenes/milestone.md

@@ -0,0 +1,139 @@
+# 里程碑时间线 (Milestone)
+
+## Content 约束
+
+- 节点 4-8 个
+- 每节点：标题 + 日期 + 可选描述
+- 时间从左到右递增
+
+## Layout 选型
+
+两种方案按需选择：
+
+1. **横向时间线**：horizontal frame，节点等分
+2. **交替上下**：绝对定位，节点交替在时间轴上下方（节点多时更紧凑）
+
+## 结构特征
+
+- **标题居中**：顶部放置图表标题
+- **年份/时间轴条**：箭头形色块承载年份，按时间从左到右递增
+- **里程碑卡片**：下方虚线圆角卡片承载标题与描述
+- **严格对齐**：年份条与对应卡片等宽，左右对齐
+- **文字层级**：标题加粗在上，描述文字更小更浅在下，居中对齐
+
+## Layout 规则
+
+- 绝对定位为主（`layout: "none"`），节点位置承载时间序列含义
+- 先确定里程碑数量，计算等距的 x 坐标序列
+- 时间轴用 connector 贯穿所有节点
+- 节点与时间轴用短竖线连接
+- 节点间水平间距一致
+- 年份条宽度 = 卡片宽度，垂直间距统一
+- 标题与年份区域保留足够留白
+
+## 骨架示例
+
+```json
+{
+  "version": 2,
+  "nodes": [
+    {
+      "type": "frame",
+      "x": 0, "y": 0,
+      "width": 1200, "height": 360,
+      "layout": "none",
+      "children": [
+        {
+          "type": "text",
+          "x": 300, "y": 12,
+          "width": 600, "height": "fit-content",
+          "text": [{ "content": "{{CHART_TITLE}}", "bold": true, "fontSize": 24 }],
+          "textAlign": "center"
+        },
+
+        {
+          "type": "svg",
+          "x": 50, "y": 56,
+          "width": 190, "height": 36,
+          "svg": {
+            "code": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 190 36\"><polygon points=\"0,0 170,0 190,18 170,36 0,36\"/></svg>"
+          }
+        },
+        {
+          "type": "text",
+          "x": 50, "y": 64,
+          "width": 190, "height": "fit-content",
+          "text": "{{DATE_1}}",
+          "textAlign": "center"
+        },
+        {
+          "type": "rect",
+          "x": 50, "y": 132,
+          "width": 190, "height": 120,
+          "borderDash": "dashed",
+          "borderRadius": 8
+        },
+        {
+          "type": "text",
+          "x": 50, "y": 150,
+          "width": 190, "height": "fit-content",
+          "text": [{ "content": "{{MILESTONE_1_TITLE}}", "bold": true, "fontSize": 16 }],
+          "textAlign": "center"
+        },
+        {
+          "type": "text",
+          "x": 50, "y": 180,
+          "width": 190, "height": "fit-content",
+          "text": "{{MILESTONE_1_DESC}}",
+          "fontSize": 13,
+          "textAlign": "center"
+        },
+
+        {
+          "type": "svg",
+          "x": 290, "y": 56,
+          "width": 190, "height": 36,
+          "svg": {
+            "code": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 190 36\"><polygon points=\"0,0 170,0 190,18 170,36 0,36\"/></svg>"
+          }
+        },
+        {
+          "type": "text",
+          "x": 290, "y": 64,
+          "width": 190, "height": "fit-content",
+          "text": "{{DATE_2}}",
+          "textAlign": "center"
+        },
+        {
+          "type": "rect",
+          "x": 290, "y": 132,
+          "width": 190, "height": 120,
+          "borderDash": "dashed",
+          "borderRadius": 8
+        },
+        {
+          "type": "text",
+          "x": 290, "y": 150,
+          "width": 190, "height": "fit-content",
+          "text": [{ "content": "{{MILESTONE_2_TITLE}}", "bold": true, "fontSize": 16 }],
+          "textAlign": "center"
+        },
+        {
+          "type": "text",
+          "x": 290, "y": 180,
+          "width": 190, "height": "fit-content",
+          "text": "{{MILESTONE_2_DESC}}",
+          "fontSize": 13,
+          "textAlign": "center"
+        }
+      ]
+    }
+  ]
+}
+```
+
+## 陷阱
+
+- **节点太多时太拥挤**：超过 6 个节点时考虑交替上下布局或增大画布宽度
+- **右侧节点与时间轴末端重叠**：最后一个节点的 x + width 不要超出画布边界
+- **年份条与卡片不对齐**：年份条和卡片的 x、width 必须完全一致

package/server/assets/skills/lark-tools/cli-skills/lark-whiteboard-cli/scenes/organization.md

@@ -0,0 +1,175 @@
+# 组织架构图
+
+适用于：公司组织架构、模块依赖树、分类层级树等树形层级结构的场景。
+
+## Content 约束
+
+- 层级 ≤ 4
+- 每个父节点下 ≤ 5 个子节点
+- 叶节点有意义（不要只为凑数添加空节点）
+- 长文本用 `\n` 手动换行（如"研发负责人\n(CTO)"）
+
+## Layout 选型
+
+| 模式 | 适用条件 | 特征 |
+|------|---------|------|
+| **tree（居中展开）** | 有明确从属关系的层级结构 | 根节点居中，子节点横向排列，逐层展开。每个"父+子"用 vertical frame 包裹（子树模块） |
+| **grid（矩阵式）** | 多部门平级，每部门内部有细分 | 横向等分各部门，每部门内部 vertical 列表 |
+
+## Layout 规则
+
+以下规则违反会导致连线错乱或排版崩溃：
+
+1. **子树包裹模式（关键）**：每个父节点和它的子节点群用一个 `layout: "vertical"` + `alignItems: "center"` 的 frame 包裹。**不要**把所有父节点放一层、所有子节点放另一层。*违反后果：父节点与子节点群中心偏移，正交连线无法合并，分裂成两条平行线。*
+2. **同层节点建议等高**：同层节点统一 `height`（如 60-70），保证连线横向主轴平直。如果文字长度差异大可用 `fit-content`，但要确保同层文字行数接近。*违反后果：同层节点高低不平，rightAngle 连线横向弯折错乱。*
+3. **垂直间距 >= 60**：父子间纵向 `gap: 60`。*违反后果：连线引擎没有足够空间折弯与合并，导致连线穿模或提前分叉。*
+4. **叶子容器偶数宽度**：包含叶子节点的横向 frame，宽度应手动计算（子节点宽度之和 + gap × (n-1)），如 2 个 120px 节点 + 20px gap = `width: 260`。或用 `fill-container` 自动等分。*违反后果：父节点中心与子节点群中心有像素级偏差。*
+5. **同层兄弟间横向 gap: 20-40**
+6. 最小字号 14px
+7. 连线：所有父子连线必须 `lineShape: "rightAngle"`（总线风格），`fromAnchor: "bottom"`, `toAnchor: "top"`。*违反后果：失去组织架构图专属的总线视觉效果。*
+8. 根 frame 宽度要足够（如 1200-1600），避免叶节点被挤压重叠
+9. 不同层级在 fontSize、borderWidth、颜色上递进区分（如 Root 深灰 → L1 浅蓝 → L2 浅绿 → L3 浅紫）
+10. 长文本用 `\n` 主动换行（如 "基础架构部\n(包含云原生)"），确保节点高度足够容纳
+
+## 骨架示例
+
+### 树形展开（子树包裹模式）
+
+```json
+{
+  "version": 2,
+  "nodes": [
+    {
+      "type": "frame",
+      "width": 1200,
+      "height": "fit-content",
+      "layout": "vertical",
+      "gap": 48,
+      "padding": 40,
+      "alignItems": "center",
+      "children": [
+        {
+          "type": "text",
+          "id": "title",
+          "width": "fill-container",
+          "height": "fit-content",
+          "text": "[图表标题]",
+          "fontSize": 24,
+          "textAlign": "center",
+          "verticalAlign": "middle"
+        },
+        {
+          "type": "rect",
+          "id": "root-node",
+          "width": 240,
+          "height": "fit-content",
+          "borderWidth": 3,
+          "borderRadius": 8,
+          "text": "[根节点名]",
+          "fontSize": 18,
+          "padding": 12
+        },
+        {
+          "type": "frame",
+          "width": "fill-container",
+          "height": "fit-content",
+          "layout": "horizontal",
+          "gap": 40,
+          "padding": 0,
+          "alignItems": "stretch",
+          "children": [
+            {
+              "type": "frame",
+              "width": "fill-container",
+              "height": "fit-content",
+              "layout": "vertical",
+              "gap": 48,
+              "padding": 0,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "rect",
+                  "id": "child-a",
+                  "width": 200,
+                  "height": "fit-content",
+                  "borderWidth": 2,
+                  "borderRadius": 8,
+                  "text": "[子节点名]",
+                  "fontSize": 16,
+                  "padding": 10
+                },
+                {
+                  "type": "frame",
+                  "width": "fill-container",
+                  "height": "fit-content",
+                  "layout": "horizontal",
+                  "gap": 40,
+                  "padding": 0,
+                  "alignItems": "stretch",
+                  "children": [
+                    { "type": "rect", "id": "leaf-a1", "width": "fill-container", "height": "fit-content", "borderWidth": 1, "borderRadius": 8, "text": "[叶节点名]", "fontSize": 14, "padding": 8 },
+                    { "type": "rect", "id": "leaf-a2", "width": "fill-container", "height": "fit-content", "borderWidth": 1, "borderRadius": 8, "text": "[叶节点名]", "fontSize": 14, "padding": 8 }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "frame",
+              "width": "fill-container",
+              "height": "fit-content",
+              "layout": "vertical",
+              "gap": 48,
+              "padding": 0,
+              "alignItems": "center",
+              "children": [
+                {
+                  "type": "rect",
+                  "id": "child-b",
+                  "width": 200,
+                  "height": "fit-content",
+                  "borderWidth": 2,
+                  "borderRadius": 8,
+                  "text": "[子节点名]",
+                  "fontSize": 16,
+                  "padding": 10
+                },
+                {
+                  "type": "frame",
+                  "width": "fill-container",
+                  "height": "fit-content",
+                  "layout": "horizontal",
+                  "gap": 40,
+                  "padding": 0,
+                  "alignItems": "stretch",
+                  "children": [
+                    { "type": "rect", "id": "leaf-b1", "width": "fill-container", "height": "fit-content", "borderWidth": 1, "borderRadius": 8, "text": "[叶节点名]", "fontSize": 14, "padding": 8 },
+                    { "type": "rect", "id": "leaf-b2", "width": "fill-container", "height": "fit-content", "borderWidth": 1, "borderRadius": 8, "text": "[叶节点名]", "fontSize": 14, "padding": 8 }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    { "type": "connector", "connector": { "from": "root-node", "to": "child-a", "fromAnchor": "bottom", "toAnchor": "top", "lineShape": "rightAngle", "lineWidth": 2 } },
+    { "type": "connector", "connector": { "from": "root-node", "to": "child-b", "fromAnchor": "bottom", "toAnchor": "top", "lineShape": "rightAngle", "lineWidth": 2 } },
+    { "type": "connector", "connector": { "from": "child-a", "to": "leaf-a1", "fromAnchor": "bottom", "toAnchor": "top", "lineShape": "rightAngle", "lineWidth": 2 } },
+    { "type": "connector", "connector": { "from": "child-a", "to": "leaf-a2", "fromAnchor": "bottom", "toAnchor": "top", "lineShape": "rightAngle", "lineWidth": 2 } },
+    { "type": "connector", "connector": { "from": "child-b", "to": "leaf-b1", "fromAnchor": "bottom", "toAnchor": "top", "lineShape": "rightAngle", "lineWidth": 2 } },
+    { "type": "connector", "connector": { "from": "child-b", "to": "leaf-b2", "fromAnchor": "bottom", "toAnchor": "top", "lineShape": "rightAngle", "lineWidth": 2 } }
+  ]
+};
+
+fs.writeFileSync('diagram.json', JSON.stringify(doc, null, 2));
+```
+
+## 陷阱
+
+- **分离父子层级（致命错误）**：不要把所有同级父节点放一个 horizontal frame、所有子节点放另一个。必须用 `alignItems: "center"` 的 vertical frame 把每个父节点和它的子节点包裹在一起。
+- **同层节点高低不平**：同层节点高度应一致（或文字行数接近），否则 rightAngle 连线横向弯折错乱。
+- **垂直间距不足**：父子间 gap 必须 >= 60。不够时连线引擎无法折弯合并。也不要用 80，3-4 层会纵向拉伸过度。
+- **做成线性链而非树形展开**：每个父节点的子节点必须横向展开，不要做单链。
+- **连线混用 straight**：所有父子连线必须 `lineShape: "rightAngle"`，`fromAnchor: "bottom"`，`toAnchor: "top"`。
+- **叶节点字号 12px 看不清**：最小字号 14px。
+- **所有节点同一大小和样式**：不同层级必须在 fontSize、borderWidth、颜色上有区分（根>子>叶）。