lark-whiteboard

Generate and render diagrams on Lark whiteboards using DSL JSON or Mermaid.

Updated Jan 10, 2026
One-click install
npx skills add https://github.com/Rabbit-Ivan/Ivan-skills --skill lark-whiteboard-rabbit-ivan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lark-whiteboard
Source: https://github.com/Rabbit-Ivan/Ivan-skills/tree/main/skills/lark-whiteboard
Command: npx skills add https://github.com/Rabbit-Ivan/Ivan-skills --skill lark-whiteboard-rabbit-ivan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @larksuite/whiteboard-cli, lark-cli, and includes references (resource) components.

What problem does it solve? Creating architecture diagrams, flowcharts, fishbone charts, funnels, and other visuals inside Feishu (Lark) cloud documents normally requires manual drawing on the whiteboard canvas. This Skill automates the entire pipeline: planning content, generating whiteboard DSL JSON or Mermaid files, rendering PNG previews, and uploading the result to a Feishu whiteboard. ## Core Features & Use Cases - Dual rendering paths: Automatically routes mind maps, sequence diagrams, class diagrams, pie charts, and flowcharts to Mermaid, while all other chart types use a precise whiteboard DSL with flex layout and absolute positioning. - 12 scene guides: Covers architecture diagrams, org charts, comparison matrices, fishbone diagrams, bar/line charts, treemaps, funnels, pyramids, flywheels, milestones, and Mermaid, with script-based coordinate generation for geometry-heavy charts. - Safe Feishu upload: Uploads rendered diagrams to Feishu whiteboards via lark-cli with a mandatory dry-run check that warns before overwriting non-empty boards. - Use Case: Ask the agent to draw a microservices architecture diagram in a Feishu doc; it generates layered DSL JSON, renders a PNG for review, fixes layout issues, and uploads it to the target whiteboard after confirmation. ## Quick Start Ask the agent to draw an architecture diagram of your system on a Feishu whiteboard and provide the document URL or whiteboard token.

Frequently Asked Questions about lark-whiteboard

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I draw a diagram on a Feishu whiteboard from the command line?▼

Generate a whiteboard DSL JSON file or a Mermaid .mmd file, then render it with npx @larksuite/whiteboard-cli using -i for input and -o for the PNG output. To place it in Feishu, pipe the CLI's openapi JSON output into lark-cli docs +whiteboard-update with your whiteboard token.

When should I use Mermaid versus the whiteboard DSL for diagrams?▼

Use Mermaid for mind maps, sequence diagrams, class diagrams, pie charts, and flowcharts because its auto-layout handles those structures well. Use the DSL path for everything else, such as architecture diagrams, funnels, and fishbone charts, where precise control over layout, color, and spacing is needed.

What dependencies are required to render Lark whiteboard diagrams?▼

You need Node.js 18 or later, the @larksuite/whiteboard-cli package (version ^0.1.0) for rendering, and lark-cli for authenticated Feishu operations like fetching documents and uploading whiteboard content.

How do I upload a diagram to an existing Feishu whiteboard without losing content?▼

Run the upload command with --overwrite --dry-run first to see how many existing nodes would be deleted. If the board is non-empty, confirm with the user before removing --dry-run, or drop --overwrite entirely to append instead of replacing.

Why does text get truncated in rendered whiteboard nodes?▼

Text truncation happens when a node containing text uses a fixed height value. Set height to fit-content so the engine sizes the node to its content, since the whiteboard engine does not support overflow handling.

Why are my x/y coordinates ignored in whiteboard DSL layout?▼

Coordinates are ignored inside flex containers; children of a frame with layout horizontal or vertical are positioned automatically. Use layout: none on the parent frame or place the nodes at the top-level nodes array to position them with x/y.