Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions skills/lark-whiteboard/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,8 @@ metadata:
---

> [!IMPORTANT]
> **执行前检查环境**:
> - 运行 `whiteboard-cli --version`,确认版本为 `0.2.x`;未安装或版本不符 → `npm install -g @larksuite/whiteboard-cli@^0.2.0`
> - 运行 `lark-cli --version`,确认可用。
> - 执行任何 `npm install` 前,**必须征得用户同意**。
> - 运行 `lark-cli --version`,确认可用,无需询问用户。
> - 运行 `npx -y @larksuite/whiteboard-cli@^0.2.9 -v`,确认可用,无需询问用户。

**CRITICAL — 开始前 MUST 先用 Read 工具读取 [`../lark-shared/SKILL.md`](../lark-shared/SKILL.md),其中包含认证、权限处理**

Expand Down Expand Up @@ -126,15 +124,15 @@ diagram.png ← 渲染结果

```bash
# 第一步:dry-run 探测
npx -y @larksuite/whiteboard-cli@^0.2.0 -i <产物文件> --to openapi --format json \
npx -y @larksuite/whiteboard-cli@^0.2.9 -i <产物文件> --to openapi --format json \
| lark-cli whiteboard +update \
--whiteboard-token <Token> \
--source - --input_format raw \
--idempotent-token <10+字符唯一串> \
--overwrite --dry-run --as user

# 第二步:确认后执行
npx -y @larksuite/whiteboard-cli@^0.2.0 -i <产物文件> --to openapi --format json \
npx -y @larksuite/whiteboard-cli@^0.2.9 -i <产物文件> --to openapi --format json \
| lark-cli whiteboard +update \
--whiteboard-token <Token> \
--source - --input_format raw \
Expand Down
4 changes: 2 additions & 2 deletions skills/lark-whiteboard/references/lark-whiteboard-update.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ whiteboard-cli 工具的具体用法请参考 [§ 渲染 & 写入画板](../SKIL

```bash
# 使用 whiteboard-cli 生成 OpenAPI 格式并通过管道传递
npx -y @larksuite/whiteboard-cli@^0.2.0 -i <产物文件> --to openapi --format json \
npx -y @larksuite/whiteboard-cli@^0.2.9 -i <产物文件> --to openapi --format json \
| lark-cli whiteboard +update \
--whiteboard-token <画板Token> \
--source - --input_format raw \
Expand All @@ -88,7 +88,7 @@ whiteboard-cli 工具的具体用法请参考 [§ 渲染 & 写入画板](../SKIL

```bash
# 生成 OpenAPI 格式到文件
npx -y @larksuite/whiteboard-cli@^0.2.0 -i <DSL 文件> --to openapi --format json -o ./temp.json
npx -y @larksuite/whiteboard-cli@^0.2.9 -i <DSL 文件> --to openapi --format json -o ./temp.json

# 从文件读取并更新
lark-cli whiteboard +update \
Expand Down
2 changes: 1 addition & 1 deletion skills/lark-whiteboard/references/layout.md
Original file line number Diff line number Diff line change
Expand Up @@ -336,7 +336,7 @@ DSL 的语法是严格白名单,不能写原生 CSS 属性(不支持 `alignS
先出骨架图导出坐标,再基于坐标补充连线和注解:

```bash
npx -y @larksuite/whiteboard-cli@^0.2.0 -i skeleton.json -o step1.png -l coords.json
npx -y @larksuite/whiteboard-cli@^0.2.9 -i skeleton.json -o step1.png -l coords.json
```

`coords.json` 包含每个带 id 节点的精确坐标(absX, absY, width, height)。
Expand Down
4 changes: 2 additions & 2 deletions skills/lark-whiteboard/references/schema.md
Original file line number Diff line number Diff line change
Expand Up @@ -323,14 +323,14 @@ lark-cli drive +upload --file ./beijing-palace.jpg
x?: number; y?: number;
width?: WBSizeValue; // 默认 48
height?: WBSizeValue; // 默认 48,保持正方形
name: string; // 图标名称,从 npx -y @larksuite/whiteboard-cli@^0.2.0 --icons 输出中选取
name: string; // 图标名称,从 npx -y @larksuite/whiteboard-cli@^0.2.9 --icons 输出中选取
color?: string; // 可选颜色覆盖,hex 格式如 '#FF6600'
}
```

**获取可用图标**:规划好内容和布局后,运行以下命令查看所有可用图标名,从中选取:
```bash
npx -y @larksuite/whiteboard-cli@^0.2.0 --icons
npx -y @larksuite/whiteboard-cli@^0.2.9 --icons
```

用法:
Expand Down
6 changes: 3 additions & 3 deletions skills/lark-whiteboard/routes/dsl.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Step 1: 路由 & 读取知识
Step 2: 生成完整 DSL(含颜色)
- 按 content.md 规划信息量和分组
- 按 layout.md 选择布局模式和间距
- 推荐使用图标让图表更直观,运行 `npx -y @larksuite/whiteboard-cli@^0.2.0 --icons` 查看可用图标
- 推荐使用图标让图表更直观,运行 `npx -y @larksuite/whiteboard-cli@^0.2.9 --icons` 查看可用图标
- 按 style.md 上色(用户没指定时用默认经典色板)
- 按 schema.md 语法输出完整 JSON
- 连线参考 connectors.md,排版参考 typography.md
Expand All @@ -25,12 +25,12 @@ Step 2: 生成完整 DSL(含颜色)

Step 3: 渲染 & 审查 → 交付
- 渲染前自查(见下方检查清单)
- 渲染 PNG(仅用于预览验证,不是最终产物):npx -y @larksuite/whiteboard-cli@^0.2.0 -i diagram.json -o diagram.png
- 渲染 PNG(仅用于预览验证,不是最终产物):npx -y @larksuite/whiteboard-cli@^0.2.9 -i diagram.json -o diagram.png
- 检查:信息完整?布局合理?配色协调?文字无截断?连线无交叉?
- 有问题 → 按症状表修复 → 重新渲染(最多 2 轮)
- 2 轮后仍有严重问题 → 考虑走 Mermaid 路径兜底
- 写入画板:用 whiteboard-cli 将 diagram.json 转换为 OpenAPI 格式并 pipe 给 +update:
npx -y @larksuite/whiteboard-cli@^0.2.0 -i diagram.json --to openapi --format json \
npx -y @larksuite/whiteboard-cli@^0.2.9 -i diagram.json --to openapi --format json \
| lark-cli whiteboard +update --whiteboard-token <board_token> \
--source - --input_format raw --idempotent-token <时间戳+标识> --yes --as user
→ 完整 dry-run / 确认流程见 SKILL.md [§ 写入画板](../SKILL.md#写入画板)
Expand Down
4 changes: 2 additions & 2 deletions skills/lark-whiteboard/routes/mermaid.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ Step 3: 渲染验证 & 写入画板 & 交付
1. 创建产物目录 ./diagrams/YYYY-MM-DDTHHMMSS/
2. 保存为 diagram.mmd
3. 渲染(仅用于预览验证,PNG 不是最终产物):
npx -y @larksuite/whiteboard-cli@^0.2.0 -i diagram.mmd -o diagram.png
npx -y @larksuite/whiteboard-cli@^0.2.9 -i diagram.mmd -o diagram.png
4. 审查 PNG,有问题修改后重新渲染(最多 2 轮)
5. 写入画板:用 whiteboard-cli 将 diagram.mmd 转换为 OpenAPI 格式并 pipe 给 +update:
npx -y @larksuite/whiteboard-cli@^0.2.0 -i diagram.mmd --to openapi --format json \
npx -y @larksuite/whiteboard-cli@^0.2.9 -i diagram.mmd --to openapi --format json \
| lark-cli whiteboard +update --whiteboard-token <board_token> \
--source - --input_format raw --idempotent-token <时间戳+标识> --yes --as user
→ 完整 dry-run / 确认流程见 SKILL.md [§ 写入画板](../SKILL.md#写入画板)
Expand Down
8 changes: 4 additions & 4 deletions skills/lark-whiteboard/routes/svg.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,12 @@
```
建目录 ./diagrams/YYYY-MM-DDTHHMMSS/ (例:./diagrams/2026-04-15T143022/)
写文件 <dir>/diagram.svg
渲染 npx -y @larksuite/whiteboard-cli@^0.2.0 -i <dir>/diagram.svg -o <dir>/diagram.png -f svg
检查 npx -y @larksuite/whiteboard-cli@^0.2.0 -i <dir>/diagram.svg -f svg --check
导出 npx -y @larksuite/whiteboard-cli@^0.2.0 -i <dir>/diagram.svg -f svg --to openapi --format json > <dir>/diagram.json
渲染 npx -y @larksuite/whiteboard-cli@^0.2.9 -i <dir>/diagram.svg -o <dir>/diagram.png -f svg
检查 npx -y @larksuite/whiteboard-cli@^0.2.9 -i <dir>/diagram.svg -f svg --check
导出 npx -y @larksuite/whiteboard-cli@^0.2.9 -i <dir>/diagram.svg -f svg --to openapi --format json > <dir>/diagram.json
```

`npx -y @larksuite/whiteboard-cli@^0.2.0 --check` 检测 `text-overflow` 和 `node-overlap`, 并结合视觉效果(查看 PNG)进行调整
`npx -y @larksuite/whiteboard-cli@^0.2.9 --check` 检测 `text-overflow` 和 `node-overlap`, 并结合视觉效果(查看 PNG)进行调整

## 画板怎么处理 SVG

Expand Down
2 changes: 1 addition & 1 deletion skills/lark-whiteboard/scenes/bar-chart.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

## Layout 选型

- **脚本生成坐标**(推荐):用 .cjs 脚本计算柱体位置和高度,脚本输出 JSON 文件后调用 `npx -y @larksuite/whiteboard-cli@^0.2.0` 渲染
- **脚本生成坐标**(推荐):用 .cjs 脚本计算柱体位置和高度,脚本输出 JSON 文件后调用 `npx -y @larksuite/whiteboard-cli@^0.2.9` 渲染
- **绝对定位手写**:简单柱状图(≤ 5 个柱)可手写坐标

## Layout 规则
Expand Down
2 changes: 1 addition & 1 deletion skills/lark-whiteboard/scenes/fishbone.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

## Layout 选型

- **脚本生成坐标**(必须):用 .cjs 脚本通过三角函数计算鱼骨坐标,脚本输出 JSON 文件后调用 `npx -y @larksuite/whiteboard-cli@^0.2.0` 渲染
- **脚本生成坐标**(必须):用 .cjs 脚本通过三角函数计算鱼骨坐标,脚本输出 JSON 文件后调用 `npx -y @larksuite/whiteboard-cli@^0.2.9` 渲染

## Layout 规则

Expand Down
2 changes: 1 addition & 1 deletion skills/lark-whiteboard/scenes/flywheel.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

## Layout 选型

- **脚本生成坐标**(必须):用 .cjs 脚本极坐标计算阶段标签位置、SVG 圆环切割,脚本输出 JSON 文件后调用 `npx -y @larksuite/whiteboard-cli@^0.2.0` 渲染
- **脚本生成坐标**(必须):用 .cjs 脚本极坐标计算阶段标签位置、SVG 圆环切割,脚本输出 JSON 文件后调用 `npx -y @larksuite/whiteboard-cli@^0.2.9` 渲染

## Layout 规则

Expand Down
2 changes: 1 addition & 1 deletion skills/lark-whiteboard/scenes/line-chart.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

## Layout 选型

- **脚本生成坐标**(推荐):用 .cjs 脚本计算数据点坐标和折线路径,脚本输出 JSON 文件后调用 `npx -y @larksuite/whiteboard-cli@^0.2.0` 渲染
- **脚本生成坐标**(推荐):用 .cjs 脚本计算数据点坐标和折线路径,脚本输出 JSON 文件后调用 `npx -y @larksuite/whiteboard-cli@^0.2.9` 渲染

## Layout 规则

Expand Down
2 changes: 1 addition & 1 deletion skills/lark-whiteboard/scenes/treemap.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

## Layout 选型

- **脚本生成坐标**(推荐):Treemap 需要精确的面积比例计算,用 .cjs 脚本递归切分矩形,脚本输出 JSON 文件后调用 `npx -y @larksuite/whiteboard-cli@^0.2.0` 渲染
- **脚本生成坐标**(推荐):Treemap 需要精确的面积比例计算,用 .cjs 脚本递归切分矩形,脚本输出 JSON 文件后调用 `npx -y @larksuite/whiteboard-cli@^0.2.9` 渲染
- 不适合手动心算坐标

## Layout 规则
Expand Down
Loading