Tldraw 实用指南 - 在线方便的画图工具

a year ago

什么是 Tldraw？

你有没有遇到过这样的情况：

开会时想画个流程图，但纸笔太慢，电脑上的工具又太复杂
想跟同事协作讨论设计，但大家都在不同地方
有个产品想法，想快速画个原型，但不会代码

如果你也有这些困扰，那今天推荐的这个工具绝对能帮忙 - Tldraw。

Tldraw 是一个开源的无限画布白板工具，简单来说就是一个在线画板。

https://appstore.lazycat.cloud/#/shop/detail/wcloud.gblw.app.tldraw

快速上手指南

基础使用

商店安装之后，打开就能用，无需注册

基本工具：

🖊️ 画笔 - 自由绘画，有手绘效果
📦 形状 - 矩形、圆形、箭头等
📝 文本 - 添加文字说明
🗒️ 便签 - 类似Post-it便签纸
🖼️ 图片 - 上传图片到画布
✋ 选择 - 选择、移动、缩放元素

左侧是常规的菜单

右侧可以设置颜色、字体等

保存和导出

自动保存 - 内容会自动保存在浏览器本地
导出图片 - 支持PNG、SVG格式
导出数据 - 可以导出.tldr文件，方便备份

Tldraw的手绘风格是它的特色，但你可以调整：

选中元素后，右侧面板可以调整样式
可以选择实线、虚线、点线
可以调整粗细和颜色
可以选择填充样式

导出技巧

导出高质量图片：

选中要导出的区域
右键选择"Export as PNG"
可以设置背景色和分辨率

导出矢量图：

选择"Export as SVG"
可以在其他设计软件中继续编辑

VS Code集成

Tldraw还有VS Code插件，可以在编辑器中直接使用：

在VS Code中搜索"tldraw"插件
安装后可以创建.tldr文件
直接在编辑器中画图和做笔记
特别适合技术文档和设计稿

总结

Tldraw 让画图变得简单有趣，不再需要复杂的工具和繁琐的操作，想到什么就画什么。

相关资源

官方网站： https://www.tldraw.com/
GitHub地址： https://github.com/tldraw/tldraw
Make It Real： https://makereal.tldraw.com/
开发者文档： https://tldraw.dev/
VS Code插件： 搜索"tldraw"

作者

天天