写技术文档、架构示意、教学讲义时，Mermaid 这类”代码生成图”工具对结构化场景很好用——但遇到要”边想边画 + 自由布局 + 手绘感”的场景就力不从心。这时白板才是对的工具。
本工具用的是开源的 Excalidraw 引擎——保留它全部核心能力（矩形 / 菱形 / 椭圆 / 箭头 / 自由笔 / 便签 / 文字 / 图片），裁掉了需要服务器的协作功能，全程本地运行 + 自动本地存档 + 不联网。
这篇按”什么场景用 → 怎么导出 → 怎么不丢 → 怎么快”四段讲清楚。
什么场景用白板，什么场景不用
| 场景 | 推荐工具 | 理由 |
|---|---|---|
| 流程图、决策树 | [[mermaid]] | 自动布局，节点对齐 |
| 时序图、ER 图、类图 | [[mermaid]] | 规整语法，工程化 |
| 思维导图 / 知识结构 | [[markmap]] / [[mermaid]] mindmap | 树形结构自动出 |
| 头脑风暴、灵感涂鸦 | 白板 | 自由位置，手绘感 |
| 系统架构示意 | 白板 | 自由摆放服务方块和数据流箭头 |
| 教学讲解 + 即兴标注 | 白板 | 边讲边画，比静态图生动 |
| 用户旅程地图 | 白板 / mermaid journey | 简单用 mermaid，复杂带情感曲线用白板 |
| 草图先行 → 后正图 | 白板 → mermaid | 涂鸦定形，规整出图 |
核心区别：
- 代码即图（mermaid / markmap）：版本可控 / 易 diff / 自动布局，但风格统一缺乏个性
- 自由手绘（白板）：随手摆放 / 手绘感 / 灵活定制，但难版本管理、不能 diff
实战策略：复杂系统的最初构思用白板，定稿后用 Mermaid 重新画一份”正式版”——草图保留思考痕迹，正图进入文档。
5 种导出方式速查
| 方式 | 路径 | 文件 | 适合 |
|---|---|---|---|
| PNG 文件 | Export image → PNG | .png | PPT、微信、钉钉、公众号 |
| SVG 文件 | Export image → SVG | .svg | README、Notion、飞书 |
| 复制到剪贴板 | 右键 → Copy to clipboard | （内存） | 直接粘到富文本编辑器 |
| .excalidraw 源文件 | Save to… | .excalidraw（JSON） | 下次接着编辑 / 备份 |
| 链接分享 | （未启用） | - | 仅官方版有，需服务器 |
PNG 选项详解
Export image → PNG 时弹出选项：
| 选项 | 推荐 | 说明 |
|---|---|---|
| Background | 启用 | 用当前主题色填充，避免透明背景在白色文档上看不见字 |
| Dark mode | 跟随当前主题 | 暗色主题下导出深色背景，亮色主题导出浅色 |
| Embed scene | 启用 | 把 .excalidraw 数据嵌入 PNG，别人下载这张 PNG 还能用本工具打开继续编辑 |
| Scale | 2x / 3x | 2x = 96 DPI 双倍，足够清晰；3x 适合印刷 |
重要细节：勾选 Embed scene 后 PNG 体积会变大（约 +30-50KB），但等于自带了源文件——丢了 .excalidraw 也能从 PNG 恢复。强烈推荐勾。
SVG 选项详解
| 选项 | 推荐 | 说明 |
|---|---|---|
| Embed font | 启用 | 把手绘字体嵌入 SVG，别人打开不需要安装字体 |
| Background | 看情况 | 贴白色文档不需要背景，贴暗色文档启用 |
| Embed scene | 同 PNG | 推荐启用 |
SVG 的额外优势：在 Notion / 飞书 / Confluence 富文本里贴 SVG，链接、文字都是可选中可搜索的——PNG 是栅格化的图片做不到。
剪贴板复制
按 Ctrl+A 全选 → Ctrl+C 复制 → 切到 Notion / 飞书富文本编辑器 → Ctrl+V，直接出现一张可继续编辑的图（在 Excalidraw 嵌入式渲染器里）。
前提：目标编辑器要支持 Excalidraw 嵌入。Notion / Obsidian / 飞书较新版本都支持，微信公众号 / 钉钉群消息不支持，必须先存 PNG。
.excalidraw 文件
JSON 格式，本质是图元数据数组：
{
"type": "excalidraw",
"version": 2,
"elements": [
{ "type": "rectangle", "x": 100, "y": 100, "width": 200, ... },
{ "type": "arrow", "points": [[0,0],[100,50]], ... }
],
"appState": { ... }
}体积小（一般几 KB 到几十 KB），存网盘 / Git / 邮箱草稿都行。这是唯一能”完整保留 + 继续编辑”的格式——其它格式（PNG/SVG）即便嵌入了 scene，也建议同时存一份 .excalidraw 当主备份。
本地存档机制与防丢
自动存档：每次画布有改动 → 防抖 600ms → 写入 localStorage 键 toolbox_whiteboard_data。
localStorage 存储的内容（精简）：
{
elements: [...], // 所有图元
appState: { // 视图状态
viewBackgroundColor,
gridSize,
zoom,
scrollX,
scrollY
}
}localStorage 的 3 个失效场景：
| 场景 | 现象 | 应对 |
|---|---|---|
| 隐私模式 / 无痕窗口 | 可能完全不能写入或关掉就丢 | 别用隐私模式画重要图 |
| 清浏览器缓存 / 站点数据 | 一并清除 | 清前先 Save to… 备份 |
| localStorage 达到上限（约 5-10MB） | 写入静默失败 | 见下文 |
第三种最隐蔽——同一域名下其它工具或网页可能也在写 localStorage，加起来超过浏览器配额时本工具的 setItem 会抛错（被 catch 静默吞）。预防：
- 阶段性 Save to… 导出
.excalidraw文件备份 - 不要在白板上画几十张图永远不清理——多用 Open / Save 切换不同图
- 重要图开始前先 Save 一份”初版”，定稿再 Save 一份”终版”
localStorage 容量自检：
let total = 0;
for (let k in localStorage) {
total += (localStorage[k]?.length || 0) + k.length;
}
console.log((total / 1024 / 1024).toFixed(2) + 'MB');控制台跑一下，超过 4MB 要警惕。
中文字体与手绘风格
Excalidraw 默认从 unpkg CDN 拉字体——本工具改成同源 /libs/excalidraw/fonts/ 加载，全程不发外部请求。
4 种字体可选（文字工具属性栏切换）：
| 字体 | 中文 | 用途 |
|---|---|---|
| 手绘体（Xiaolai 小赖字体） | ✓ | 默认，最符合白板风格 |
| 普通体 | ✓ | 非手绘，正式标题 |
| 代码体（等宽） | ✓ | 贴代码片段 |
| Excalifont | 仅英文 | Excalidraw 官方字体 |
手绘程度（“Sloppiness”）三档：
- Architect：最规整，接近直线
- Artist：默认，有自然手抖
- Cartoonist：抖动最大，最”漫画感”
实战建议：
- 一张图里不要混用 3 种字体
- 正式架构示意图用 Architect 模式 + 普通体
- 教学涂鸦用 Cartoonist + 手绘体
- 中文标签≤ 8 字最好看——超过显得字体粗糙
高效快捷键
数字键切工具：
1 选择 2 矩形 3 菱形
4 椭圆 5 箭头 6 直线
7 自由笔 8 文字 9 图片
0 橡皮擦修饰键组合：
| 操作 | 快捷键 |
|---|---|
| 复制选中（在画布上原地复制） | Ctrl+D |
| 多选 | Shift+点击 / 框选 |
| 锁定纵横比 | Shift+拖拽 |
| 等距/等角 | Ctrl+拖拽 |
| 撤销 / 重做 | Ctrl+Z / Ctrl+Y |
| 缩放 | Ctrl+滚轮 |
| 平移 | 空格+拖拽 |
| 锁定元素 | Ctrl+Shift+L |
| 全选 | Ctrl+A |
| 群组 / 解组 | Ctrl+G / Ctrl+Shift+G |
| 切换柔和模式 | Q（线条更自然弯曲） |
| 适应窗口 | Shift+1 |
最常用的 3 个：Ctrl+D 复制（比手动复制粘贴快）、空格+拖拽（任何时候平移视图）、Shift+多选（快速选中多个元素一起移动）。
与同事协作的 3 条变通路径
本工具因不带服务器无法实时多人协作，但有 3 条变通方案：
1. 屏幕共享 + 一人画
最常用。远程会议时一人开本工具屏幕共享，多人口头讨论、画图人按讨论修改。
优点：所见即所得，零额外工具。 缺点：只能一个人改。
2. .excalidraw 文件接力
A 画完 → Save to… 导出文件 → 发给 B → B 用 Open 打开继续改 → 改完再 Save → 发回 A。
优点：能演进，文件版本可控（git / 网盘）。 缺点：不是实时，每轮要等。
3. PNG 嵌入 Embed scene → 直接传图
A 画完 → 导出 PNG（勾选 Embed scene）→ 微信发给 B → B 下载 PNG → 用本工具 Open 这张 PNG → 自动还原成可编辑画布。
优点：PNG 在所有平台都好传，自带源数据。 缺点：B 必须知道 PNG 能 Open（这个不在常识里）。
真需要实时协作：用 excalidraw.com 官方版（需上传服务器，敏感内容慎用）或自建 Excalidraw+。
默认不做的事
- 不上传任何画布数据——所有渲染 / 存档 / 导出在本地完成
- 不连 CDN 拉字体 / 资源——全部静态资源在
/libs/excalidraw/下 - 不支持多人协作 / 共享链接——需要服务器，本工具是纯离线版
- 不集成 AI 自动生成图——官方版的 “Mermaid → Excalidraw” 转换功能未启用
如果需要从文本生成结构化图，用 [[mermaid]]；如果需要 Markdown 写思维导图，用 [[markmap]]；如果只是画几个流程节点的草图，白板的”打开就能画”是最低摩擦的选择。