[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EWFQMAQ1SW7PGW87HCN9W2":3,"skill-same:01M6EWFQMAQ1SW7PGW87HCN9W2":146},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":34,"linkOnly":35,"markdownContent":36,"markdownBody":37,"frontMatter":38,"refName":45,"commitSha":46,"skillDirectory":47,"forksCount":48,"repositoryHtmlUrl":49,"repositoryHomepageUrl":50,"ownerHtmlUrl":51,"ownerBlogUrl":6,"ownerDescription":52,"updatedAt":53,"install":54,"resources":67},"01M6EWFQMAQ1SW7PGW87HCN9W2","lark-whiteboard",null,"当用户要求在飞书云文档中绘制图表，或使用飞书画板绘制架构图、流程图、思维导图、时序图或其他可视化图表时使用此 skill。","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33],"lark whiteboard","lark","cli","js","文档","node","可视化","图表","流程图","架构图","2026-11-10 10:12:30",false,"---\nname: lark-whiteboard\ndescription: >\n  当用户要求在飞书云文档中绘制图表，或使用飞书画板绘制架构图、流程图、思维导图、时序图或其他可视化图表时使用此 skill。\ncompatibility: Requires Node.js 18+\nmetadata:\n  requires:\n    bins: [\"lark-cli\"]\n---\n\n# Whiteboard Cli Skill\n\n> [!NOTE]\n> **环境依赖**：绘制画板需要 `@larksuite\u002Fwhiteboard-cli`（画板 Node.js CLI 工具），以及 `lark-cli`（LarkSuite CLI 工具）。\n> 如果执行失败，手动安装后重试：`npm install -g @larksuite\u002Fwhiteboard-cli@^0.1.0`\n\n> [!IMPORTANT]\n> 执行 `npm install` 安装新的依赖前，务必征得用户同意！\n\n\n## Workflow\n\n> **这是画板，不是网页。** 画板是无限画布上自由放置元素，flex 布局是可选增强。\n\n```\nStep 1: 路由 & 读取知识\n  - 判断渲染路径（见路由表）：Mermaid 还是 DSL？\n  - 读对应 scene 指南 — 了解结构特征和布局策略\n  - 确定布局策略（见下方快速判断）和构建方式\n  - 读 references\u002F 核心模块 — 语法、布局、配色、排版、连线\n\nStep 2: 生成完整 DSL（含颜色）\n  - 按 content.md 规划信息量和分组\n  - 按 layout.md 选择布局模式和间距\n  - 按 style.md 上色（用户没指定时用默认经典色板）\n  - 按 schema.md 语法输出完整 JSON\n  - 连线参考 connectors.md，排版参考 typography.md\n\n  注意：部分图形（鱼骨\u002F飞轮\u002F柱状\u002F折线等）等, 要按 scene 指南的脚本模板写 .js 脚本生成 JSON：\n    - node xxx.js → 产出 JSON 文件\n    - 用产出的 JSON 文件进入 Step 3\n\nStep 3: 渲染 & 审查 → 交付\n  - 渲染前自查（见下方检查清单）\n  - 渲染 PNG，检查：\n    · 信息完整？布局合理？配色协调？\n    · 文字无截断？连线无交叉？\n  - 有问题 → 按症状表修复 → 重新渲染（最多 2 轮）\n  - 2 轮后仍有严重问题 → 考虑走 Mermaid 路径兜底\n  - 没问题 → 交付：\n    · 用户要求上传飞书 → 见下方”上传飞书画板”章节中的说明\n    · 用户未指定 → 展示 PNG 图片给用户\n```\n\n**布局策略快速判断**（详见 layout.md）：\n\n| 判断条件 | 布局策略 | 构建方式 |\n|----------|----------|----------|\n| 有明确上下层级（用户层→服务层→数据层） | Flex 分层 | 直接写 JSON |\n| 空间位置承载信息（地理、拓扑、角度） | 纯绝对定位 | 写脚本算坐标（node xxx.js） |\n| 多个独立模块平级互联 | 混合（岛屿式） | 直接写 JSON + 估高辅助 |\n| 不确定 | 默认 Flex（最安全） | 直接写 JSON |\n\n> **构建方式是强约束**：当 scene 指南要求\"脚本生成\"时，必须先写脚本（.js）并用 `node` 执行来产出 JSON 文件。绝对定位场景（鱼骨图、飞轮图、柱状图、折线图等）的坐标需要数学计算，直接手写 JSON 极易导致节点重叠或连线穿模。\n\n---\n\n## 渲染路径选择（DSL or Mermaid）\n\n| 图表类型 | 路径 | 理由 |\n|----------|------|------|\n| 思维导图 | **Mermaid** | 辐射结构自动布局 |\n| 时序图 | **Mermaid** | 参与方+消息自动排列 |\n| 类图 | **Mermaid** | 类关系自动布局 |\n| 饼图 | **Mermaid** | Mermaid 原生支持 |\n| 流程图 | **Mermaid** | 通过 Mermaid 语法稳定生成结构 |\n| 其他所有类型 | **DSL** | 精确控制样式和布局 |\n\n**路由规则**：\n1. **自动 Mermaid**：思维导图、时序图、类图、饼图、流程图 → 默认走 Mermaid\n2. **显式 Mermaid**：用户输入包含 Mermaid 语法 → 走 Mermaid\n3. **DSL 路径**：其他所有类型 → 先读核心模块，再读对应场景指南\n\n**Mermaid 路径**：参考 `scenes\u002Fmermaid.md` 编写 `.mmd` 文件，跳过 DSL 模块。\n**DSL 路径**：按 Workflow 3 步执行。\n\n---\n\n## 模块索引\n\n### 核心参考（DSL 路径必读）\n\n| 模块 | 文件 | 说明 |\n|------|------|------|\n| DSL 语法 | `references\u002Fschema.md` | 节点类型、属性、尺寸值 |\n| 内容规划 | `references\u002Fcontent.md` | 信息提取、密度决策、连线预判 |\n| 布局系统 | `references\u002Flayout.md` | 网格方法论、Flex 映射、间距规则 |\n| 排版规则 | `references\u002Ftypography.md` | 字号层级、对齐、行距 |\n| 连线系统 | `references\u002Fconnectors.md` | 拓扑规划、锚点选择 |\n| 配色系统 | `references\u002Fstyle.md` | 多色板、视觉层级 |\n\n\n### 场景指南（按类型选读一个）\n\n| 图表类型 | 文件 | 适用场景 |\n|----------|------|----------|\n| 架构图 | `scenes\u002Farchitecture.md` | 分层架构、微服务架构 |\n| 组织架构图 | `scenes\u002Forganization.md` | 公司组织、树形层级 |\n| 对比图 | `scenes\u002Fcomparison.md` | 方案对比、功能矩阵 |\n| 鱼骨图 | `scenes\u002Ffishbone.md` | 因果分析、根因分析 |\n| 柱状图 | `scenes\u002Fbar-chart.md` | 柱状图、条形图 |\n| 折线图 | `scenes\u002Fline-chart.md` | 折线图、趋势图 |\n| 树状图 | `scenes\u002Ftreemap.md` | 矩形树图、层级占比 |\n| 漏斗图 | `scenes\u002Ffunnel.md` | 转化漏斗、销售漏斗 |\n| 金字塔图 | `scenes\u002Fpyramid.md` | 层级结构、需求层次 |\n| 循环\u002F飞轮图 | `scenes\u002Fflywheel.md` | 增长飞轮、闭环链路 |\n| 里程碑 | `scenes\u002Fmilestone.md` | 时间线、版本演进 |\n| Mermaid | `scenes\u002Fmermaid.md` | 思维导图、时序图、类图、饼图、流程图 |\n\n---\n\n## CLI 命令\n\n**渲染**：\n```bash\nnpx -y @larksuite\u002Fwhiteboard-cli@^0.1.0 -i my-diagram.json -o .\u002Fimages\u002Fmy-diagram.png        # DSL 路径\nnpx -y @larksuite\u002Fwhiteboard-cli@^0.1.0 -i diagram.mmd -o .\u002Fimages\u002Fdiagram.png               # Mermaid 路径\nnpx -y @larksuite\u002Fwhiteboard-cli@^0.1.0 -i skeleton.json -o .\u002Fimages\u002Fstep1.png -l coords.json  # 两阶段（提取坐标）\n```\n\n**上传飞书画板**：\n\n> 上传需要飞书认证。遇到认证或权限错误时，阅读 [`..\u002Flark-shared\u002FSKILL.md`](..\u002Flark-shared\u002FSKILL.md) 了解登录和权限处理。\n\n**第一步：获取画板 Token**\n\n| 用户给了什么 | 怎么获取 Token |\n|------------|--------------|\n| 画板 Token（`XXX`） | 直接使用 |\n| 文档 URL 或 doc_id，文档中已有画板 | `lark-cli docs +fetch --doc \u003CURL> --as user`，从返回的 `\u003Cwhiteboard token=”XXX”\u002F>` 中提取 token |\n| 文档 URL 或 doc_id，需要新建画板 | `lark-cli docs +update --doc \u003Cdoc_id> --mode append --markdown '\u003Cwhiteboard type=”blank”>\u003C\u002Fwhiteboard>' --as user`，从响应的 `data.board_tokens[0]` 获取 token |\n\n关于飞书文档的创建，读取等更多操作，请参考 lark-doc skill [`..\u002Flark-doc\u002FSKILL.md`](..\u002Flark-doc\u002FSKILL.md)。\n\n**第二步：上传**\n\n> [!CAUTION]\n> **MANDATORY PRE-FLIGHT CHECK (上传前强制拦截检查)**\n> 当你要向一个**已存在的画板 Token** 写入内容时，**绝对禁止**直接执行上传命令！你必须严格遵守以下两步：\n> **强制执行 Dry Run（状态探测）**\n> 必须先在命令中添加 `--overwrite --dry-run` 参数来探测画板当前状态。示例命令：\n> ```bash\n> npx -y @larksuite\u002Fwhiteboard-cli@^0.1.0 --to openapi -i \u003C输入文件> --format json | lark-cli docs +whiteboard-update --whiteboard-token \u003CToken> --overwrite --dry-run --as user\n> ```\n>\n> **解析结果并拦截**\n> - 仔细阅读 Dry Run 的输出日志。\n> - **如果日志包含 `XX whiteboard nodes will be deleted`**：这说明画板**非空**，当前操作会覆盖并摧毁用户的原有图表！\n> - **你必须立即停止操作**，并通过 `AskUserQuestion` 工具（或直接回复）向用户确认：”目标画板当前非空，继续更新将清空原有的 XX 个节点，是否确认覆盖？”\n> - 只有在用户明确授权”同意覆盖”后，你才能移除 `--dry-run` 真正执行上传。\n> - 用户可能会要求你不覆盖更新画板内容，在这种情况下，移除 `--overwrite` 和 `--dry-run` 参数再上传。\n\n```bash\nnpx -y @larksuite\u002Fwhiteboard-cli@^0.1.0 --to openapi -i \u003C输入文件> --format json | lark-cli docs +whiteboard-update --whiteboard-token \u003C画板Token> --yes --as user\n```\n> 画板一经上传不可修改。如需应用身份上传，将 `--as user` 替换为 `--as bot`。\n> 如果画板非空，先加 `--overwrite --dry-run` 检查待删除节点数，向用户确认后去掉 `--dry-run` 执行。\n\n**症状→修复表**（视觉审查发现问题时参照）：\n\n| 看到的问题 | 改什么 |\n|-----------|--------|\n| 文字被截断 | height 改为 fit-content |\n| 文字溢出容器右侧 | 增大 width，或缩短文字 |\n| 节点重叠粘连 | 增大 gap |\n| 节点挤成一团 | 增大 padding 和 gap |\n| 连线穿过节点 | 调整 fromAnchor\u002FtoAnchor 或增大间距 |\n| 大面积空白 | 缩小外层 frame 宽度 |\n| 文字和背景色太接近 | 调整 fillColor 或 textColor |\n| 布局整体偏左\u002F偏右 | 调整绝对定位的 x 坐标使内容居中 |\n\n---\n\n## 渲染前自查\n\n生成 DSL 后、渲染前，快速检查：\n\n- [ ] 不同分组用了不同颜色？同组节点样式完全一致？\n- [ ] 外层浅色背景、内层白色节点？（外重内轻）\n- [ ] 所有节点有边框（borderWidth=2）？文字在背景上清晰可读？\n- [ ] 连线用灰色（#BBBFC4），不用彩色？\n- [ ] frame 都写了 layout 属性？gap 和 padding 都显式设置了？\n- [ ] 含文字节点 height 用 fit-content？connector 在顶层 nodes 数组？\n\n---\n\n## 关键约束速查\n\n> 最高频出错的规则，即使不读子模块文件也必须遵守。\n\n1. **含文字节点的 height 必须用 `'fit-content'`** — 写死数值会截断文字\n2. **`fill-container` 仅在 flex 父容器中生效** — `layout: 'none'` 下宽度退化为 0\n3. **connector 必须放在顶层 nodes 数组** — 不能嵌套在 frame children 里\n4. **图层顺序** — 数组顺序 = 绘制顺序。后定义的元素层级越高，会覆盖先定义的。重叠\u002F浮层\u002F标注元素务必放在数组末尾。\n5. **flex 容器内的 x\u002Fy 会被完全忽略** — 需要自由定位时用 `layout: 'none'` 或放在顶层 nodes\n\n❌ 致命错误：flex 容器内设 x\u002Fy，坐标不生效，节点按顺序排列\n```json\n{ \"type\": \"frame\", \"layout\": \"vertical\", \"children\": [\n  { \"type\": \"rect\", \"x\": 100, \"y\": 0, \"text\": \"成都\" },\n  { \"type\": \"rect\", \"x\": 540, \"y\": 0, \"text\": \"康定\" }\n]}\n```\n✅ 正确：用 `layout: \"none\"` 或放在顶层 nodes 用 x\u002Fy 定位。\n","# Whiteboard Cli Skill\n\n> [!NOTE]\n> **环境依赖**：绘制画板需要 `@larksuite\u002Fwhiteboard-cli`（画板 Node.js CLI 工具），以及 `lark-cli`（LarkSuite CLI 工具）。\n> 如果执行失败，手动安装后重试：`npm install -g @larksuite\u002Fwhiteboard-cli@^0.1.0`\n\n> [!IMPORTANT]\n> 执行 `npm install` 安装新的依赖前，务必征得用户同意！\n\n\n## Workflow\n\n> **这是画板，不是网页。** 画板是无限画布上自由放置元素，flex 布局是可选增强。\n\n```\nStep 1: 路由 & 读取知识\n  - 判断渲染路径（见路由表）：Mermaid 还是 DSL？\n  - 读对应 scene 指南 — 了解结构特征和布局策略\n  - 确定布局策略（见下方快速判断）和构建方式\n  - 读 references\u002F 核心模块 — 语法、布局、配色、排版、连线\n\nStep 2: 生成完整 DSL（含颜色）\n  - 按 content.md 规划信息量和分组\n  - 按 layout.md 选择布局模式和间距\n  - 按 style.md 上色（用户没指定时用默认经典色板）\n  - 按 schema.md 语法输出完整 JSON\n  - 连线参考 connectors.md，排版参考 typography.md\n\n  注意：部分图形（鱼骨\u002F飞轮\u002F柱状\u002F折线等）等, 要按 scene 指南的脚本模板写 .js 脚本生成 JSON：\n    - node xxx.js → 产出 JSON 文件\n    - 用产出的 JSON 文件进入 Step 3\n\nStep 3: 渲染 & 审查 → 交付\n  - 渲染前自查（见下方检查清单）\n  - 渲染 PNG，检查：\n    · 信息完整？布局合理？配色协调？\n    · 文字无截断？连线无交叉？\n  - 有问题 → 按症状表修复 → 重新渲染（最多 2 轮）\n  - 2 轮后仍有严重问题 → 考虑走 Mermaid 路径兜底\n  - 没问题 → 交付：\n    · 用户要求上传飞书 → 见下方”上传飞书画板”章节中的说明\n    · 用户未指定 → 展示 PNG 图片给用户\n```\n\n**布局策略快速判断**（详见 layout.md）：\n\n| 判断条件 | 布局策略 | 构建方式 |\n|----------|----------|----------|\n| 有明确上下层级（用户层→服务层→数据层） | Flex 分层 | 直接写 JSON |\n| 空间位置承载信息（地理、拓扑、角度） | 纯绝对定位 | 写脚本算坐标（node xxx.js） |\n| 多个独立模块平级互联 | 混合（岛屿式） | 直接写 JSON + 估高辅助 |\n| 不确定 | 默认 Flex（最安全） | 直接写 JSON |\n\n> **构建方式是强约束**：当 scene 指南要求\"脚本生成\"时，必须先写脚本（.js）并用 `node` 执行来产出 JSON 文件。绝对定位场景（鱼骨图、飞轮图、柱状图、折线图等）的坐标需要数学计算，直接手写 JSON 极易导致节点重叠或连线穿模。\n\n---\n\n## 渲染路径选择（DSL or Mermaid）\n\n| 图表类型 | 路径 | 理由 |\n|----------|------|------|\n| 思维导图 | **Mermaid** | 辐射结构自动布局 |\n| 时序图 | **Mermaid** | 参与方+消息自动排列 |\n| 类图 | **Mermaid** | 类关系自动布局 |\n| 饼图 | **Mermaid** | Mermaid 原生支持 |\n| 流程图 | **Mermaid** | 通过 Mermaid 语法稳定生成结构 |\n| 其他所有类型 | **DSL** | 精确控制样式和布局 |\n\n**路由规则**：\n1. **自动 Mermaid**：思维导图、时序图、类图、饼图、流程图 → 默认走 Mermaid\n2. **显式 Mermaid**：用户输入包含 Mermaid 语法 → 走 Mermaid\n3. **DSL 路径**：其他所有类型 → 先读核心模块，再读对应场景指南\n\n**Mermaid 路径**：参考 `scenes\u002Fmermaid.md` 编写 `.mmd` 文件，跳过 DSL 模块。\n**DSL 路径**：按 Workflow 3 步执行。\n\n---\n\n## 模块索引\n\n### 核心参考（DSL 路径必读）\n\n| 模块 | 文件 | 说明 |\n|------|------|------|\n| DSL 语法 | `references\u002Fschema.md` | 节点类型、属性、尺寸值 |\n| 内容规划 | `references\u002Fcontent.md` | 信息提取、密度决策、连线预判 |\n| 布局系统 | `references\u002Flayout.md` | 网格方法论、Flex 映射、间距规则 |\n| 排版规则 | `references\u002Ftypography.md` | 字号层级、对齐、行距 |\n| 连线系统 | `references\u002Fconnectors.md` | 拓扑规划、锚点选择 |\n| 配色系统 | `references\u002Fstyle.md` | 多色板、视觉层级 |\n\n\n### 场景指南（按类型选读一个）\n\n| 图表类型 | 文件 | 适用场景 |\n|----------|------|----------|\n| 架构图 | `scenes\u002Farchitecture.md` | 分层架构、微服务架构 |\n| 组织架构图 | `scenes\u002Forganization.md` | 公司组织、树形层级 |\n| 对比图 | `scenes\u002Fcomparison.md` | 方案对比、功能矩阵 |\n| 鱼骨图 | `scenes\u002Ffishbone.md` | 因果分析、根因分析 |\n| 柱状图 | `scenes\u002Fbar-chart.md` | 柱状图、条形图 |\n| 折线图 | `scenes\u002Fline-chart.md` | 折线图、趋势图 |\n| 树状图 | `scenes\u002Ftreemap.md` | 矩形树图、层级占比 |\n| 漏斗图 | `scenes\u002Ffunnel.md` | 转化漏斗、销售漏斗 |\n| 金字塔图 | `scenes\u002Fpyramid.md` | 层级结构、需求层次 |\n| 循环\u002F飞轮图 | `scenes\u002Fflywheel.md` | 增长飞轮、闭环链路 |\n| 里程碑 | `scenes\u002Fmilestone.md` | 时间线、版本演进 |\n| Mermaid | `scenes\u002Fmermaid.md` | 思维导图、时序图、类图、饼图、流程图 |\n\n---\n\n## CLI 命令\n\n**渲染**：\n```bash\nnpx -y @larksuite\u002Fwhiteboard-cli@^0.1.0 -i my-diagram.json -o .\u002Fimages\u002Fmy-diagram.png        # DSL 路径\nnpx -y @larksuite\u002Fwhiteboard-cli@^0.1.0 -i diagram.mmd -o .\u002Fimages\u002Fdiagram.png               # Mermaid 路径\nnpx -y @larksuite\u002Fwhiteboard-cli@^0.1.0 -i skeleton.json -o .\u002Fimages\u002Fstep1.png -l coords.json  # 两阶段（提取坐标）\n```\n\n**上传飞书画板**：\n\n> 上传需要飞书认证。遇到认证或权限错误时，阅读 [`..\u002Flark-shared\u002FSKILL.md`](..\u002Flark-shared\u002FSKILL.md) 了解登录和权限处理。\n\n**第一步：获取画板 Token**\n\n| 用户给了什么 | 怎么获取 Token |\n|------------|--------------|\n| 画板 Token（`XXX`） | 直接使用 |\n| 文档 URL 或 doc_id，文档中已有画板 | `lark-cli docs +fetch --doc \u003CURL> --as user`，从返回的 `\u003Cwhiteboard token=”XXX”\u002F>` 中提取 token |\n| 文档 URL 或 doc_id，需要新建画板 | `lark-cli docs +update --doc \u003Cdoc_id> --mode append --markdown '\u003Cwhiteboard type=”blank”>\u003C\u002Fwhiteboard>' --as user`，从响应的 `data.board_tokens[0]` 获取 token |\n\n关于飞书文档的创建，读取等更多操作，请参考 lark-doc skill [`..\u002Flark-doc\u002FSKILL.md`](..\u002Flark-doc\u002FSKILL.md)。\n\n**第二步：上传**\n\n> [!CAUTION]\n> **MANDATORY PRE-FLIGHT CHECK (上传前强制拦截检查)**\n> 当你要向一个**已存在的画板 Token** 写入内容时，**绝对禁止**直接执行上传命令！你必须严格遵守以下两步：\n> **强制执行 Dry Run（状态探测）**\n> 必须先在命令中添加 `--overwrite --dry-run` 参数来探测画板当前状态。示例命令：\n> ```bash\n> npx -y @larksuite\u002Fwhiteboard-cli@^0.1.0 --to openapi -i \u003C输入文件> --format json | lark-cli docs +whiteboard-update --whiteboard-token \u003CToken> --overwrite --dry-run --as user\n> ```\n>\n> **解析结果并拦截**\n> - 仔细阅读 Dry Run 的输出日志。\n> - **如果日志包含 `XX whiteboard nodes will be deleted`**：这说明画板**非空**，当前操作会覆盖并摧毁用户的原有图表！\n> - **你必须立即停止操作**，并通过 `AskUserQuestion` 工具（或直接回复）向用户确认：”目标画板当前非空，继续更新将清空原有的 XX 个节点，是否确认覆盖？”\n> - 只有在用户明确授权”同意覆盖”后，你才能移除 `--dry-run` 真正执行上传。\n> - 用户可能会要求你不覆盖更新画板内容，在这种情况下，移除 `--overwrite` 和 `--dry-run` 参数再上传。\n\n```bash\nnpx -y @larksuite\u002Fwhiteboard-cli@^0.1.0 --to openapi -i \u003C输入文件> --format json | lark-cli docs +whiteboard-update --whiteboard-token \u003C画板Token> --yes --as user\n```\n> 画板一经上传不可修改。如需应用身份上传，将 `--as user` 替换为 `--as bot`。\n> 如果画板非空，先加 `--overwrite --dry-run` 检查待删除节点数，向用户确认后去掉 `--dry-run` 执行。\n\n**症状→修复表**（视觉审查发现问题时参照）：\n\n| 看到的问题 | 改什么 |\n|-----------|--------|\n| 文字被截断 | height 改为 fit-content |\n| 文字溢出容器右侧 | 增大 width，或缩短文字 |\n| 节点重叠粘连 | 增大 gap |\n| 节点挤成一团 | 增大 padding 和 gap |\n| 连线穿过节点 | 调整 fromAnchor\u002FtoAnchor 或增大间距 |\n| 大面积空白 | 缩小外层 frame 宽度 |\n| 文字和背景色太接近 | 调整 fillColor 或 textColor |\n| 布局整体偏左\u002F偏右 | 调整绝对定位的 x 坐标使内容居中 |\n\n---\n\n## 渲染前自查\n\n生成 DSL 后、渲染前，快速检查：\n\n- [ ] 不同分组用了不同颜色？同组节点样式完全一致？\n- [ ] 外层浅色背景、内层白色节点？（外重内轻）\n- [ ] 所有节点有边框（borderWidth=2）？文字在背景上清晰可读？\n- [ ] 连线用灰色（#BBBFC4），不用彩色？\n- [ ] frame 都写了 layout 属性？gap 和 padding 都显式设置了？\n- [ ] 含文字节点 height 用 fit-content？connector 在顶层 nodes 数组？\n\n---\n\n## 关键约束速查\n\n> 最高频出错的规则，即使不读子模块文件也必须遵守。\n\n1. **含文字节点的 height 必须用 `'fit-content'`** — 写死数值会截断文字\n2. **`fill-container` 仅在 flex 父容器中生效** — `layout: 'none'` 下宽度退化为 0\n3. **connector 必须放在顶层 nodes 数组** — 不能嵌套在 frame children 里\n4. **图层顺序** — 数组顺序 = 绘制顺序。后定义的元素层级越高，会覆盖先定义的。重叠\u002F浮层\u002F标注元素务必放在数组末尾。\n5. **flex 容器内的 x\u002Fy 会被完全忽略** — 需要自由定位时用 `layout: 'none'` 或放在顶层 nodes\n\n❌ 致命错误：flex 容器内设 x\u002Fy，坐标不生效，节点按顺序排列\n```json\n{ \"type\": \"frame\", \"layout\": \"vertical\", \"children\": [\n  { \"type\": \"rect\", \"x\": 100, \"y\": 0, \"text\": \"成都\" },\n  { \"type\": \"rect\", \"x\": 540, \"y\": 0, \"text\": \"康定\" }\n]}\n```\n✅ 正确：用 `layout: \"none\"` 或放在顶层 nodes 用 x\u002Fy 定位。\n",{"name":5,"metadata":39,"description":43,"compatibility":44},{"requires":40},{"bins":41},[42],"lark-cli","当用户要求在飞书云文档中绘制图表，或使用飞书画板绘制架构图、流程图、思维导图、时序图或其他可视化图表时使用此 skill。\n","Requires Node.js 18+","main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":55,"prompt":65,"zipAvailable":66},[56,59,62],{"tool":57,"command":58},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill lark-whiteboard",{"tool":60,"command":61},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill lark-whiteboard",{"tool":63,"command":64},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill lark-whiteboard","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002FSKILL.md",true,[68,74,78,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142],{"path":69,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":72,"sourceHtmlUrl":73},"references\u002Fconnectors.md","REFERENCE","参考文档",4572,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Freferences\u002Fconnectors.md",{"path":75,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":76,"sourceHtmlUrl":77},"references\u002Fcontent.md",1512,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Freferences\u002Fcontent.md",{"path":79,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":80,"sourceHtmlUrl":81},"references\u002Flayout.md",9885,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Freferences\u002Flayout.md",{"path":83,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":84,"sourceHtmlUrl":85},"references\u002Fschema.md",9371,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Freferences\u002Fschema.md",{"path":87,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":88,"sourceHtmlUrl":89},"references\u002Fstyle.md",10445,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Freferences\u002Fstyle.md",{"path":91,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":92,"sourceHtmlUrl":93},"references\u002Ftypography.md",1966,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Freferences\u002Ftypography.md",{"path":95,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":96,"sourceHtmlUrl":97},"scenes\u002Farchitecture.md",21944,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Fscenes\u002Farchitecture.md",{"path":99,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":100,"sourceHtmlUrl":101},"scenes\u002Fbar-chart.md",7981,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Fscenes\u002Fbar-chart.md",{"path":103,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":104,"sourceHtmlUrl":105},"scenes\u002Fcomparison.md",7595,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Fscenes\u002Fcomparison.md",{"path":107,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":108,"sourceHtmlUrl":109},"scenes\u002Ffishbone.md",9963,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Fscenes\u002Ffishbone.md",{"path":111,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":112,"sourceHtmlUrl":113},"scenes\u002Fflywheel.md",8942,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Fscenes\u002Fflywheel.md",{"path":115,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":116,"sourceHtmlUrl":117},"scenes\u002Ffunnel.md",4320,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Fscenes\u002Ffunnel.md",{"path":119,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":120,"sourceHtmlUrl":121},"scenes\u002Fline-chart.md",9554,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Fscenes\u002Fline-chart.md",{"path":123,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":124,"sourceHtmlUrl":125},"scenes\u002Fmermaid.md",3282,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Fscenes\u002Fmermaid.md",{"path":127,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":128,"sourceHtmlUrl":129},"scenes\u002Fmilestone.md",4098,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Fscenes\u002Fmilestone.md",{"path":131,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":132,"sourceHtmlUrl":133},"scenes\u002Forganization.md",8507,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Fscenes\u002Forganization.md",{"path":135,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":136,"sourceHtmlUrl":137},"scenes\u002Fpyramid.md",4010,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Fscenes\u002Fpyramid.md",{"path":139,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":140,"sourceHtmlUrl":141},"scenes\u002Ftreemap.md",6383,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Fscenes\u002Ftreemap.md",{"path":143,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":144,"sourceHtmlUrl":145},"skill-report.json",12895,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Flarksuite\u002Flark-whiteboard\u002Fskill-report.json",[147,157,167,176,182,189],{"skillNo":148,"name":149,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":153,"publishedAt":34},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[152],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[154,155,156],"model","model hierarchy","model hierarchy skill",{"skillNo":158,"name":159,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":160,"categories":161,"keywords":163,"publishedAt":34},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[162],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[164,165,166],"MCP","zoom","zoom mcp",{"skillNo":168,"name":169,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":172,"publishedAt":34},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[173,174,175,165],"sdk","zoom apps sdk","apps",{"skillNo":177,"name":178,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":179,"categories":180,"keywords":181,"publishedAt":34},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[178],{"skillNo":183,"name":184,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":185,"categories":186,"keywords":188,"publishedAt":34},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[187],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[184],{"skillNo":190,"name":191,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":192,"categories":193,"keywords":194,"publishedAt":34},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[191]]