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

蚝油菜花

已于 2024-11-14 20:56:31 修改

阅读量1k

点赞数 24

分类专栏：每日 AI 项目与应用实例文章标签：人工智能开源画板实时协作

于 2024-11-14 20:55:51 首次发布

本文链接：https://blog.csdn.net/qq_19841021/article/details/143780633

版权

每日 AI 项目与应用实例专栏收录该内容

659 篇文章

订阅专栏

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

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

🚀 快速阅读

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

正文（附运行示例）

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 (
    <div style={{ height: "100vh" }}>
      <Excalidraw />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));