Excalidraw 是一个轻量级的手绘风格图形工具，它允许用户创建和编辑各种类型的图形，包括草图、图表、流程图等。支持手工绘制、导入素材图形、AI 生成图形、国际化语言、分享图形链接、画板激光笔操作等等，目前 GitHub Star 87K+。点击线框至代码，选择绘制的图形，等待生成图形代码。// npm
npm install react react-dom @excalidraw/excalidraw
// impirt
import { Excalidraw } from "@excalidraw/excalidraw";
function App() {
return (
<>
<h1 style={{ textAlign: "center" }}>Excalidraw Example</h1>
<div style={{ height: "500px" }}>
<Excalidraw />
</div>
</>
);
}
多种绘图工具：Excalidraw 提供了多种绘图工具，包括自由绘制、线条、矩形、椭圆、箭头等。键盘快捷键：通过键盘上的数字键 1-0，用户可以快速选择不同的形状。移动和缩放：用户可以通过拖动来移动画布，通过鼠标滚轮或特定的手势来缩放画布。撤销和重做：提供标准的撤销和重做功能，方便用户编辑绘图。实时协作：Excalidraw 支持多人实时在线协作，非常适合团队会议和远程工作。分享链接：用户可以生成一个链接，通过这个链接，其他人可以查看或编辑同一个绘图。导出选项：用户可以将他们的绘图导出为 JSON、PNG、SVG 等格式，方便在其他应用中使用。导入功能：Excalidraw 也支持导入 JSON 文件，允许用户在不同的设备或会话中继续他们的工作。主题和语言：用户可以根据个人喜好更改 Excalidraw 的主题和语言。网格和背景：提供网格和背景颜色的自定义选项，以适应不同的绘图需求。丰富的图形库：Excalidraw 内置了一个丰富的图形库，用户可以直接从库中拖拽形状到画布上。组件和图标：除了基本形状，Excalidraw 还提供了一些预制的组件和图标，以丰富用户的绘图。支持响应式设计：Excalidraw 的网页版支持响应式设计，可以在手机和平板电脑上使用。
《前端资源推荐》公众号收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等，如有其他优秀资源，欢迎发消息投稿，感谢点赞、在看、转发、关注！！！
Uppy：支持断点续传 模块化的文件上传库
kkFileView：支持数十种文件格式预览开源工具库
Arco Design Mobile：字节新开源移动端 UI 组件库
V3 Admin Vite：低成本上手 中后台管理系统模板
勾股 OA：开源 企业办公管理系统
Fabricjs：交互式 canvas 图形绘制库
likeadmin：多语言 多终端 多应用 系统框架
Ant Design X：蚂蚁 AI 组件 打造人工智能对话应用
GitHub：https://github.com/excalidraw/excalidraw
官方文档：https://docs.excalidraw.com/
