68k star！Excalidraw：开源免费的虚拟手画风白板

「小墨是前端」专注分享前端技术，推荐优秀的开源项目，展示Github、Gitee上的创意作品，带你深入前端底层，一起成长。

大家好，我是小墨，为大家介绍一款非常酷炫的开源项目 - Excalidraw。让你在云端共同创作的画板，可以用来创建各种各样的图表、流程图、思维导图等，非常适合团队协作。

一.简介

Excalidraw是一款开放源代码的虚拟白板，采用手绘风格设计，能够实现协作编辑与端对端的加密。用户可轻松在云端制作图表、流程图、思维导图等多种图形，非常适用于团队合作场景。

界面设计上，Excalidraw保持了极致的简洁性，拥有基础且直观的工具栏，涵盖了画笔、形状、线条、文字和图片等工具。用户能够在画布上随意勾画，加入文字说明以及注释信息。支持多用户实时协同，便于用户邀请团队成员共同在同一画板上创作和交流。

二.功能特点

1、精确的矢量绘图 - 利用直观的工具创建线条、矩形、圆形等基本图形，组合生成高质量的矢量图案，清晰且方便扩展。

2、即时的团队协作 - 实现同步多用户在线编辑，为团队成员提供一个协同工作的平台，从而优化头脑风暴、项目规划和原型设计的流程。

3、模板选择多样化 - 提供一个丰富的模板库，供用户根据各自需求选择，有效地加速项目启动和图形构建的过程。

4、灵活的导出选项 - 支持多格式导出能力，如PNG、SVG和PDF等，确保图形作品能够适用于各种不同的文档和媒体呈现。

5、简便的分享途径 - 通过快捷的社交媒体分享选项，用户可以轻松将创意作品分享到广大的网络空间，增强交流与传播效果。

三.使用步骤

1、安装相应的npm包

npm install @excalidraw/excalidraw

2、初始化组件

import Excalidraw from '@excalidraw/excalidraw';// 2. 初始化组件// 创建并初始化组件实例代码，可能需要引入并配置组件：function App() { return ( <div> <h2>我的Excalidraw图表</h2> <Excalidraw initialData={ /* 这里放置初始数据或画图指令 */ } onChange={ /* 这里添加更改事件的处理 */ } onPointerUpdate={ /* 这里添加指针更新事件的处理 */ } /> </div> );}

3、渲染组件

const handleExport = () => { // 使用Excalidraw提供的方法来导出画布内容 // 这里只是一个示例函数调用，具体方法名称和参数请参考官方文档 const exportedData = Excalidraw.exportAsImage(); // 你可以处理这个导出的数据，例如保存到服务器或者提供下载};

import React from "react";import ReactDOM from "react-dom";

ReactDOM.render(<App />, document.getElementById('app'));

四.项目地址

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

五.总结

Excalidraw是一款免费的、开源的矢量绘图工具，提供网上直接使用的便利。这款软件拥有以用户友好著称的界面，它不仅能快速地绘制各种基础图形，而且能够毫不费力地组合这些简单元素，创作出结构更加复杂的图景。得益于它的实时协作功能，Excalidraw允许多名用户同时对同一个图形文件进行编辑，极大地促进了团队合作的效率。不管是进行思维导图的绘制、项目的策划，还是原型的设计，Excalidraw都能成为一个强有力的辅助工具。