84.7k Star！Excalidraw：开源的在线白板工具，具备手绘风格和实时协作功能

❤️ 如果你也关注大模型与 AI 的发展现状，且对大模型应用开发非常感兴趣，我会快速跟你分享最新的感兴趣的 AI 应用和热点信息，也会不定期分享自己的想法和开源实例，欢迎关注我哦！

微信公众号｜搜一搜：蚝油菜花

---

快速阅读

1. Excalidraw 是一款开源的在线白板工具，具备手绘风格和实时协作功能。
2. 支持多种绘图工具、便捷导出、离线可用及跨平台兼容性。
3. 适用于远程协作、头脑风暴、产品设计和技术绘图等多个场景。

正文（附运行示例）

Excalidraw 是什么

Excalidraw 是一款开源的在线白板工具，拥有简洁的手绘风格和实时协作功能。Excalidraw 完全在浏览器中运行，无需安装，支持多人同时编辑同一张图，提供端到端加密。Excalidraw 的核心功能包括各种绘图工具、导出为 PNG 或 SVG 格式、离线可用及跨平台兼容性。Excalidraw 适于快速草图、头脑风暴和远程协作，特别适合产品经理、开发者和教育工作者。

Excalidraw 的主要功能

• 手绘风格：Excalidraw 提供的图形都是手绘风格，让作品看起来更自然、有创意感。
• 实时协作：支持多人在线实时协作，能同时在一个画布上创作，且支持端到端加密。
• 丰富绘图工具：提供矩形、圆形、箭头、线条、自由绘制等多种绘图工具。
• 便捷导出：支持将作品导出为 PNG、SVG 格式，或复制到剪贴板。
• 离线可用：用 PWA（Progressive Web App）技术，在没有网络的情况下能继续使用。
• 跨平台：在电脑和手机上访问，支持随时随地画图。
• 无限画布：提供无限大的画布，用户自由绘制和排列图形。

Excalidraw 的技术原理

• 前端框架：Excalidraw 用 React 框架构建前端界面，基于框架组件化和状态管理的优势。
• 绘图引擎：Excalidraw 用自定义的绘图引擎处理图形的绘制、编辑和渲染。
• 实时协作：基于 WebSocket 的实时通信技术，实现多人协作时的数据同步。
• 国际化：支持多语言，基于 i18n 等国际化库实现界面的多语言切换。

如何运行 Excalidraw

安装

注意：以下指令适用于在自己的应用中集成 Excalidraw npm 包。如需本地开发，请参阅我们的开发指南。

npm install react react-dom @excalidraw/excalidraw

或使用 yarn：

yarn add react react-dom @excalidraw/excalidraw

示例代码

以下是一个简单的示例，展示了如何在 React 应用中集成 Excalidraw：

import React from "react";
import ReactDOM from "react-dom";
import { Excalidraw } from "@excalidraw/excalidraw";

function App() {
  return (
    

      
    
  );
}

ReactDOM.render(, document.getElementById("root"));

代码解释

1. 导入依赖：首先导入 React 和@excalidraw/excalidraw包。
2. 创建组件：创建一个App组件，返回一个包含 Excalidraw 组件的div。
3. 设置高度：设置div的高度为 100vh，确保 Excalidraw 组件能够占据整个视口。
4. 渲染组件：使用ReactDOM.render方法将App组件渲染到页面上的root元素中。

资源

1. 项目官网：https://excalidraw.com
2. GitHub 仓库：https://github.com/excalidraw/excalidraw
3. 文档：https://docs.excalidraw.com
4. Excalidraw+：https://plus.excalidraw.com
5. VSCode 扩展：https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor

---

❤️ 如果你也关注大模型与 AI 的发展现状，且对大模型应用开发非常感兴趣，我会快速跟你分享最新的感兴趣的 AI 应用和热点信息，也会不定期分享自己的想法和开源实例，欢迎关注我哦！

微信公众号｜搜一搜：蚝油菜花