飞书白板对比图/矩阵图实战指南基于 lark-whiteboard DSL 的方案对比与功能矩阵绘制【免费下载链接】cliThe official Lark/飞书 CLI tool, maintained by the larksuite team — built for humans and AI Agents. Covers core business domains including Messenger, Docs, Base, Sheets, Calendar, Mail, Tasks, Meetings, and more, with 200 commands and 20 AI Agent Skills.项目地址: https://gitcode.com/gh_mirrors/cli414/cli本文基于 lark-whiteboard 技能skills/lark-whiteboard的对比图场景指南系统讲解如何在飞书画板中用 Whiteboard DSL 绘制方案对比、功能矩阵、技术选型等多选项多维度对比图。你将掌握对比图的 Content 约束与两种布局选型严格 grid 与卡片式对比、完整的 DSL 骨架模板、可复用的配色与间距规则以及从本地渲染审查到lark-cli whiteboard update写入画板的完整交付链路。对比图场景定位什么时候用这张图对比图/矩阵图适用于多选项按多维度比较的场景典型用例包括方案对比技术选型如不同数据库、不同消息队列、不同框架在多维度上的能力对照功能矩阵同一产品多个版本免费版/专业版/企业版的功能支持情况竞品对比多款产品在性能、成本、生态、易用性等维度上的横向比较它在 lark-whiteboard 的场景指南体系中属于结构化信息优先用 Flex 布局的典型代表对比表本质是一个 grid纵向 frame 嵌套横向 frame与架构图、组织架构图同属网格方法论下的图表类型但结构更规整——行是维度、列是对象天然适合先画网格再填内容的网格方法论elements/layout.md。Content 约束每格内容要充实布局才不会塌对比图的信息密度直接决定图表质量。场景指南给出了五条硬性内容约束每格内容要充实不要只写一个关键词要给出具体说明。例如写MVCC 多版本并发控制支持行级锁而不是只写支持——关键词会让格子空旷、表意模糊具体说明才能承载技术选型场景下的真实信息量。单格长度不同格子允许不同长度但每格不超过 5 行防止某列被撑得过高破坏整体比例。长文本对齐超过 15 字即可能换行的文本用textAlign: left不要居中——居中多行文本可读性差。这与排版规则中长文本左对齐的原则一致。行列结构第一行是标题行对象名称第一列是维度标签列。维度数量至少 4 个维度充分展开对比维度。少于 4 个维度建议直接换用下面的卡片式对比布局。Layout 选型严格 grid 还是卡片式对比场景指南给出了两种布局模式按维度数量决策模式适用条件特征严格 grid默认所有对比场景表头行 数据行每行 horizontal frame行内 rect 等分卡片式对比替代维度较少2-3 个每个对象做一张独立卡片卡片内纵向列出各维度。卡片横向等分外层layout: horizontal每张卡片width: fill-container当维度少于 4 个时严格 grid 会出现列宽正常但行数太少的稀疏感此时把每个对象做成一张独立卡片卡片内用纵向布局列出各维度信息呈现更紧凑。卡片式对比与布局系统中横向等分并列元素的写法一致alignItems: stretchwidth: fill-container保证各卡片等宽等高。Layout 规则让表格整齐的关键六条对比图观感好坏几乎全部由下面六条 Layout 规则决定均可在骨架示例中一一对应验证最外层 framelayout: vertical固定width如 1000height: fit-content——表格总宽固定总高由内容决定避免固定高度导致文字截断。每行horizontal framewidth: fill-containeralignItems: stretch——行宽占满外框stretch 保证同行单元格因文字行数不同时仍等高见陷阱行高不等。行内单元格全部width: fill-container等分列宽不要给任何一列写固定宽度。行间gap 12不要用 88 会让行与行视觉粘连场景指南明确点名这个反例。行内列间gap: 8-12列间距比行距稍窄既保持分隔又不割裂同一行的对比关系。标题行深色底白字由 style 控制具体颜色经典色板下即fillColor: #1F2329、textColor: #FFFFFF见配色系统的表头规范。每列同色边框同一列的单元格使用同色边框保持视觉一致性——这正是配色系统中对比表有 3 列 → 每列表头一种颜色该列数据单元格用同色边框的具体落法。单元格height: fit-content不要写固定 height引擎不支持 overflow固定高度会截断文字。其中fill-container、fit-content、stretch这些尺寸与对齐值的语义对应 elements/schema.md 中的 WBSizeValue 表fill-container填满父级剩余空间等价 CSSflex: 1fit-content由内容决定大小等价 CSSwidth: autoalignItems: stretch是 Flexbox 的等高拉伸——注意 DSL 里alignItems默认值是start而非 CSS 默认的stretch所以等高必须显式声明alignItems: stretch。骨架示例3 列 4 行表格的完整 DSL场景指南给出了一个3 列 4 行维度列 3 个对象列含标题行共 4 行的完整可运行骨架。完整 JSON 结构如下{ version: 2, nodes: [ { type: frame, width: 1000, height: fit-content, layout: vertical, gap: 12, padding: 0, children: [ { type: text, id: title, width: fill-container, height: fit-content, text: [对比图标题], fontSize: 24, textAlign: center, verticalAlign: middle }, { type: frame, id: header-row, width: fill-container, height: fit-content, layout: horizontal, gap: 8, padding: 0, alignItems: stretch, children: [ { type: rect, id: h-dim, width: fill-container, height: fit-content, text: [维度], fontSize: 15, textAlign: center, verticalAlign: middle, borderRadius: 0, borderWidth: 2 }, { type: rect, id: h-col-1, width: fill-container, height: fit-content, text: [对象A], fontSize: 15, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: h-col-2, width: fill-container, height: fit-content, text: [对象B], fontSize: 15, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: h-col-3, width: fill-container, height: fit-content, text: [对象C], fontSize: 15, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 } ] }, { type: frame, id: data-row-1, width: fill-container, height: fit-content, layout: horizontal, gap: 8, padding: 0, alignItems: stretch, children: [ { type: rect, id: d1-dim, width: fill-container, height: fit-content, text: [维度1], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d1-c1, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d1-c2, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d1-c3, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 } ] }, { type: frame, id: data-row-2, width: fill-container, height: fit-content, layout: horizontal, gap: 8, padding: 0, alignItems: stretch, children: [ { type: rect, id: d2-dim, width: fill-container, height: fit-content, text: [维度2], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d2-c1, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d2-c2, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d2-c3, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 } ] }, { type: frame, id: data-row-3, width: fill-container, height: fit-content, layout: horizontal, gap: 8, padding: 0, alignItems: stretch, children: [ { type: rect, id: d3-dim, width: fill-container, height: fit-content, text: [维度3], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d3-c1, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d3-c2, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d3-c3, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 } ] } ] } ] }对骨架的要点解读结合 elements/schema.md 的节点语义顶层nodes数组只有 1 个垂直 frame其children依次为标题 text 和 4 个 horizontal frame1 个表头行 3 个数据行。标题行中维度列单元格用borderRadius: 0直角与数据列的borderRadius: 8形成区分——这正是标题行维度列用与数据列不同的视觉处理的具体实现。表头行字号 15、数据行字号 14表头用深色底白字样式见下数据格默认白底带边框。每个单元格都是rect节点width: fill-container等分height: fit-content自适应内容。行间gap: 12外层 frame 的 gap列间gap: 8行 frame 的 gap符合行间 12、列间 8-12的规则。需要增加维度时复制一个>npx -y larksuite/whiteboard-cli^0.2.13 -i diagram.json -o diagram.png渲染后按自查清单检查信息完整布局合理配色协调文字无截断连线无交叉发现问题按症状表修复如文字被截断 → height 改为 fit-content、节点重叠粘连 → 增大 gap最多重试 2 轮2 轮后仍有严重问题可考虑走 Mermaid 路径兜底见 routes/dsl.md。Step 3写入画板用 whiteboard-cli 将 DSL 转为 OpenAPI 格式并通过管道传给updatenpx -y larksuite/whiteboard-cli^0.2.13 -i diagram.json --to openapi --format json \ | lark-cli whiteboard update --whiteboard-token board_token \ --source - --input_format raw --idempotent-token 时间戳标识 --as user写入空画板时无需--overwrite默认 append 增量追加若画板已有内容且需要整板替换必须加--overwrite并先向用户确认会整板重建见更新画板文档。update 关键参数说明lark-cli whiteboard update的命令实现在 shortcuts/whiteboard/whiteboard_update.go 中其参数校验逻辑与文档一致参数必填说明含源码确认的细节--whiteboard-token是画板 token需拥有画板编辑权限含控制字符会被RejectDangerousCharsTyped拦截--idempotent-token否幂等 token最少 10 个字符源码len(itoken) 10直接返回校验错误建议时间戳 场景标识拼接如1744800000-board-1。同一次逻辑更新只生成一次重试时原样复用否则会重复写入--overwrite否写入模式带上则覆盖更新先删后写省略则增量追加默认 false--source是输入内容支持path读文件或-读 stdin--input_format否raw/plantuml/mermaid/svg默认raw源码getFormat中空值回落 raw从源码还可以看到两个实现事实raw 格式走POST /open-apis/board/v1/whiteboards/{token}/nodes创建节点plantuml/mermaid/svg 走POST /open-apis/board/v1/whiteboards/{token}/nodes/plantuml的图表导入接口syntax_type分别映射 0/1/2/3raw 路径解析的是 whiteboard-cli 的--to openapi输出格式WbCliOutput这也解释了为什么 DSL 产物必须先用 whiteboard-cli 转换。该命令需要board:whiteboard:node:create权限支持--as user与--as bot两种身份默认使用--as user。陷阱清单新手最容易翻车的七个点场景指南末尾的陷阱清单是实战中最有价值的反模式逐一对照行间距 8px 太紧行间 gap 至少 128 会让行与行视觉粘连。这是最常被忽略的一条——行 frame 之间靠外层 frame 的gap控制务必显式写 12 或以上。长文本居中超过一行的文本改textAlign: left居中多行文本可读性差。列数太多导致每列太窄对比对象建议 ≤ 5 列含维度列超过时合并维度或拆分为多张表。即 3 个对象列 1 个维度列已经接近上限。列宽不等所有数据列必须用width: fill-container等分不要给某列写固定宽度——固定宽度会破坏整张表的对齐。行高不等每行 frame 必须alignItems: stretch否则同行单元格因文字行数不同而高矮不齐。忘记维度标签列第一列放维度名称标题行维度列用与数据列不同的视觉处理骨架中用borderRadius: 0区分。单元格用固定 height单元格必须height: fit-content固定高度会导致文字截断引擎不支持 overflow。对照 routes/dsl.md 的渲染前自查清单对比图还额外要注意frame 都要写layout属性、gap和padding显式设置、含文字节点高度用fit-content、connector 放顶层nodes对比图通常无连线可忽略。与其它场景指南的关系对比图在 lark-whiteboard 的场景体系中与架构图共享网格/分区心智模型但对比图更强调行列对齐而架构图更强调层次分区若对比场景中需要体现对象间的流程或依赖关系比如在矩阵下方附加一条决策链则属于 flowchart 或 Dagre 布局的范畴见 elements/layout.md 的布局选择指南。所有场景共用的底层知识统一沉淀在 elements/schema.md语法、elements/layout.md布局、elements/style.md配色三个核心模块中编写对比图 DSL 前建议先通读这三份文档。【免费下载链接】cliThe official Lark/飞书 CLI tool, maintained by the larksuite team — built for humans and AI Agents. Covers core business domains including Messenger, Docs, Base, Sheets, Calendar, Mail, Tasks, Meetings, and more, with 200 commands and 20 AI Agent Skills.项目地址: https://gitcode.com/gh_mirrors/cli414/cli创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 飞书白板对比图/矩阵图实战指南：基于 lark-whiteboard DSL 的方案对比与功能矩阵绘制
飞书白板对比图/矩阵图实战指南基于 lark-whiteboard DSL 的方案对比与功能矩阵绘制【免费下载链接】cliThe official Lark/飞书 CLI tool, maintained by the larksuite team — built for humans and AI Agents. Covers core business domains including Messenger, Docs, Base, Sheets, Calendar, Mail, Tasks, Meetings, and more, with 200 commands and 20 AI Agent Skills.项目地址: https://gitcode.com/gh_mirrors/cli414/cli本文基于 lark-whiteboard 技能skills/lark-whiteboard的对比图场景指南系统讲解如何在飞书画板中用 Whiteboard DSL 绘制方案对比、功能矩阵、技术选型等多选项多维度对比图。你将掌握对比图的 Content 约束与两种布局选型严格 grid 与卡片式对比、完整的 DSL 骨架模板、可复用的配色与间距规则以及从本地渲染审查到lark-cli whiteboard update写入画板的完整交付链路。对比图场景定位什么时候用这张图对比图/矩阵图适用于多选项按多维度比较的场景典型用例包括方案对比技术选型如不同数据库、不同消息队列、不同框架在多维度上的能力对照功能矩阵同一产品多个版本免费版/专业版/企业版的功能支持情况竞品对比多款产品在性能、成本、生态、易用性等维度上的横向比较它在 lark-whiteboard 的场景指南体系中属于结构化信息优先用 Flex 布局的典型代表对比表本质是一个 grid纵向 frame 嵌套横向 frame与架构图、组织架构图同属网格方法论下的图表类型但结构更规整——行是维度、列是对象天然适合先画网格再填内容的网格方法论elements/layout.md。Content 约束每格内容要充实布局才不会塌对比图的信息密度直接决定图表质量。场景指南给出了五条硬性内容约束每格内容要充实不要只写一个关键词要给出具体说明。例如写MVCC 多版本并发控制支持行级锁而不是只写支持——关键词会让格子空旷、表意模糊具体说明才能承载技术选型场景下的真实信息量。单格长度不同格子允许不同长度但每格不超过 5 行防止某列被撑得过高破坏整体比例。长文本对齐超过 15 字即可能换行的文本用textAlign: left不要居中——居中多行文本可读性差。这与排版规则中长文本左对齐的原则一致。行列结构第一行是标题行对象名称第一列是维度标签列。维度数量至少 4 个维度充分展开对比维度。少于 4 个维度建议直接换用下面的卡片式对比布局。Layout 选型严格 grid 还是卡片式对比场景指南给出了两种布局模式按维度数量决策模式适用条件特征严格 grid默认所有对比场景表头行 数据行每行 horizontal frame行内 rect 等分卡片式对比替代维度较少2-3 个每个对象做一张独立卡片卡片内纵向列出各维度。卡片横向等分外层layout: horizontal每张卡片width: fill-container当维度少于 4 个时严格 grid 会出现列宽正常但行数太少的稀疏感此时把每个对象做成一张独立卡片卡片内用纵向布局列出各维度信息呈现更紧凑。卡片式对比与布局系统中横向等分并列元素的写法一致alignItems: stretchwidth: fill-container保证各卡片等宽等高。Layout 规则让表格整齐的关键六条对比图观感好坏几乎全部由下面六条 Layout 规则决定均可在骨架示例中一一对应验证最外层 framelayout: vertical固定width如 1000height: fit-content——表格总宽固定总高由内容决定避免固定高度导致文字截断。每行horizontal framewidth: fill-containeralignItems: stretch——行宽占满外框stretch 保证同行单元格因文字行数不同时仍等高见陷阱行高不等。行内单元格全部width: fill-container等分列宽不要给任何一列写固定宽度。行间gap 12不要用 88 会让行与行视觉粘连场景指南明确点名这个反例。行内列间gap: 8-12列间距比行距稍窄既保持分隔又不割裂同一行的对比关系。标题行深色底白字由 style 控制具体颜色经典色板下即fillColor: #1F2329、textColor: #FFFFFF见配色系统的表头规范。每列同色边框同一列的单元格使用同色边框保持视觉一致性——这正是配色系统中对比表有 3 列 → 每列表头一种颜色该列数据单元格用同色边框的具体落法。单元格height: fit-content不要写固定 height引擎不支持 overflow固定高度会截断文字。其中fill-container、fit-content、stretch这些尺寸与对齐值的语义对应 elements/schema.md 中的 WBSizeValue 表fill-container填满父级剩余空间等价 CSSflex: 1fit-content由内容决定大小等价 CSSwidth: autoalignItems: stretch是 Flexbox 的等高拉伸——注意 DSL 里alignItems默认值是start而非 CSS 默认的stretch所以等高必须显式声明alignItems: stretch。骨架示例3 列 4 行表格的完整 DSL场景指南给出了一个3 列 4 行维度列 3 个对象列含标题行共 4 行的完整可运行骨架。完整 JSON 结构如下{ version: 2, nodes: [ { type: frame, width: 1000, height: fit-content, layout: vertical, gap: 12, padding: 0, children: [ { type: text, id: title, width: fill-container, height: fit-content, text: [对比图标题], fontSize: 24, textAlign: center, verticalAlign: middle }, { type: frame, id: header-row, width: fill-container, height: fit-content, layout: horizontal, gap: 8, padding: 0, alignItems: stretch, children: [ { type: rect, id: h-dim, width: fill-container, height: fit-content, text: [维度], fontSize: 15, textAlign: center, verticalAlign: middle, borderRadius: 0, borderWidth: 2 }, { type: rect, id: h-col-1, width: fill-container, height: fit-content, text: [对象A], fontSize: 15, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: h-col-2, width: fill-container, height: fit-content, text: [对象B], fontSize: 15, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: h-col-3, width: fill-container, height: fit-content, text: [对象C], fontSize: 15, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 } ] }, { type: frame, id: data-row-1, width: fill-container, height: fit-content, layout: horizontal, gap: 8, padding: 0, alignItems: stretch, children: [ { type: rect, id: d1-dim, width: fill-container, height: fit-content, text: [维度1], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d1-c1, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d1-c2, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d1-c3, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 } ] }, { type: frame, id: data-row-2, width: fill-container, height: fit-content, layout: horizontal, gap: 8, padding: 0, alignItems: stretch, children: [ { type: rect, id: d2-dim, width: fill-container, height: fit-content, text: [维度2], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d2-c1, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d2-c2, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d2-c3, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 } ] }, { type: frame, id: data-row-3, width: fill-container, height: fit-content, layout: horizontal, gap: 8, padding: 0, alignItems: stretch, children: [ { type: rect, id: d3-dim, width: fill-container, height: fit-content, text: [维度3], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d3-c1, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d3-c2, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 }, { type: rect, id: d3-c3, width: fill-container, height: fit-content, text: [...], fontSize: 14, textAlign: center, verticalAlign: middle, borderRadius: 8, borderWidth: 2 } ] } ] } ] }对骨架的要点解读结合 elements/schema.md 的节点语义顶层nodes数组只有 1 个垂直 frame其children依次为标题 text 和 4 个 horizontal frame1 个表头行 3 个数据行。标题行中维度列单元格用borderRadius: 0直角与数据列的borderRadius: 8形成区分——这正是标题行维度列用与数据列不同的视觉处理的具体实现。表头行字号 15、数据行字号 14表头用深色底白字样式见下数据格默认白底带边框。每个单元格都是rect节点width: fill-container等分height: fit-content自适应内容。行间gap: 12外层 frame 的 gap列间gap: 8行 frame 的 gap符合行间 12、列间 8-12的规则。需要增加维度时复制一个>npx -y larksuite/whiteboard-cli^0.2.13 -i diagram.json -o diagram.png渲染后按自查清单检查信息完整布局合理配色协调文字无截断连线无交叉发现问题按症状表修复如文字被截断 → height 改为 fit-content、节点重叠粘连 → 增大 gap最多重试 2 轮2 轮后仍有严重问题可考虑走 Mermaid 路径兜底见 routes/dsl.md。Step 3写入画板用 whiteboard-cli 将 DSL 转为 OpenAPI 格式并通过管道传给updatenpx -y larksuite/whiteboard-cli^0.2.13 -i diagram.json --to openapi --format json \ | lark-cli whiteboard update --whiteboard-token board_token \ --source - --input_format raw --idempotent-token 时间戳标识 --as user写入空画板时无需--overwrite默认 append 增量追加若画板已有内容且需要整板替换必须加--overwrite并先向用户确认会整板重建见更新画板文档。update 关键参数说明lark-cli whiteboard update的命令实现在 shortcuts/whiteboard/whiteboard_update.go 中其参数校验逻辑与文档一致参数必填说明含源码确认的细节--whiteboard-token是画板 token需拥有画板编辑权限含控制字符会被RejectDangerousCharsTyped拦截--idempotent-token否幂等 token最少 10 个字符源码len(itoken) 10直接返回校验错误建议时间戳 场景标识拼接如1744800000-board-1。同一次逻辑更新只生成一次重试时原样复用否则会重复写入--overwrite否写入模式带上则覆盖更新先删后写省略则增量追加默认 false--source是输入内容支持path读文件或-读 stdin--input_format否raw/plantuml/mermaid/svg默认raw源码getFormat中空值回落 raw从源码还可以看到两个实现事实raw 格式走POST /open-apis/board/v1/whiteboards/{token}/nodes创建节点plantuml/mermaid/svg 走POST /open-apis/board/v1/whiteboards/{token}/nodes/plantuml的图表导入接口syntax_type分别映射 0/1/2/3raw 路径解析的是 whiteboard-cli 的--to openapi输出格式WbCliOutput这也解释了为什么 DSL 产物必须先用 whiteboard-cli 转换。该命令需要board:whiteboard:node:create权限支持--as user与--as bot两种身份默认使用--as user。陷阱清单新手最容易翻车的七个点场景指南末尾的陷阱清单是实战中最有价值的反模式逐一对照行间距 8px 太紧行间 gap 至少 128 会让行与行视觉粘连。这是最常被忽略的一条——行 frame 之间靠外层 frame 的gap控制务必显式写 12 或以上。长文本居中超过一行的文本改textAlign: left居中多行文本可读性差。列数太多导致每列太窄对比对象建议 ≤ 5 列含维度列超过时合并维度或拆分为多张表。即 3 个对象列 1 个维度列已经接近上限。列宽不等所有数据列必须用width: fill-container等分不要给某列写固定宽度——固定宽度会破坏整张表的对齐。行高不等每行 frame 必须alignItems: stretch否则同行单元格因文字行数不同而高矮不齐。忘记维度标签列第一列放维度名称标题行维度列用与数据列不同的视觉处理骨架中用borderRadius: 0区分。单元格用固定 height单元格必须height: fit-content固定高度会导致文字截断引擎不支持 overflow。对照 routes/dsl.md 的渲染前自查清单对比图还额外要注意frame 都要写layout属性、gap和padding显式设置、含文字节点高度用fit-content、connector 放顶层nodes对比图通常无连线可忽略。与其它场景指南的关系对比图在 lark-whiteboard 的场景体系中与架构图共享网格/分区心智模型但对比图更强调行列对齐而架构图更强调层次分区若对比场景中需要体现对象间的流程或依赖关系比如在矩阵下方附加一条决策链则属于 flowchart 或 Dagre 布局的范畴见 elements/layout.md 的布局选择指南。所有场景共用的底层知识统一沉淀在 elements/schema.md语法、elements/layout.md布局、elements/style.md配色三个核心模块中编写对比图 DSL 前建议先通读这三份文档。【免费下载链接】cliThe official Lark/飞书 CLI tool, maintained by the larksuite team — built for humans and AI Agents. Covers core business domains including Messenger, Docs, Base, Sheets, Calendar, Mail, Tasks, Meetings, and more, with 200 commands and 20 AI Agent Skills.项目地址: https://gitcode.com/gh_mirrors/cli414/cli创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考