Tool之Excalidraw：Excalidraw(开源的虚拟手绘风格白板)的简介、安装和使用方法、艾米莉应用之详细攻略

Excalidraw%20%E7%AE%80%E4%BB%8B-toc" style="margin-left:0px;">Excalidraw 简介

Excalidraw%20%E7%9A%84%E4%B8%BB%E8%A6%81%E7%89%B9%E7%82%B9%EF%BC%9A-toc" style="margin-left:40px;">1、Excalidraw 的主要特点：

Excalidraw%20%E5%AE%89%E8%A3%85%E5%92%8C%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95-toc" style="margin-left:0px;">Excalidraw 安装和使用方法

Excalidraw%E7%9A%84%E5%AE%89%E8%A3%85-toc" style="margin-left:40px;">1、Excalidraw的安装

T1、使用 npm 安装：

T2、使用 yarn 安装：

Excalidraw%20%E6%A1%88%E4%BE%8B%E5%BA%94%E7%94%A8-toc" style="margin-left:0px;">Excalidraw 案例应用

Excalidraw%20%E7%AE%80%E4%BB%8B" style="text-align:justify;">Excalidraw 简介

Excalidraw是一个开源的虚拟手绘风格白板，支持协作和端到端加密。你可以用它创建漂亮的手绘风格图表、线框图或任何你想要的东西。它是一个免费且开源的无限画布白板，具有手绘风格、暗模式、可定制性、图片支持、形状库支持、本地化（i18n）支持等特性。

Excalidraw 支持导出为 PNG、SVG 和剪贴板格式，并使用开放格式——将绘图导出为 .excalidraw JSON 文件。它提供丰富的工具，例如矩形、圆形、菱形、箭头、线条、自由绘制、橡皮擦等，并支持箭头绑定和带标签的箭头，以及撤销/重做、缩放和平移功能。

Excalidraw.com 网站是一个展示 Excalidraw 功能的最小化应用，其源码也包含在这个仓库中。该应用具有PWA支持（离线工作）、实时协作、端到端加密和本地优先支持（自动保存到浏览器）等功能，并支持生成可共享的只读链接。未来，这些功能将作为插件添加到 npm 包中。

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

Excalidraw%20%E7%9A%84%E4%B8%BB%E8%A6%81%E7%89%B9%E7%82%B9%EF%BC%9A" style="text-align:left;">1、Excalidraw 的主要特点：

Excalidraw 结合了手绘风格的直观易用性与强大的协作和导出功能，使其成为一个功能丰富且易于使用的虚拟白板工具。

>> 手绘风格：Excalidraw 的核心特点是其手绘风格的界面和绘图体验，让用户感觉像是在用笔在白板上作画。

>> 虚拟白板：它是一个虚拟白板，允许用户在数字环境中进行绘图和协作。

>> 无限画布：提供无限大的画布空间，用户无需担心空间限制。

>> 开源免费：Excalidraw 是一个开源项目，并且完全免费使用。

>> 协作功能：支持实时协作，多个用户可以同时在同一个画布上进行编辑。

>> 端到端加密：确保用户数据的安全性和隐私性。

>> 可定制性：允许用户自定义设置和扩展功能。

>> 图片支持：支持插入和编辑图片。

>> 形状库支持：提供各种形状库，方便用户快速创建图表。

>> 多语言支持：支持多种语言，方便全球用户使用。

>> 多种导出格式：支持导出为 PNG、SVG 和剪贴板格式，以及 .excalidraw JSON 文件。

>> 丰富的工具：提供多种绘图工具，例如矩形、圆形、箭头、线条、自由绘制、橡皮擦等，并支持箭头绑定和带标签的箭头。

>> 撤销/重做：支持撤销和重做操作，方便用户修改错误。

>> 缩放和平移：支持缩放和平移功能，方便用户查看和编辑大型图表。

>> PWA 支持：Excalidraw.com 版本支持渐进式网络应用 (PWA)，可以在离线状态下工作。

>> 本地优先支持：自动保存到浏览器，避免数据丢失。

>> 可共享链接：可以生成可共享的只读链接，方便与他人分享作品。

Excalidraw%20%E5%AE%89%E8%A3%85%E5%92%8C%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95" style="text-align:justify;">Excalidraw 安装和使用方法

Excalidraw%E7%9A%84%E5%AE%89%E8%A3%85" style="text-align:left;">1、Excalidraw的安装

以下说明适用于将 Excalidraw 集成到您自己的应用程序时安装 Excalidraw npm 包。要运行本地开发环境，请参考开发指南。

T1、使用 npm 安装：

npm install react react-dom @excalidraw/excalidraw

T2、使用 yarn 安装：

yarn add react react-dom @excalidraw/excalidraw

Excalidraw%20%E6%A1%88%E4%BE%8B%E5%BA%94%E7%94%A8" style="text-align:justify;">Excalidraw 案例应用

Excalidraw 已经被许多公司和项目集成使用，包括：Google Cloud、Meta、CodeSandboxObsidian、Excalidraw、Replit、Slite、Notion、HackerRank以及许多其他公司和项目，这些案例展示了 Excalidraw 在不同场景下的应用，例如团队协作、流程图绘制、思维导图创作等。更多集成案例可参考 GitHub 项目页面。