Feishu Cli Board

# 连线系统

## 连线策略

| 连线数 | 策略 |
|--------|------|
| <= 8 | 逐条画 |
| 9-15 | 选代表性连线（每层选 1-2 个节点连到下一层） |
| > 15 | 精简分组，层到层连线，或回退减少节点数 |

一个节点有 3+ 条连线时：入线从 top，出线从 bottom，同侧多条线用不同 position 分散。

---

## 连接方向速查

| 方向 | start position | start snap_to | end position | end snap_to |
|------|---------------|---------------|-------------|-------------|
| -> 左到右 | `{x:1, y:0.5}` | `right` | `{x:0, y:0.5}` | `left` |
| v 上到下 | `{x:0.5, y:1}` | `bottom` | `{x:0.5, y:0}` | `top` |
| <- 右到左 | `{x:0, y:0.5}` | `left` | `{x:1, y:0.5}` | `right` |
| ^ 下到上 | `{x:0.5, y:0}` | `top` | `{x:0.5, y:1}` | `bottom` |

position 是归一化坐标（0-1），表示节点边缘上的连接点位置。

---

## 扇出/扇入

一个节点连多条线时，调整 position 避免连线重叠：

**扇出（1 对 3，从 bottom 出发）**：

```
连线1: start position {x:0.25, y:1} snap_to=bottom → 左侧子节点 top
连线2: start position {x:0.5,  y:1} snap_to=bottom → 中间子节点 top
连线3: start position {x:0.75, y:1} snap_to=bottom → 右侧子节点 top
```

**扇入（3 对 1，汇聚到 top）**：

```
连线1: 左侧节点 bottom → end position {x:0.25, y:0} snap_to=top
连线2: 中间节点 bottom → end position {x:0.5,  y:0} snap_to=top
连线3: 右侧节点 bottom → end position {x:0.75, y:0} snap_to=top
```

---

## shape 选择

| shape | 效果 | 适用场景 |
|-------|------|---------|
| `polyline` | 圆角折线（默认首选） | 流程图、架构图、大多数场景 |
| `straight` | 直线 | 坐标轴、数轴、几何图形边框 |
| `right_angled_polyline` | 直角折线 | 组织架构树、总线规约 |
| `curve` | 曲线 | 优雅的跨层连线、脑图分支、注解箭头 |

---

## 箭头样式

| arrow_style | 效果 |
|-------------|------|
| `none` | 无箭头 |
| `triangle_arrow` | 三角箭头 |

常见组合：
- 单向流：`start.arrow_style = "none"`, `end.arrow_style = "triangle_arrow"`
- 双向流：两端都用 `"triangle_arrow"`
- 无方向关联：两端都用 `"none"`

---

## 连线样式

连线的 style 通过 border 属性控制：

```json
"style": {
  "border_color": "#BBBFC4",
  "border_opacity": 100,
  "border_style": "solid",
  "border_width": "narrow"
}
```

| 样式 | border_style | 用途 |
|------|-------------|------|
| 实线 | `solid` | 主流程、强关系 |
| 虚线 | `dash` | 可选路径、弱关系、回调 |
| 点线 | `dot` | 注解、说明性连线 |

**连线颜色规则**：统一使用色板中的连线色（经典色板为 `#BBBFC4`），不要和节点颜色混用。

---

## 间距要求

有连线的节点间距 >= 60px，否则箭头挤在缝里看不清。

```
错误: 节点 A (x=100, w=160) → 节点 B (x=280, w=160)  间距=20px
正确: 节点 A (x=100, w=160) → 节点 B (x=320, w=160)  间距=60px
```


# 内容规划

核心原则：**信息量匹配用户需求的详细程度。** 用户说"画一个简单架构图"就画简单的，说"画一个完整的微服务架构"才画复杂的。不要自作主张过度展开。

用户 prompt 简短/模糊时（如"画个漏斗图"、"画个架构图"），不要只输出字面内容。应适当补充该领域合理的内容。

## 信息量参考

| 用户需求 | 合理的信息量 |
|---------|------------|
| "画一个简单的 XX 架构图" | 3 层，每层 2-3 节点 |
| "画一个 XX 架构图"（普通请求） | 3-4 层，每层 3-4 节点 |
| "画一个完整/详细的 XX 架构图" | 4-5 层，每层 4-6 节点 |
| 流程图 | 6-10 步骤 + 1-2 个条件分支 |
| 对比表 | 4-6 个维度，每格 1-2 行说明 |
| 组织架构 | 3-4 层，每个父节点下 2-4 个子节点 |

**节点文字**：标题 + 简短说明（如"用户服务\n注册登录和权限管理"），说明 12 字以内为佳。不要写长段落。

## 分组

每组 2-5 个节点。超过 5 个拆成子组。

## 连线预判

| 连线数 | 策略 |
|--------|------|
| <= 8 | 逐条画 |
| 9-15 | 代表性连线 |
| > 15 | 层到层，或回退精简 |

## 精简触发条件

布局放不下时才精简：

| 问题 | 精简方式 |
|------|---------|
| 节点文字放不下 | 缩短描述文字 |
| 一行节点超过 5 个 | 拆成两排或合并同类 |
| 连线交叉 | 减少连线数量 |


# 14 张实战画板档案

这是 2026-05 实战的 14 张画板档案，覆盖图表 / 跨领域设计 / 极限挑战三类场景。原始作品由 Claude Opus 4.7 自由 SVG 设计后，通过本 skill 的 5 步管道翻译为飞书原生节点。

每个条目记录：示例画板 token / 节点数 / 视觉设计模式 / SVG 元素组合 / 推荐工作路径。**Claude 用这份档案做设计参考**——拿到"画个增长飞轮"的需求，能直接看到对应模式应用哪些 SVG 元素、节点规模大概多少。

---

## 第一弹：基本图表（6 张）

### 1. 增长飞轮 · Growth Flywheel

- **示例 token**: `board_token_xxx`
- **节点数**: 48（原文档）/ 30（复刻）
- **类型分布**: text_shape:24 / svg:4（扇形）/ composite_shape:2 / connector:0
- **设计模式**: 圆环切割 + 极坐标外围标签
- **SVG 元素组合**:
  - `<circle>` 嵌套圆环（外圈 R=300 / 中圈 R=200 / 内圈 R=80）
  - `<path>` 4 段扇形（每段 90°）
  - `<text>` 外围 4 个阶段标签（顶/右/下/左）
  - 中心 `<text>` "SaaS Flywheel"
- **关键技术点**: 极坐标公式 `(cx + r·cosθ, cy + r·sinθ)` 均匀分布 N 个标签
- **推荐路径**: C（SVG → 原生节点）

### 2. 鱼骨分析 · Fishbone Diagram

- **示例 token**: `board_token_xxx`
- **节点数**: 71（原文档）/ 67（复刻）
- **类型分布**: text_shape:30 / connector:28 / composite_shape:8 / svg:1
- **设计模式**: 对称斜骨 + 同色系分组
- **SVG 元素组合**:
  - 主骨 `<line>`（水平居中）
  - 5-6 个维度的斜骨 `<line>`（上下交替）
  - 每个斜骨下挂 3-4 根 `<line>` 小骨
  - 分类标签卡 `<rect>` + `<text>`
- **关键技术点**: 三角函数计算等距挂载点（沿斜骨参数化 t = i / (n+1)）
- **推荐路径**: C

### 3. 价值金字塔 · Value Pyramid

- **示例 token**: `board_token_xxx`
- **节点数**: 56（原文档）/ 28（复刻）
-