十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

如何免费搭一个手绘白板:Excalidraw 本地部署教程

如何免费搭一个手绘白板:Excalidraw 本地部署教程 如何免费搭一个手绘白板Excalidraw 本地部署教程【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw开会时想快速画个流程草图却总被工具的学习成本拖住Excalidraw 是一个开源免费的手绘风格虚拟白板本地跑起来后你能在无限画布上画流程图、线框图和思维导图还免费支持多人实时协作。 项目速览Excalidraw 一句话定位让画出来的图看起来像手绘的开源白板MIT 协议完全免费。无限画布空间用不完架构图、思维导图都能铺开手绘风格线条自带人情味草图和演示都显得自然实时协作多人同屏编辑内容端到端加密开放格式导出 PNG、SVG 或.excalidraw文件随时再打开改 三步本地部署安装与启动命令环境要求Node.js ≥ 18、Yarnv1 或 v2.4.2、Git。第一步获取代码git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw第二步安装依赖yarn第三步启动体验yarn start浏览器访问http://localhost:3000开发服务器启动时会自动打开页面白板即画即用。✏️ 核心功能亮点无限画布与箭头吸附整理系统架构时图总是一页画不下。Excalidraw 的画布可以无限缩放平移箭头能吸附到图形边缘并跟随图形自动调整位置——随便拖拽布局图的连线关系也不会断。多人实时协作远程团队头脑风暴时不必我画完截个图给你看。大家同时出现在同一张画布上光标和笔迹实时同步并且绘图内容经过端到端加密协作更安心。开放格式导出即归档画完的图可以导出为 PNG 或 SVG 放进文档也能存成.excalidrawJSON 文件。下次打开继续编辑即可不绑定任何厂商的私有格式。极客统计面板按下Option/打开 Stats for nerds能看到当前画面的元素数量、画布尺寸和存储占用判断这张图有多大一眼就有数。 定制与目录导览欢迎界面是运行后的第一屏左侧是导出、偏好设置等菜单入口中间一排是绘图工具右下角是帮助与快捷键。想动手改从这三个目录入手excalidraw-app/真正运行的 Web 应用主题、快捷键、协作逻辑都在这里packages/excalidraw/核心库画布渲染与工具实现locales/下还有 60 多种语言包examples/把白板嵌入 Next.js 项目或纯脚本页面的两个集成示例 排障速查常见报错修复yarn start后页面空白→ 构建不完整或端口被占用 → 先执行yarn build再重新yarn start依赖安装失败→ Node 版本不满足要求或缓存损坏 → 确认 Node.js ≥ 18用yarn clean-install清缓存重试提示找不到 start 命令→ 用了 npm 或目录不对 → 这是 yarn workspaces 单仓必须在项目根目录用 yarn 执行本地版没有协作和分享链接→ 自部署默认不带协作服务 → 实时协作依赖独立的 collab 服务器详见仓库内的开发文档它适合画流程图、线框图和思维导图也能通过 npm 包嵌进你自己的产品里。把仓库跑起来敲下yarn start几分钟后你的第一张手绘草图就在画布上了。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表