Lark Whiteboard Cli
Generate architecture, flow, mind-map, and sequence diagrams on Lark/Feishu whiteboards via whiteboard-cli DSL or Mermaid when a solo builder needs shareable visuals without designing slides by hand.
Overview
Lark Whiteboard CLI is an agent skill most often used in Build (also Validate scope, Operate infra) that turns architecture and process descriptions into Lark whiteboard DSL or Mermaid renders via whiteboard-cli.
Install
npx skills add https://github.com/larksuite/cli --skill lark-whiteboard-cliWhat is this skill?
- Three-step workflow: route Mermaid vs DSL, generate colored JSON (or diagram.gen.js for special chart types), render PNG
- References-driven layout: Flex for structured blocks, Dagre for relationship chains, scene guides for fishbone, flywheel
- Optional Lark upload path plus local PNG delivery when Feishu is not required
- Global npm deps (@larksuite/whiteboard-cli, lark-cli) with explicit user consent before install
- Pre-render checklist covering completeness, truncation, connector crossings, and Mermaid fallback after failed iteration
- 3-step workflow (route → DSL → render)
- Up to 2 render review rounds before Mermaid fallback
- Requires Node.js 18+ and lark-cli on PATH
Adoption & trust: 16.8k installs on skills.sh; 13.7k GitHub stars; 1/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need professional system and process diagrams in Lark’s whiteboard format but lack a repeatable layout, styling, and render loop your coding agent can execute.
Who is it for?
Solo builders on Lark/Feishu who want agent-driven architecture, flow, and mind-map boards with consistent spacing, icons, and connector rules.
Skip if: Teams that forbid global npm installs without approval workflows, or builders who only need quick Mermaid in markdown with no Lark delivery.
When should I use this skill?
When the user requests Feishu/Lark whiteboard drawings—architecture, flow, mind-map, sequence, or other visual charts—or asks to use whiteboard-cli for layout.
What do I get? / Deliverables
After the workflow you get a reviewed PNG (and optional Feishu upload) from validated diagram JSON or Mermaid, with layout fixes applied across at most two render passes.
- diagram.json or diagram.gen.js output under ./diagrams/
- Reviewed PNG preview
- Optional Feishu whiteboard upload
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Diagram deliverables land in the build phase as living documentation, but the same skill supports early architecture sketches during validation and runbooks during operations. Docs is the canonical shelf because the workflow optimizes informational layout, typography, connectors, and PNG delivery for technical communication—not app UI implementation.
Where it fits
Map user journeys and service boundaries on a whiteboard before committing to a full build scope.
Publish a colored system architecture board with Flex grouping and Dagre dependency lanes for the team wiki.
Draw sequence diagrams for API flows with connector rules from references/connectors.md.
Visualize deployment topology and failure domains for an on-call runbook uploaded to Lark.
How it compares
Use for governed whiteboard DSL and Lark upload—not as a substitute for generic browser wireframing or static slide design tools.
Common Questions / FAQ
Who is lark-whiteboard-cli for?
Indie and small-team builders who document systems in Feishu/Lark and want their Claude, Cursor, or Codex agent to produce whiteboard-ready diagrams with CLI rendering.
When should I use lark-whiteboard-cli?
Use it during Validate when sketching scope and flows, during Build when publishing architecture and sequence docs, and during Operate when diagramming infra or incident paths—especially when the user asks for 飞书画板 or whiteboard-cli output.
Is lark-whiteboard-cli safe to install?
The skill may run global npm installs only after user consent; review the Security Audits panel on this Prism page and pin @larksuite/whiteboard-cli versions before allowing network installs.
SKILL.md
READMESKILL.md - Lark Whiteboard Cli
> [!NOTE] > **环境依赖**：绘制画板需要 `@larksuite/whiteboard-cli`（画板 Node.js CLI 工具），以及 `lark-cli`（LarkSuite CLI 工具）。 > 如果执行失败，手动安装后重试：`npm install -g @larksuite/whiteboard-cli@^0.2.0` > [!IMPORTANT] > 执行 `npm install` 安装新的依赖前，务必征得用户同意！ ## Workflow > **这是画板，不是网页。** 画板是无限画布上自由放置元素，flex 布局是可选增强。 ``` Step 1: 路由 & 读取知识 - 判断渲染路径（见路由表）：Mermaid 还是 DSL？ - 读对应 scene 指南 — 了解结构特征和布局策略 - 确定布局策略（见下方快速判断）和构建方式 - 读 references/ 核心模块 — 语法、布局、配色、排版、连线 Step 2: 生成完整 DSL（含颜色） - 按 content.md 规划信息量和分组 - 按 layout.md 选择布局模式和间距 - 推荐使用图标让图表更直观，运行 `npx -y @larksuite/whiteboard-cli@^0.2.0 --icons` 查看可用图标，选取合适的图标, 但不要过度使用或者所有图表都用图标, 根据图表类型和内容选择是否使用图标 - 按 style.md 上色（用户没指定时用默认经典色板） - 按 schema.md 语法输出完整 JSON - 连线参考 connectors.md，排版参考 typography.md 注意：部分图形（鱼骨/飞轮/柱状/折线等）要按 scene 指南的脚本模板写 .js 脚本生成 JSON： 1. 创建产物目录 ./diagrams/YYYY-MM-DDTHHMMSS/ 2. 将脚本保存为 diagram.gen.js，执行 node diagram.gen.js 产出 diagram.json 3. 用产出的 diagram.json 进入 Step 3 Step 3: 渲染 & 审查 → 交付 - 渲染前自查（见下方检查清单） - 渲染 PNG，检查： · 信息完整？布局合理？配色协调？ · 文字无截断？连线无交叉？ - 有问题 → 按症状表修复 → 重新渲染（最多 2 轮） - 2 轮后仍有严重问题 → 考虑走 Mermaid 路径兜底 - 没问题 → 交付： · 用户要求上传飞书 → 见下方”上传飞书画板”章节中的说明 · 用户未指定 → 展示 PNG 图片给用户 ``` **布局策略快速判断**（详见 `references/layout.md`）： 先定**主布局**，再定子布局：**结构化信息**优先用 Flex，**关系链路**优先用 Dagre，**灵活定位**用绝对布局。 涉及 Dagre / Flex 的具体边界、危险模式、混合布局原则，统一以 `references/layout.md` 为准；scene 文件只描述场景差异，不重复定义通用布局规则。 > **构建方式是强约束**：当 scene 指南要求"脚本生成"时，必须先写脚本（.js）并用 `node` 执行来产出 JSON 文件。绝对定位场景（鱼骨图、飞轮图、柱状图、折线图等）的坐标需要数学计算，直接手写 JSON 极易导致节点重叠或连线穿模。 --- ## 渲染路径选择（DSL or Mermaid） | 图表类型 | 路径 | 理由 | | ------------ | ----------- | ------------------- | | 思维导图 | **Mermaid** | 辐射结构自动布局 | | 时序图 | **Mermaid** | 参与方+消息自动排列 | | 类图 | **Mermaid** | 类关系自动布局 | | 饼图 | **Mermaid** | Mermaid 原生支持 | | 其他所有类型 | **DSL** | 精确控制样式和布局 | **路由规则**： 1. **自动 Mermaid**：思维导图、时序图、类图、饼图 → 默认走 Mermaid 2. **显式 Mermaid**：用户输入包含 Mermaid 语法 → 走 Mermaid 3. **DSL 路径**：其他所有类型 → 先读核心模块，再读对应场景指南 **Mermaid 路径**：参考 `scenes/mermaid.md` 编写 `.mmd` 文件，跳过 DSL 模块。 **DSL 路径**：按 Workflow 3 步执行。 --- ## 模块索引 ### 核心参考（DSL 路径必读） | 模块 | 文件 | 说明 | | -------- | -------------------------- | ------------------------------- | | DSL 语法 | `references/schema.md` | 节点类型、属性、尺寸值 | | 内容规划 | `references/content.md` | 信息提取、密度决策、连线预判 | | 布局系统 | `references/layout.md` | 网格方法论、Flex 映射、间距规则 | | 排版规则 | `references/typography.md` | 字号层级、对齐、行距 | | 连线系统 | `references/connectors.md` | 拓扑规划、锚点选择 | | 配色系统 | `references/style.md` | 多色板、视觉层级 | ### 场景指南（按类型选读一个） | 图表类型 | 文件 | 适用场景 | | ----------- | ------------------------ | -------------------------------------- | | 架构图 | `scenes/architecture.md` | 分层架构、微服务架构 | | 组织架构图 | `scenes/organization.md` | 公司组织、树形层级 | | 泳道图 | `scenes/swimlane.md` | 跨角色流程、跨系统交互流程、端到端链路 | | 对比图 | `scenes/comparison.md` | 方案对比、功能矩阵 | | 鱼骨图 | `scenes/fishbone.md` | 因果分析、根因分析 | | 柱状图 | `scenes/bar-chart.md` | 柱状图、条形图 | | 折线图 | `scenes/line-chart.md` | 折线图、趋势图 | | 树状图 | `scenes/treemap.md` | 矩形树图、层级占比 | | 漏斗图 | `scenes/funnel.md` | 转化漏斗、销售漏斗 | | 金字塔图 | `scenes/pyramid.md` | 层级结构、需求层次 | | 循环/飞轮图 | `scenes/flywheel.md` | 增长飞轮、闭环链路 | | 里程碑 | `scenes/milestone.md` | 时间线、版本演进 | | 流程图 | `scenes/flowchart.md` | 业务流、状态机、带条件判断的链路 | | Mermaid | `scenes/mermaid.md`