Excalidraw：127K Star 开源手绘白板，AI 生成架构图
来源：微信公众号
想快速跟同事对齐一个系统架构或业务流程，打开 Visio 太重，Miro 要注册还限协作人数，Draw.io 画出来又太"正式"？
Excalidraw 就是来解决这个问题的：开源、免登录、打开即画，所有图形自带温暖的手绘质感，像极了会议室白板上随手勾的那几笔——但支持实时协作、导出 PNG/SVG，还能接 AI 自动生成图表。
项目由来
Excalidraw 由前 Facebook（Meta）工程师 Christopher Chedeau（@vjeux）——React 核心成员和 Prettier 作者——于 2020 年 1 月作为周末实验项目发布。
项目发布当天在 Hacker News 刷屏，如今已火成 GitHub 明星：
- ⭐ GitHub 127K+ Star（MIT 开源）
- 👥 500+ 社区贡献者
- 🔗 被 Obsidian、Notion、VS Code 等通过插件或嵌入方式集成
- 💼 推出 Excalidraw+ 付费版（团队工作区/持久化存储）
设计哲学只有一句："Draw like a human, not a machine."——鼓励草图、包容不完美、聚焦想法本身。
核心技术原理
Excalidraw 是基于 TypeScript + React 构建的浏览器端无限画布应用，核心渲染走 Canvas 2D API，手绘效果由 Rough.js 库实现。
手绘风格 ≠ 随机涂鸦，而是在精确几何路径基础上：
- 叠加受控的随机抖动偏移，模拟笔触宽度的微小波动
- 用算法"假装"是人类手画出来的不完美线条
妙处在于：图形结构依然可被程序解析（JSON 序列化），但视觉上传递出"这是草案，欢迎讨论"的心理暗示，降低协作时的防御性。
关键特性一览
| 特性 | 说明 |
|---|---|
| 渲染引擎 | Canvas 2D + Rough.js 手绘模拟 |
| 数据存储 | 本地 localStorage / .excalidraw JSON（可进 Git） |
| 实时协作 | WebRTC/E2EE 端到端加密，服务器无法解密 |
| 离线可用 | 首次加载后完全可断网使用 |
| 可嵌入 | @excalidraw/excalidraw NPM 包可嵌入任意 React 应用 |
| 导出格式 | PNG / SVG / Clipboard / JSON |
AI 应用场景
🤖 Text-to-Diagram
新版 Excalidraw 支持自然语言生成图表，输入如：
"画一个包含前端、API Gateway、用户服务、Redis 缓存和 MySQL 的典型 Web 微服务架构"
AI（对接 OpenAI/Anthropic 等 LLM）解析实体与关系 → 映射为 Excalidraw 元素 → 自动排版注入画布，你再手动微调即可。
💼 典型职场用法
- 技术架构评审：现场手绘或 AI 生成微服务拓扑，圈出瓶颈点讨论，截图进 Wiki/README
- 产品原型构思：PM 用 AI 生成 App 登录页线框草图，团队围绕布局快速拍板
- 故障复盘：多人实时共编时间线，还原请求链路与故障节点
- 敏捷用户故事地图 / WBS：用无限画布做需求拆解，导出 PNG 贴进会议纪要
- 教学 & 知识笔记：Obsidian + Excalidraw 插件画思维导图、算法流程，纳入个人知识库
核心优势
- ✅ 零门槛：打开 excalidraw.com 直接画，无需注册账号
- ✅ 开源可私有化：MIT 协议，支持 Docker 自部署，数据不出内网
- ✅ 手绘风格降低沟通压力：草图感让讨论聚焦内容而非排版
- ✅ AI 可生成初稿：大幅减少"摆方框连线"的机械劳动
- ✅ 版本可控：.excalidraw JSON 可提交 Git，追踪历次架构演进
- ✅ 生态广：Obsidian / Notion / Logseq / Confluence 均可嵌入或插件集成
选型建议
| 场景 | 推荐 |
|---|---|
| 快速画草图、内部对齐、放进文档 | Excalidraw |
| 严谨 UML/云厂商图标库做正式交付 | Draw.io |
| 企业深度协作、设计主导的 Workshop | Miro / FigJam |
总结
Excalidraw 把极简、手绘感、开源可控、AI 友好这件事做到了极致。对开发者、架构师和产品经理来说，它是数字版的会议室白板：随时可擦、随时协作、随时存档。
官网：https://excalidraw.com
GitHub：https://github.com/excalidraw/excalidraw