Excalidraw 手绘白板:5 分钟画出你的第一张图

发布时间:2026/10/20 11:05:48

Excalidraw 手绘白板:5 分钟画出你的第一张图 Excalidraw 手绘白板5 分钟画出你的第一张图【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一款开源的虚拟白板工具让你用无限画布画出手绘风格的流程图、架构图和线框图。它适合想把想法画出来、又不想安装重型软件的人——浏览器打开就能画画完一键导出。3 条命令本地白板跑起来前置只需一个 Node.js 18 的环境项目package.json里声明了engines: node 18。克隆仓库并装依赖git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw启动开发服务器首次编译约 5-10 分钟耐心等yarn install yarn start浏览器打开http://localhost:3000你会看到这样的欢迎界面——顶部是工具栏中间是快捷键提示右下角 ? 能展开全部快捷键它为什么值得试手绘风渲染所有线条都带轻微抖动正式图表看着不端架子丢进评审会或文档里更亲切。无限画布没有页边距概念画大了缩小看全局、放大抠细节滚轮缩放随手平移。本地优先内容自动存在浏览器里不注册账号也不丢图还能生成只读链接分享给别人看。导出三种格式PNG 发群里、SVG 进 PPT、.excalidrawJSON 文件留给下次继续编辑。第一次使用画下你的第一个图形界面各区域分工位置作用顶部工具栏选择、矩形、圆形、菱形、箭头、直线、画笔、文字、图片、橡皮擦左上菜单按钮打开/导出、偏好设置左下角缩放比例、撤销/重做右下角快捷键列表与帮助跟着画一张最小的流程图按数字2选中矩形工具在画布上拖出一个框按T切到文字工具点进框里输入一个词按5切到箭头工具从框边缘拖向旁边再拖一个框——箭头会自动吸附在两个框上之后挪框时箭头跟着走到这里你已经完成了 Excalidraw 最核心的三个动作建形、加字、连线。实战场景5 步画一幅手绘插画想画点更有意思的照这个流程走按4选圆形工具拖出头部的大圆按7切到画笔工具自由描边补细节——抖动的线条正是手绘味的来源双击图形用填充色上色蓝、红、黄各来一块左下角把缩放到 100% 左右检查线条细节选中全部CtrlA从左上菜单导出 PNG成品大概长这样调优与定制主题左上菜单可一键切换暗色模式想永久改色改packages/excalidraw/css/variables.module.scss里的 SCSS 变量即可不用贴配置。快捷键工具栏图标上标了 1-0 的数字敲数字直接切工具右下角 ? 里能查全量快捷键比如Option/打开Stats for nerds面板看当前场景的元素数和体积协作仓库自带firebase-project/目录的协作配置但本地自托管实时协作需要额外部署官方的 collab server起步阶段可以不管。避坑指南启动后页面一直空白→ 首次编译资源需要时间不是卡死 → 等 5-10 分钟真挂了就用根目录的yarn clean-install清掉重装。装依赖时报 Node 版本不兼容→ 项目要求 Node 18比很多人以为的高 → 用 nvm 切到 18 再装。导出的 PNG 发群里显得糊→ 默认按 1x 导出 → 在导出对话框把缩放选 2x 或 3x。手滑删了图形找不回来→ 画布上没有回收站 → 立刻 CtrlZ 撤销误撤销再 CtrlShiftZ 重做。自托管后发现没有协作功能→ 客户端镜像本身不带协作这是设计如此 → 部署 excalidraw-room 协作服务或只当单机白板用。进阶入口本地开发与 Docker 自托管dev-docs/docs/introduction/development.mdxnpm 包接入与 API 文档dev-docs/docs/excalidraw/excalidraw/核心编辑器源码actions、renderer、components 都在这里packages/excalidraw/【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
延伸阅读

更多相关文章

2026/10/19 16:05:59

SlickFast:无浏览器环境下的确定性图表渲染,JSON直出SVG/PNG

这次我们来看一个图表渲染方向很值得关注的项目:SlickFast,来自 Hacker News 的 Show HN 展示。它的标题信息量很大:Deterministic Chart/Dash Renderer, No Browser,核心链路是 JSON 进、SVG/PNG 出,全程不依赖浏览器…

2026/10/20 11:03:17

YOLO11结合HAFB-1实现五种羊品种自动识别与边缘部署

从去年底开始,我一直在做牧业场景下的视觉识别项目,其中最有意思也最折磨人的就是“把不同品种的羊自动分出来”。我们项目组代号为“基于YOLO11-HAFB-1的五种羊品种分类识别系统”,这个系统不是简单套一个目标检测模型完事,而是把…

2026/10/20 11:03:17

springboot宜宾旅游网站08225-计算机课程设计、毕业设计

前言 ✨ 博主介绍:一线全栈工程师,毕设实战引路人。技术栈覆盖Java、Python、C#、PHP、Node.js及UniApp跨端开发,擅长多语言项目落地与架构设计。持续分享毕设源码、开题报告、技术选型心得与职场踩坑经验。用工程化思维写代码,帮…

2026/10/20 11:03:17

长对话记忆压缩实战:三层架构解决大模型上下文窗口限制

1. 项目背景与痛点拆解1.1 为什么长对话场景必须解决记忆问题用过大模型产品的朋友应该都有同感:聊天窗口一旦拉长,模型就“开始失忆”。前十分钟还在讨论需求细节,二十分钟后你再提同一个事情,它要么含糊其辞,要么直接…

2026/10/20 11:03:17

PyQt+QML 实现个性化消息通知栏源码分享

PyQtQML 实现个性化消息通知栏源码分享一、效果展示二、源码分享1、工程结构2、库安装3、main.py4、main.qml三、实现原理1、整体架构2、数据模型设计3、消息类型与配色映射4、Canvas 绘制箭头丝带5、倒计时与自动移除机制6、交互逻辑7、小结一、效果展示 二、源码分享 1、工程…

2026/10/20 11:03:17

声纹识别Web身份认证实战:从MFCC特征提取到前后端落地

简介:基于声纹识别的Web身份认证系统,面向需要为企业或业务系统提供安全、便捷登录方案的技术人员,也适合信息安全、人工智能方向的学生作为课设参考。方案以人声生物特征代替传统口令,用户无需记忆复杂密码,且不涉及人…

2026/10/20 10:58:07

2026排课调课在教培系统后台怎么设置

排课是教培机构教务最头疼的事。老师时间冲突、教室被占、班级学员时间对不上,Excel拉来拉去还是撞课。2026年了,后台排课系统能按空闲智能排课、自动检测冲突,调课在课节里改、靠排课和上课提醒触达家长,这篇讲清楚怎么在后台把排…

2026/10/19 18:06:35

金融AI落地指南:从调研报告到技术选型与工程实践

简介:这份PDF报告聚焦2025年金融服务业中国AI现状与趋势,面向金融科技从业者、AI战略规划人员及关注行业数字化转型的研究者,帮助读者把握生成式AI在银行、支付、交易等场景中的落地路径与投资方向。资源包内含1个PDF文件,大小约1…

2026/10/20 1:05:37

单片机C运行时从启动到多任务:中断安全与共享资源冲突

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 1:05:37

GCC编译四步详解:预处理、编译、汇编、链接实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 1:05:37

FIW线是什么?FEP注塑线与普通氟塑料线的区别及应用指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
☎咨询二维码 ☎ ↑