[JS/TS] Excalidraw绘图工具：110k Star开源项目，轻松绘制手绘风格图表与流程图

我们经常需要在工作中绘制技术架构图、设计软件界面线框图，或者在学习和头脑风暴时记录思维导图。面对市面上众多复杂的专业工具，你是否想过有没有一款既简单又灵活，还能让图表看起来不那么“刻板”的选择？今天要介绍的 Excalidraw 就是这样一款备受开发者喜爱的开源绘图神器。

简介

Excalidraw 是一款基于浏览器的开源绘图工具，其最大特色在于能够创建出具有独特手绘风格的图表。无论是绘制流程图、线框图，还是任何创意图形，它都能让你的想法跃然“纸”上，显得既专业又亲切。

功能特性

• 无限的画布空间：不受边界限制，让你的思维可以自由延伸和连接。
• 丰富的绘图工具：提供矩形、圆形、菱形、箭头、线条、自由绘制笔和橡皮擦等多种基础工具。
• 灵活的导出选项：支持将作品导出为 PNG、SVG 格式，或直接复制到剪贴板。
• 深色/浅色模式：提供深色主题，在长时间工作时更护眼，视觉风格也更现代。
• 图片插入：支持在画布中嵌入外部图片，丰富图表内容。
• 多语言界面：提供本地化支持，包括中文在内的多种语言界面。
• 自定义素材库：你可以创建并导入自己的图形库，极大地扩展了创作素材。

技术亮点

现代技术栈

Excalidraw 采用了 Vite + React + TypeScript 这一组合进行构建。这套现代前端技术栈确保了极快的开发热更新速度，同时也保障了代码的类型安全和可维护性。

实时协同编辑

它内置了强大的实时协作功能，允许多个用户同时在同一块画布上绘制和编辑。结合端到端加密技术，这一功能在方便团队进行远程头脑风暴和设计评审的同时，也充分保障了通信和数据的安全性。

渐进式 Web 应用

excalidraw.com 官网本身就是一个 PWA（渐进式网络应用）。这意味着你可以像安装本地应用一样将它“安装”到设备上，并且支持离线工作。即使在网络不稳定的环境下，你依然可以继续创作。

使用教程

在线使用

最快速的方式是直接访问其官方网站：https://excalidraw.com。打开即用，无需注册或下载任何软件，非常适合临时性的绘图需求。

集成到自己的项目

如果你希望在自己的Web应用（例如一个在线设计工具或文档编辑器）中集成绘图功能，Excalidraw 也提供了完善的 React 组件库。

首先，通过 npm 或 yarn 安装依赖：

yarn add react react-dom @excalidraw/excalidraw

接下来，在你的组件中引入并渲染它即可：

function App() {
  return (
    <>
      <h1 style={{ textAlign: "center" }}>集成绘图示例</h1>
      <div style={{ height: "500px" }}>
        <Excalidraw />
      </div>
    </>
  );
}

通过简单的几行代码，你就将一个功能完整的手绘绘图板嵌入到了自己的应用中。

界面与功能预览

1. 导出与保存：完成绘图后，可以方便地导出为不同缩放比例和格式的图片，并选择是否包含背景。
   

2. 内置素材库：软件提供了丰富的内置素材库（Libraries），包含大量常用的图标、形状和元素，可以直接拖拽使用，提升绘图效率。
   

3. 绘制技术图表：得益于灵活的工具，它也非常适合用来快速勾勒技术方案、系统架构或数据流图。
   

开源地址

Excalidraw 是一个完全开源的项目，代码托管在 GitHub 上，目前已经收获了超过 11 万个 Star，社区活跃度非常高。你可以访问其仓库了解详情、参与贡献或学习其实现原理：

https://github.com/excalidraw/excalidraw

作为一款将易用性、美观度和强大功能结合得如此出色的工具，Excalidraw 的成功也充分展示了 开源实战 项目的魅力。如果你也在寻找一款能提升绘图效率的工具，或者对它的技术实现感兴趣，不妨去试试看。当然，也欢迎你到 云栈社区 分享你的使用心得或基于它开发的创意作品。