@yandy0725/pi-lark 0.1.0

package/skills/lark-whiteboard/scenes/flywheel.md

@@ -0,0 +1,195 @@
+# 增长飞轮图 (Flywheel)
+
+> **必须写脚本生成 JSON。** 飞轮图需要极坐标计算阶段标签位置和 SVG 圆环切割，直接手写 JSON 无法正确实现同心圆环结构。请用下方脚本模板。
+
+## Content 约束
+
+- 阶段 4-6 个，每阶段短标签（title + 可选 subtitle/desc）
+- 中心放置飞轮主题标题
+
+## Layout 选型
+
+- **脚本生成坐标**（必须）：用 .cjs 脚本极坐标计算阶段标签位置、SVG 圆环切割，脚本输出 JSON 文件后调用 `npx -y @larksuite/whiteboard-cli@^0.2.12` 渲染
+
+## Layout 规则
+
+- 同心圆遮挡法构建圆环：大圆（底色）+ 小圆（白色遮罩）+ 中心文字
+- nodes 数组顺序决定 z-index：先大圆 -> 小圆 -> 中心文字 -> SVG 切割 -> 外围卡片
+- 阶段标签均匀分布在圆环外围，每个标签到圆心距离相等
+- SVG polyline 切割圆环形成分段 + 箭头方向感
+- 阶段数多时需动态放大半径、缩小箭头折角、收紧文字容器
+
+### 同心圆遮挡法详解
+
+画一个大圆（作为飞轮的底层颜色），然后在它正中心画一个小圆（填充为白色 `#FFFFFF`）。大圆和小圆都设置 `borderWidth: 0`，通过叠加遮挡形成圆环。
+
+nodes 数组中的图层顺序（必须严格遵守）：
+
+1. **底层大圆** (`type: 'ellipse'`, 填色, `borderWidth: 0`)
+2. **遮罩小圆** (`type: 'ellipse'`, 白色填色, `borderWidth: 0`)
+3. **中心文字** — 必须在两个圆之后添加，否则被白色小圆盖住
+4. **SVG 切割箭头** — 覆盖在圆环上，用白色粗线 polyline 切出分段
+5. **外围阶段卡片** — 极坐标计算位置
+
+### SVG 箭头线切割分段
+
+通过插入一个铺满大圆区域的 `svg` 节点，利用极坐标计算每个分段交界处的坐标，使用 `<polyline>` 画与背景色相同的粗线条（白色、20px+ 宽度）。线条从内圆边缘穿过大圆边缘，并在穿过时产生一定角度的偏转（`da` 参数），在视觉上"切断"圆环并形成箭头方向感。
+
+### 外围文字环绕布局
+
+- 利用极坐标 `x = cx + R * cos(θ)` 计算每个分段的中心角度
+- 在计算出的坐标点放置 `frame` 容器（`layout: 'vertical'`）
+- 外围文字容器内部的 `text` 节点不能用 `width: 'fill-container'`，必须指定固定 width 配合 `height: 'fit-content'`
+
+### 动态缩放优化（阶段数 >= 8 时必须）
+
+当阶段数量较多（8 个、12 个或 16 个以上）时，必须动态调整：
+
+- **放大画布与圆环半径**：节点越多，需要越长的圆周容纳外围文字。适当调大 `rOut` 和 `rIn`（如 16 阶段时 `rOut` 可设为 400+），同步放大 `cx`/`cy` 避免超出边界
+- **缩小箭头切割角度**：段数增多时每段夹角变小，保持默认折角会导致缝隙过大。应减小 `da`（如 `da = 4`）
+- **收紧外围文字容器**：缩窄 `boxWidth`，减小文字字号，确保相邻文本框不互相覆盖
+
+## 骨架示例
+
+此场景必须用 .cjs 脚本生成。Agent 使用时只需修改 `stages` 数组和 `centerTitle`/`centerSubtitle`，其余坐标全自动计算。
+
+```javascript
+const { writeFileSync } = require('fs');
+
+// ══════════════════════════════════════════════════════════════
+// 只需修改这里 -- 填入用户要求的阶段数据和中心标题
+// ══════════════════════════════════════════════════════════════
+
+const centerTitle = '{{CENTER_TITLE}}';
+const centerSubtitle = '{{CENTER_SUBTITLE}}'; // 可选，不需要就留空字符串
+
+const stages = [
+  { title: '{{STAGE_1}}', subtitle: '{{SUB_1}}', desc: '{{DESC_1}}' },
+  { title: '{{STAGE_2}}', subtitle: '{{SUB_2}}', desc: '{{DESC_2}}' },
+  { title: '{{STAGE_3}}', subtitle: '{{SUB_3}}', desc: '{{DESC_3}}' },
+  { title: '{{STAGE_4}}', subtitle: '{{SUB_4}}', desc: '{{DESC_4}}' },
+];
+
+// ══════════════════════════════════════════════════════════════
+// 以下是自动计算逻辑，不需要修改
+// ══════════════════════════════════════════════════════════════
+
+// --- 布局参数 ---
+const numSegments = stages.length;
+const cx = 600, cy = 450; // 画布中心
+const rOut = 240, rIn = 160; // 内外圆半径
+const textDist = rOut + 40; // 文字离圆心距离
+const boxWidth = 220; // 外围文字卡片宽度
+const boxHeight = 80; // 估算高度（用于偏移计算）
+const da = 8; // 箭头折角
+
+const nodes = [];
+
+// --- 图层 1：底层大圆（圆环底色） ---
+nodes.push({
+  type: 'ellipse',
+  x: cx - rOut, y: cy - rOut,
+  width: rOut * 2, height: rOut * 2,
+  borderWidth: 0,
+});
+
+// --- 图层 2：遮罩小圆（白色） ---
+nodes.push({
+  type: 'ellipse',
+  x: cx - rIn, y: cy - rIn,
+  width: rIn * 2, height: rIn * 2,
+  borderWidth: 0,
+});
+
+// --- 图层 3：中心文字（必须在两个圆之后） ---
+nodes.push({
+  type: 'text',
+  x: cx - rIn, y: cy - (centerSubtitle ? 30 : 20),
+  width: rIn * 2, height: 'fit-content',
+  text: [{ content: centerTitle, bold: true, fontSize: 32 }],
+  textAlign: 'center',
+});
+if (centerSubtitle) {
+  nodes.push({
+    type: 'text',
+    x: cx - rIn, y: cy + 20,
+    width: rIn * 2, height: 'fit-content',
+    text: [{ content: centerSubtitle, fontSize: 18 }],
+    textAlign: 'center',
+  });
+}
+
+// --- 图层 4：SVG 切割箭头 ---
+let svg = `<svg viewBox="0 0 ${rOut * 2} ${rOut * 2}" xmlns="http://www.w3.org/2000/svg">`;
+for (let i = 0; i < numSegments; i++) {
+  const a = -90 + i * (360 / numSegments);
+  const rad = (a * Math.PI) / 180;
+  const radMid = ((a + da) * Math.PI) / 180;
+  const R1 = rIn - 5, R2 = rOut + 5, Rm = (rIn + rOut) / 2;
+  const x1 = rOut + R1 * Math.cos(rad), y1 = rOut + R1 * Math.sin(rad);
+  const x2 = rOut + Rm * Math.cos(radMid), y2 = rOut + Rm * Math.sin(radMid);
+  const x3 = rOut + R2 * Math.cos(rad), y3 = rOut + R2 * Math.sin(rad);
+  svg += `<polyline points="${x1},${y1} ${x2},${y2} ${x3},${y3}" stroke="#FFFFFF" stroke-width="20" fill="none" stroke-linejoin="round" stroke-linecap="round" />`;
+}
+svg += `</svg>`;
+nodes.push({
+  type: 'svg',
+  x: cx - rOut, y: cy - rOut,
+  width: rOut * 2, height: rOut * 2,
+  svg: { code: svg },
+});
+
+// --- 图层 5：外围阶段卡片（极坐标计算位置） ---
+for (let i = 0; i < numSegments; i++) {
+  const stage = stages[i];
+  const a = -90 + (360 / numSegments) / 2 + i * (360 / numSegments);
+  const rad = (a * Math.PI) / 180;
+  const tx = cx + textDist * Math.cos(rad);
+  const ty = cy + textDist * Math.sin(rad);
+
+  // 动态偏移：根据角度将文本框向外推
+  let offsetX = 0, offsetY = 0;
+  if (Math.cos(rad) > 0.1) offsetX = 0;
+  else if (Math.cos(rad) < -0.1) offsetX = -boxWidth;
+  else offsetX = -boxWidth / 2;
+  if (Math.sin(rad) > 0.1) offsetY = 0;
+  else if (Math.sin(rad) < -0.1) offsetY = -boxHeight;
+  else offsetY = -boxHeight / 2;
+
+  const textW = boxWidth - 24; // 卡片 padding 12 * 2
+  nodes.push({
+    type: 'frame',
+    x: tx + offsetX, y: ty + offsetY,
+    width: boxWidth, height: 'fit-content',
+    layout: 'vertical', gap: 8, padding: 12,
+    alignItems: 'start',
+    borderWidth: 2, borderRadius: 8,
+    children: [
+      { type: 'text', width: textW, height: 'fit-content',
+        text: [{ content: stage.title, bold: true, fontSize: 18 }], textAlign: 'left' },
+      { type: 'text', width: textW, height: 'fit-content',
+        text: [{ content: stage.subtitle, fontSize: 14 }], textAlign: 'left' },
+      { type: 'text', width: textW, height: 'fit-content',
+        text: [{ content: stage.desc, fontSize: 12 }], textAlign: 'left' },
+    ],
+  });
+}
+
+// --- 图表标题 ---
+nodes.push({
+  type: 'text',
+  x: cx - rOut - 100, y: 30,
+  width: (rOut + 100) * 2, height: 'fit-content',
+  text: [{ content: centerTitle, bold: true, fontSize: 24 }],
+  textAlign: 'center',
+});
+
+writeFileSync('diagram.json', JSON.stringify({ version: 2, nodes }, null, 2));
+```
+
+## 陷阱
+
+- **中心文字被 SVG 遮挡**：中心文字节点必须在大圆和小圆之后、SVG 之前添加，确保 z-index 正确
+- **缺方向指示箭头**：SVG polyline 切割线必须带角度偏转（da 参数），形成顺时针/逆时针箭头感
+- **标签位置不对称**：外围卡片必须用极坐标公式 `x = cx + R * cos(θ)` 均匀分布，不可手动摆放
+- **外围文字容器死锁**：`layout: 'vertical'` 的 frame 内部 text 节点不能用 `width: 'fill-container'`，必须指定固定 width

package/skills/lark-whiteboard/scenes/funnel.md

@@ -0,0 +1,101 @@
+# 漏斗图 (Funnel)
+
+## Content 约束
+
+- 阶段 3-6 个
+- 每阶段一行标签 + 数值（如 "{{STAGE_NAME}} ({{PERCENTAGE}})"）
+- 文案尽量简短；长文案外置到漏斗旁边，图形内仅保留核心短文案
+
+## Layout 选型
+
+绝对定位。用 `trapezoid` / `triangle` 节点从宽到窄排列，height 用 `fit-content`。
+
+## Layout 规则
+
+- 外层 frame 使用 `layout: "vertical"` + `alignItems: "center"` 居中对齐
+- 所有层必须使用脚本计算宽度，以保证**绝对完美的等斜率（直线边缘）**。切勿手写拍脑袋的宽度！
+- 每层间 gap 0-8px（紧密堆叠视觉效果好），从上到下宽度递减。注意 children 数组第一个元素是最顶层（最宽）
+- 所有图形节点必须设置 `"vFlip": false`（引擎默认朝上翻转，漏斗需要朝下）
+- 注意：因为 `vFlip: false` 且是倒金字塔结构，所以 `topWidth` 实际控制的是漏斗各层的**底部较窄边缘**。底层可用 `triangle`（`topWidth: 0`）收窄为尖角，或继续用 `trapezoid` 保持平底。
+
+> **严格的斜率算法（必须在脚本中实现）**：
+> 要让漏斗的侧边形成一条完美的直线，**宽度的递减必须与高度和 gap 严格挂钩**。
+> 1. 设定整体宽度收缩系数 `angleK`（建议值 1.5 到 2.5，表示高度每增加1px，总宽度减少的像素数）。
+> 2. 因为从上往下变窄，所以公式是减法：`bottomWidth(即 topWidth 属性) = currentWidth - (height * angleK)`
+> 3. 下一层的顶宽公式（必须考虑 gap 带来的额外内收）：`nextLayerWidth = bottomWidth - (gap * angleK)`
+
+## 脚本构建模板
+
+此场景必须用 .cjs 脚本生成。
+
+```javascript
+const fs = require('fs');
+
+// 1. 配置基础参数
+const GAP = 4;
+const ANGLE_K = 2; // 斜率系数：高度每下降1px，宽度减少2px
+const LAYER_HEIGHT = 80;
+
+const data = [
+  { text: "展现 (100%)", fillColor: "#F0F4FC", textColor: "#1F2329" },
+  { text: "点击 (50%)", fillColor: "#EAE2FE", textColor: "#1F2329" },
+  { text: "加购 (20%)", fillColor: "#DFF5E5", textColor: "#1F2329" },
+  { text: "成交 (5%)", fillColor: "#1F2329", textColor: "#FFFFFF" }
+];
+
+// 计算第一层的初始宽度 (保证最底层缩到0或平底)
+// 倒推公式：startWidth = 最后一层底宽 + 所有高度消耗 + 所有gap消耗
+const totalHeightLoss = data.length * LAYER_HEIGHT * ANGLE_K;
+const totalGapLoss = (data.length - 1) * GAP * ANGLE_K;
+// 设定最底层为一个尖角 (底宽为0)
+let currentWidth = 0 + totalHeightLoss + totalGapLoss;
+
+const children = data.map((layer, index) => {
+  // 2. 根据公式计算当前层的底宽 (对应节点的 topWidth 属性)
+  const currentBottomWidth = currentWidth - (LAYER_HEIGHT * ANGLE_K);
+  
+  const node = {
+    type: currentBottomWidth <= 0 ? "triangle" : "trapezoid",
+    width: currentWidth,
+    // 注意：漏斗中 topWidth 表示的是下方的窄边！如果 <=0 就用 triangle
+    topWidth: Math.max(0, currentBottomWidth), 
+    height: LAYER_HEIGHT,
+    vFlip: false, // 必须为 false
+    text: layer.text,
+    textAlign: "center",
+    fillColor: layer.fillColor,
+    borderColor: layer.fillColor,
+    borderWidth: 2,
+    fontSize: 16,
+    textColor: layer.textColor
+  };
+
+  // 3. 关键：计算下一层的顶宽。必须减去 gap 的向内收缩量！
+  currentWidth = currentBottomWidth - (GAP * ANGLE_K);
+  
+  return node;
+});
+
+const output = {
+  version: 2,
+  nodes: [
+    {
+      type: "frame",
+      layout: "vertical",
+      alignItems: "center",
+      gap: GAP,
+      padding: 40,
+      children: children
+    }
+  ]
+};
+
+fs.writeFileSync('diagram.json', JSON.stringify(output, null, 2));
+```
+
+## 陷阱
+
+- **不要手写随意递减的宽度**：这会导致漏斗侧边变成折线，不直。必须严格使用上述 `angleK` 公式计算。
+- **忘记计算 gap 带来的收缩**：如果下一层的 `width` 只是简单等于上一层的 `topWidth`，在有 gap 的情况下，衔接处会产生锯齿折角。必须减去 `gap * angleK`。
+- **vFlip 未设置**：忘记 `"vFlip": false` 会导致梯形朝上翻转，漏斗形状错误
+- **文字溢出底层**：底层越窄空间越小，短文案用 `\n` 换行，长文案外置到漏斗旁边（外层套 `layout: "horizontal"` 的 frame，漏斗一侧，说明文字另一侧）

package/skills/lark-whiteboard/scenes/line-chart.md

@@ -0,0 +1,214 @@
+# 折线图
+
+## Content 约束
+
+- 数据点 ≤ 15
+- Y 轴必须有单位标注（如 "万元"、"%"）
+- 折线系列 ≤ 3（超过太密看不清）
+
+## Layout 选型
+
+- **脚本生成坐标**（推荐）：用 .cjs 脚本计算数据点坐标和折线路径，脚本输出 JSON 文件后调用 `npx -y @larksuite/whiteboard-cli@^0.2.12` 渲染
+
+## 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"，默认带箭头
+- 多系列时折线颜色相近难以区分，应使用对比度高的不同色系
+
+此场景必须用 .cjs 脚本生成。Agent 使用时只需修改 `data` 数组，其余坐标与折线生成全自动计算。
+
+```javascript
+const { writeFileSync } = require('fs');
+```

package/skills/lark-whiteboard/scenes/mermaid.md

@@ -0,0 +1,130 @@
+# Mermaid 图表路径
+
+本场景与 DSL 路径互斥。
+
+| | DSL 路径 | Mermaid 路径 |
+|---|---|---|
+| 中间格式 | JSON（WBDocument） | Mermaid 文本（.mmd 文件） |
+| 布局控制 | 精确控制（x/y 坐标、Flex） | 由 parser-kit 自动布局 |
+| 视觉定制 | 完全可控（颜色、字号、圆角等） | 有限（Mermaid 语法） |
+| 参考模块 | elements/ + 对应 scene | 仅本文件 |
+
+## 适用条件
+
+满足以下任一条件时使用：
+- 用户明确要求 "用 Mermaid" 或 "输出 Mermaid"
+- 用户直接粘贴了 Mermaid 语法文本
+- 图表类型为思维导图、时序图、类图、饼图（自动路由）
+
+## 思维导图 (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。