Agent skill · design visual · aiskillstore
lark-whiteboard-cli
当用户要求或使用飞书画板绘制架构图、流程图、思维导图、时序图或其他可视化图表时使用此 skill，作为使用 whiteboard-cli 设计图表布局的指南
Why this skill is useful
Provides detailed workflows and layout strategies for using the Lark whiteboard CLI that are not commonly known.
What it needs
Requires lark-cli installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
[!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 布局是可选增强。 布局策略快速判断（详见 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 思维导图、时序图、类图、饼图 --- 文件产物规范 每次绘图在 ./diagrams/ 下按当前时间创建子目录（格式 YYYY-MM-DDTHHMMSS），目录内文件名固定。用户指定了保存路径时以用户为准。 CLI 命令 查看可用图标： …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/lark-whiteboard-cli