Excalidraw 手绘白板：本地部署 10 分钟画出像人画的架构图-北京尧图网络

Excalidraw 手绘白板本地部署 10 分钟画出像人画的架构图【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw产品评审还有 10 分钟你要向对方讲清楚用户点按钮之后请求怎么走到后端。用严肃的绘图工具画出来的 UML 图太板正换工具重画又要半小时——这种时候你需要的是 Excalidraw 手绘白板线条带点抖动的手抖感像马克笔在白板上随手画的草图但意思反而传达得更直接。 Excalidraw 是什么Excalidraw 是一个开源的虚拟白板专门用来画看起来像手绘的图表、线框图和思维导图。它的画布是无限延伸的画完之后既能导出 PNG、SVG 图片也能存成开放的.excalidrawJSON 文件——这意味着你的画不会被锁死在某个软件里用文本编辑器甚至版本控制都能管理它。第一次打开它你会看到这样一个极简界面顶部一排工具选择、矩形、圆形、箭头、画笔、文字、图片、橡皮左上角菜单负责导出和偏好设置右下角的问号可以随时查看快捷键。没有多余的按钮学习成本很低。⚡ 三步本地部署 Excalidraw如果你只是想看它长什么样用浏览器打开官方线上版就行但如果你想在本地跑起来、改成自己想要的样子三步就够了。先确认环境Node.js 18 或更高版本、Yarn、Git。仓库声明使用yarn1.22.22见根目录 package.json 的packageManager字段用 npm 装依赖容易出问题。git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw yarn install装完依赖后启动开发服务器yarn start然后浏览器访问http://localhost:3000完整功能就都在本地了。如果你不想装 Node 环境仓库里还提供了 Docker 方案运行docker-compose up --build -d也能跑起来详见开发文档。两个值得玩一玩的功能用快捷键打开 Stats for nerds在菜单里找到 Stats for nerds快捷键Option/会弹出一个小面板显示当前场景里有多少元素、画布宽高、占用了多少存储空间、版本号等。平时你用不上但当你觉得我这张图怎么这么大或者想确认导出的版本对不对时它是现成的诊断窗口。协作与分享走的是加密链路官方应用支持多人实时协作画板内容做端到端加密本地优先自动保存关浏览器再打开画的东西还在并能生成一个只读分享链接发给别人。需要提醒的是本地自托管的实例目前不支持分享和协作功能官方文档里也明确写了这一点它更适合私有部署自己画、自己看的场景。把白板嵌进你自己的产品Excalidraw 核心是以 npm 包excalidraw/excalidraw的形式发布的仓库里有两个现成的集成示范可以照着抄——Next.js 集成示例和浏览器脚本嵌入示例。如果你好奇图形本身是怎么画的packages/element/ 里放着箭头绑定、碰撞检测、元素变换这些实现的源码。新手最容易卡住的三个地方依赖装了但起不来仓库是 Yarn Workspaces 管理的多包项目yarn install会同时处理excalidraw-app和packages/*下的所有子包。如果中途断了清一下缓存重装yarn cache clean后重新yarn install --force通常能解决。本地版点分享没反应这是预期行为不是 bug。分享链接和实时协作依赖官方的协作服务collab server本地开发要单独部署它纯自托管实例则直接用不了这两项。页面加载异常先执行一次yarn build再yarn start如果怀疑是字体渲染问题可以检查 packages/excalidraw/fonts/ 里的字体文件是否完整。适合谁接下来做什么如果你需要频繁画架构图、线框图、流程图又不想让图看起来像工具画的Excalidraw 值得放进你的工具清单。下一步建议先按上面的命令在本地跑起来画一张小图再翻一遍examples/下的两个集成示例判断它能不能嵌进你自己的产品里。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Excalidraw 手绘白板：本地部署 10 分钟画出像人画的架构图

相关推荐

Agent技能库设计实战：从零构建可扩展的agent-skills体系

头歌SparkSQL实战：从环境认知到执行计划调优

AI短片全流程：角色一致性与《狐族恋歌》制作实战

更多资讯

Session与JWT鉴权机制深度对比与实践指南

Pentagi：基于Neo4j图谱与Docker容器的渗透测试智能协同框架

VB编程十三实践：从基础语法到二分查找的算法之旅

禁用驱动强制签名：Windows临时与永久关闭方法

从doc教案到Anki单词卡：Python实现英语词汇自动处理与卡组生成

IntelliJ Community 仓库 AI 协作开发指南：从 guide 模板渲染到 Bazel 构建与测试规范

今日更新

AReaL 调试指南：从 Agent Workflow 验证到分布式训练死锁诊断

MATLAB实现GPS L1 C/A信号仿真与二维捕获验证

彻底搞懂ASCII、Unicode与UTF-8：从乱码根源到编码实战

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？