lark-whiteboardlisted

# Whiteboard Cli Skill > [!NOTE] > **环境依赖**：绘制画板需要 `@larksuite/whiteboard-cli`（画板 Node.js CLI 工具），以及 `lark-cli`（LarkSuite CLI 工具）。 > 如果执行失败，手动安装后重试：`npm install -g @larksuite/whiteboard-cli@^0.1.0` > [!IMPORTANT] > 执行 `npm install` 安装新的依赖前，务必征得用户同意！ ## Workflow > **这是画板，不是网页。** 画板是无限画布上自由放置元素，flex 布局是可选增强。 ``` Step 1: 路由 & 读取知识 - 判断渲染路径（见路由表）：Mermaid 还是 DSL？ - 读对应 scene 指南 — 了解结构特征和布局策略 - 确定布局策略（见下方快速判断）和构建方式 - 读 references/ 核心模块 — 语法、布局、配色、排版、连线 Step 2: 生成完整 DSL（含颜色） - 按 content.md 规划信息量和分组 - 按 layout.md 选择布局模式和间距 - 按 style.md 上色（用户没指定时用默认经典色板） - 按 schema.md 语法输出完整 JSON - 连线参考 connectors.md，排版参考 typography.md 注意：部分图形（鱼骨/飞轮/柱状/折线等）等, 要按 scene 指南的脚本模板写 .js 脚本生成 JSON： - node xxx.js → 产出 JSON 文件 - 用产出的 JSON 文件进入 Step 3 Step 3: 渲染 & 审查 → 交付 - 渲染前自查（见下方检查清单） - 渲染 PNG，检查： · 信息完整？布局合理？配色协调？ · 文字无截断？连线无交叉？ - 有问题 → 按症状表修复 → 重新渲染（最多 2 轮） - 2 轮后仍有严重问题 → 考虑走 Mermaid 路径兜底 - 没问题 → 交付： · 用户要求上传飞书 → 见下方”上传飞书画板”章节中的说明 · 用户未指定 → 展示 PNG 图片给用户 ``` **布局策略快速判断**（详见 layout.md）： | 判断条件 | 布局策略 | 构建方式 | |----------|----------|----------| | 有明确上下层级（用户层→服务层→数据层） | Flex 分层 | 直接写 JSON | | 空间位置承载信息（地理、拓扑、角度） | 纯绝对定位 | 写脚本算坐标（node xxx.js） | | 多个独立模块平级互联 | 混合（岛屿式） | 直接写 JSON + 估高辅助 | | 不确定 | 默认 Flex（最安全） | 直接写 JSON | > **构建方式是强约束**：当 scene 指南要求"脚本生成"时，必须先写脚本（.js）并用 `node` 执行来产出 JSON 文件。绝对定位场景（鱼骨图、飞轮图、柱状图、折线图等）的坐标需要数学计算，直接手写 JSON 极易导致节点重叠或连线穿模。 --- ## 渲染路径选择（DSL or Mermaid） | 图表类型 | 路径 | 理由 | |----------|------|------| | 思维导图 | **Mermaid** |