夜雨聆风AI 画飞书白板：两个 Skill 搞定
lark-whiteboard 能查询画板、导出图片、拿到原始节点结构，也能用 Mermaid、DSL 去更新画板。配合 fireworks-tech-graph 和飞书 CLI，一句话就能让 AI 把架构图直接画到飞书白板上。安装简单，效果炸裂。
一、两个 Skill 各自干什么
这两个 Skill 是一对好搭档，各司其职：
fireworks-tech-graph — 自然语言出图
你用中文或英文描述想要画的系统，它自动生成出版级的 SVG + PNG 技术架构图。支持 7 种视觉风格（白底扁平、暗黑极客、工程蓝图、Notion 极简、毛玻璃、Claude 官方、OpenAI 官方），14 种 UML 图，40+ 产品图标。专门为 AI/Agent 场景优化，内置 RAG Pipeline、Multi-Agent、Tool Call 等领域模式。
lark-whiteboard — 飞书白板操控
飞书官方出品的白板 Skill，能查询画板 Token、导出 PNG、获取节点结构，以及通过 Mermaid 或 DSL（JSON）两种路径向白板写入内容。配合 lark-cli 的 200+ 命令，AI Agent 能直接操作飞书生态。
简单说：fireworks 负责画，lark-whiteboard 负责上板。两者结合，从"描述需求"到"白板出图"一条龙。
二、两条渲染路径：Mermaid vs DSL
lark-whiteboard 支持两种方式向白板写入内容，选哪条路径取决于你要画什么类型的图。
Mermaid 路径
适合思维导图、时序图、类图、饼图、流程图。自动布局，语法简洁，AI 直接生成 .mmd 文件即可渲染。结构稳定的图首选这条路径。
DSL (JSON) 路径
适合架构图、对比图、鱼骨图、柱状图、折线图等需要精确控制布局和样式的图。DSL 是 JSON 格式，可以指定每个节点的位置、大小、颜色、连线样式，还能使用 flex 容器分组。复杂图型选这条路径。
三、三步装好，即开即用
不需要复杂配置，三行命令就能开始用。
1安装 lark-cli + lark-whiteboard
npx skills add larksuite/cli --skill lark-whiteboard
如遇失败，手动安装：npm i -g @larksuite/whiteboard-cli@^0.1.0
2安装 fireworks-tech-graph
npx skills add yizhiyanhua-ai/fireworks-tech-graph
可选：pip install cairosvg（PNG 高清渲染）
3告诉 AI，让它俩合作
画一张微服务架构图，上传到飞书白板
AI 会自动：生成图 → 转为 DSL/Mermaid → 上传到白板
四、实战：一句话搞定 RAG 架构图
来看一个完整的实战案例。假设你要在飞书文档中画一张 RAG Pipeline 架构图，蓝图风格。
你只需要说一句话：
👤 你的输入
帮我画一个 RAG Pipeline 架构图，蓝图风格，上传到飞书文档里的白板
AI 自动执行四步：
| 步骤 | 动作 | 说明 |
|---|---|---|
| 1 | 识别图类型 | RAG Pipeline → 架构图，蓝图风格 → Style 3 |
| 2 | 生成图表 | fireworks-tech-graph 输出 SVG + PNG |
| 3 | 转为白板 DSL | SVG → JSON DSL，精确节点和连线定义 |
| 4 | 上传飞书白板 | lark-whiteboard 渲染到指定画板 |
最终结果：飞书文档中自动出现白板，白板上渲染了完整的 RAG Pipeline 架构图，蓝图风格，专业级视觉效果，还可以直接在飞书中二次编辑或导出 PNG/SVG 分享给团队。
五、关键命令速查
把常用命令整理在这里，随用随查。
查询画板 Token
lark-cli docs +fetch --doc <URL> --as user
从返回的 <whiteboard token="XXX"/> 中提取 token
导出图片（DSL 路径）
npx @larksuite/whiteboard-cli@^0.1.0 -i my-diagram.json -o ./images/my-diagram.png
导出图片（Mermaid 路径）
npx @larksuite/whiteboard-cli@^0.1.0 -i diagram.mmd -o ./images/diagram.png
上传到白板
npx @larksuite/whiteboard-cli@^0.1.0 --to openapi -i <file> --format json | lark-cli docs +whiteboard-update --whiteboard-token <Token> --yes --as user
⚠️ 向已有画板写入前，必须先加 --dry-run 检查，确认不会被覆盖再执行
写在最后
装好两个 Skill，告诉 AI 让它们合作，就这么简单。以后再也不用打开 draw.io 手动拖拽半天，也不用纠结 Mermaid 语法到底对不对——自然语言描述你想要的架构，AI 帮你画好直接上板。
lark-whiteboard 9.7 万次安装，fireworks-tech-graph 6.7k Star，两个工具都经过大量用户验证，开箱即用。
本文由 5G创见 原创出品
lark-cli: github.com/larksuite/cli | fireworks-tech-graph: github.com/yizhiyanhua-ai/fireworks-tech-graph
