Excalidraw 是一个轻量级的手绘风格图形工具，它允许用户创建和编辑各种类型的图形，包括草图、图表、流程图等。支持手工绘制、导入素材图形、AI 生成图形、国际化语言、分享图形链接、画板激光笔操作等等，目前 GitHub Star 87K+。

右键操作：

支持多人实时协作，分享链接功能：

支持接入 AI 功能，进行图形转代码：

点击线框至代码，选择绘制的图形，等待生成图形代码。

生成代码如下：

使用提示词生成图表：

Mermaid 语法生成图表：

导入素材库：

素材库：

导出：

安装使用：

// npm
npm install react react-dom @excalidraw/excalidraw
// impirt
import { Excalidraw } from "@excalidraw/excalidraw";
function App() {
  return (
    <>
      
Excalidraw Example
      

        
      
    
  );
}  

属性介绍：

功能和特性：

多种绘图工具：Excalidraw 提供了多种绘图工具，包括自由绘制、线条、矩形、椭圆、箭头等。

键盘快捷键：通过键盘上的数字键 1-0，用户可以快速选择不同的形状。

移动和缩放：用户可以通过拖动来移动画布，通过鼠标滚轮或特定的手势来缩放画布。

撤销和重做：提供标准的撤销和重做功能，方便用户编辑绘图。

实时协作：Excalidraw 支持多人实时在线协作，非常适合团队会议和远程工作。

分享链接：用户可以生成一个链接，通过这个链接，其他人可以查看或编辑同一个绘图。

导出选项：用户可以将他们的绘图导出为 JSON、PNG、SVG 等格式，方便在其他应用中使用。

导入功能：Excalidraw 也支持导入 JSON 文件，允许用户在不同的设备或会话中继续他们的工作。

主题和语言：用户可以根据个人喜好更改 Excalidraw 的主题和语言。

网格和背景：提供网格和背景颜色的自定义选项，以适应不同的绘图需求。

丰富的图形库：Excalidraw 内置了一个丰富的图形库，用户可以直接从库中拖拽形状到画布上。

组件和图标：除了基本形状，Excalidraw 还提供了一些预制的组件和图标，以丰富用户的绘图。

支持响应式设计：Excalidraw 的网页版支持响应式设计，可以在手机和平板电脑上使用。

《前端资源推荐》收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等，如有其他优秀资源，欢迎发消息投稿，感谢点赞、转发、关注！！！

GitHub：https://github.com/excalidraw/excalidraw

官方文档：https://docs.excalidraw.com/