### [TLDraw白板画图](https://ilovefree.com/)

**Published:** 2026-11-07T01:00:00

**Author:** 爱神

**Excerpt:** TLDraw白板画图是一款开源免费的无限画布白板，支持实时协作、手绘风格、智能箭头和AI草图转代码，开发者与设…

## TLDraw白板画图是什么：SDK优先的无限画布白板

TLDraw白板画图是一款开源、免费、可嵌入的在线白板工具。想给产品嵌一块白板又不想从零造轮子，GitHub 上超过 4.7 万 star（GitHub，2026-05）的这款平台是现成答案。

这款开源白板工具定位是可嵌入的白板组件库。tldraw.com 开箱即用，React 开发者能把画布装进自家产品，SDK 优先于独立应用。

## AI能力：Make It Real与tldraw computer

据菜鸟教程和 AI 工具集官网信息，无限画布、实时协作、手绘、智能箭头、捕捉、便签这些白板基本功它都有。真正的差异点是两个 AI 功能。

### AI草图转代码（Make It Real）

Make It Real 把手绘 UI 草图转换成 HTML/CSS/JS 代码，入口在 makereal.tldraw.com。

### tldraw computer

tldraw computer 在无限画布上用流程图搭建 AI 自动化系统。画出来、连起来就能跑，不用写代码，属于实验性功能。

据腾讯云介绍，开发者用 React 组件即可直接集成，还能扩展自定义形状和工具。

## 典型工作流：从实时协作到导出成品

从打开 TLDraw白板画图 到交付成品，按以下步骤操作。

1.  访问 tldraw.com，无需注册即可开始绘图。
2.  用画笔、形状、文本创建内容。
3.  通过分享链接邀请他人实时协作。
4.  导出为 PNG、SVG、JSON，或保存为 .tldr 文件（拖回可继续编辑）。
5.  要 AI 生成代码，打开 makereal.tldraw.com 并输入 OpenAI API 密钥。

## 从真实需求看契合度

远程团队头脑风暴时，实时协作加手绘能降低沟通门槛。设计师快速出原型，可用 Make It Real 把草图转成可运行代码。教师在线授课，能实时演示教学图表和思维导图。

这三类场景分别对应协作、原型和教学需求。

## 免费层的边界与隐性成本

核心白板功能免费，商业生产用 SDK 需授权。代价体现在以下方面。

-   商业授权需经官网表单与销售团队洽谈定价，官网未公开统一价目。
-   Make It Real 需自行提供 OpenAI API 密钥，并产生 API 调用费用。
-   SDK 提供 100 天免费试用期，到期后商业生产使用需付费授权。

据博客园信息，tldraw 从 3.0 起调整许可。以前商业使用需 license，现在可直接使用但保留水印。

## TLDraw白板画图 上手容易踩的误区

-   误以为 Make It Real 免费——实际要自备 OpenAI 密钥，按调用量付费。
-   在复杂流程图中依赖连线自动避让——节点一多就得手动调整布线。
-   期望精细图形设计——形状填充选项不如 Miro 完善。
-   忽略 .tldr 格式——保存后需用 tldraw 打开。

一个意想不到的用例：用 tldraw computer 把 AI 逻辑画成流程图，连起来就是一个自动化系统。

新用户上手第一步：打开 tldraw.com，画一张简单的流程图，导出为 PNG。



---