skills.rest
yuezhen-huang
yuezhen-huangCOMMUNITY
Explore all skills by this author →
GitHub

lark-whiteboard

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

Updated Apr 30, 2026
Search Tags:#mermaid#visualization#diagram#feishu#lark#whiteboard#architecture diagram
One-click install
npx skills add https://github.com/yuezhen-huang/my-bytedance-skillhub --skill lark-whiteboard-yuezhen-huang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lark-whiteboard
Source: https://github.com/yuezhen-huang/my-bytedance-skillhub/tree/main/lark-whiteboard
Command: npx skills add https://github.com/yuezhen-huang/my-bytedance-skillhub --skill lark-whiteboard-yuezhen-huang

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 visualizations inside Lark (Feishu) docs 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 Lark whiteboard via CLI. ## 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 the precise whiteboard DSL with flex layout and absolute positioning. - Scene-specific guides: Ships reference modules for architecture diagrams, organization charts, comparison tables, fishbone diagrams, bar/line charts, funnels, flywheels, pyramids, treemaps, and milestones, including script templates that compute coordinates with Node.js. - Safe whiteboard upload: Uploads rendered diagrams to Lark whiteboards through 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; it plans the layered layout, generates DSL JSON, renders a PNG for review, fixes visual issues, and uploads the final diagram into your Feishu doc's whiteboard. ## Quick Start Use the lark-whiteboard skill to draw a layered microservices architecture diagram and upload it to my Feishu document.

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 Lark whiteboard with AI?▼

Describe the diagram you want, and the skill plans the content, generates whiteboard DSL JSON or a Mermaid file, renders a PNG with @larksuite/whiteboard-cli, and optionally uploads it to your Feishu whiteboard via lark-cli.

When should I use Mermaid versus the whiteboard DSL?▼

Mermaid is used automatically for mind maps, sequence diagrams, class diagrams, pie charts, and flowcharts because its auto-layout fits those structures. All other chart types use the DSL path for precise control over layout, color, and typography.

What dependencies are required to render whiteboard diagrams?▼

You need Node.js 18 or later, the @larksuite/whiteboard-cli package (installed via npm) for rendering PNGs, and lark-cli for authenticated uploads to Feishu whiteboards.

Will uploading overwrite my existing whiteboard content?▼

The skill enforces a mandatory dry-run check with --overwrite --dry-run before writing to an existing whiteboard token. If nodes would be deleted, it stops and asks for your explicit confirmation before proceeding.

Why does my rendered diagram have overlapping nodes or truncated text?▼

Common causes are fixed heights on text nodes instead of fit-content, missing gap or padding values, and x/y coordinates inside flex containers where they are ignored. The skill's symptom-to-fix table maps each visual issue to the exact DSL property to change.

Can I generate complex charts like fishbone or flywheel diagrams?▼

Yes, but these require script-generated coordinates. The skill provides Node.js script templates that compute positions with trigonometry or polar coordinates, output JSON, and then render through the whiteboard CLI.

Related Skills

Explore More Design & Creative Skills→
cndoit18cndoit18
11

excalidraw

Generate .excalidraw architecture diagrams from codebase analysis.

Community
Advanced
MiniMax-AIMiniMax-AI
1.3k

lark-whiteboard-cli

Generate and render diagrams on Lark whiteboards using DSL or Mermaid via whiteboard-cli.

Official
Advanced
echonoshyechonoshy
28

lark-shared

Manage Feishu/Lark authorization, identity switching, and permissions via lark-cli.

Community
Intermediate
xpert-aixpert-ai
8

index

Convert Mermaid drafts into editable draw.io diagrams with version tracking.

Official
Intermediate