83.6K Star！手绘风画图神器，小白也能轻松上手！Excalidraw了解一下？

「小墨是前端」致力于分享实用前端技术、挖掘优秀的开源项目，带你探索前端的奇妙世界，共同学习进步。

哈喽，我是小墨！最近发现一个超好用的开源画图工具——Excalidraw，迫不及待想分享给大家！它独特的"手绘风"，让我画的图不再那么呆板，立马高大上起来！无论是架构图、流程图、示意图，还是产品原型，它都能轻松搞定！

Excalidraw 有哪些神仙功能？

•手绘风格，颜值爆表！跟枯燥的矢量图说拜拜，Excalidraw 的手绘风，让你的图表更生动、更易理解，逼格瞬间拉满！

•简单易上手，小白友好！拖拽、缩放、连接元素，操作直观又方便，简直不要太丝滑！

•丰富的元素库，任你选择！内置了各种常用图形元素，还能导入自定义库，只有你想不到，没有它做不到！

•实时协作，团队神器！团队成员可以一起编辑图表，沟通效率蹭蹭上涨！再也不用担心版本混乱啦！

•开源免费，随心定制！Excalidraw 完全开源免费，还可以基于它进行二次开发，打造你的专属工具！

Excalidraw 使用指南，速来get！

Excalidraw 有在线版和 npm 包两种选择。你可以直接在官网 https://excalidraw.com/ 使用，也可以集成到自己的项目里。

下面用一段 React 代码示例，带你快速集成 Excalidraw：

import React from 'react';

import Excalidraw from '@excalidraw/excalidraw';

function MyComponent() {

return (

<div>

<Excalidraw />

</div>

);

}

export default MyComponent;

//  是不是很简单？快去试试吧！Excalidraw 背后的秘密

Excalidraw 基于 React、Canvas 和 SVG 等技术，将绘制数据存储为 JSON 格式，方便数据交换和存储。它的手绘风格是通过模拟手绘线条的随机抖动实现的，简直不要太精妙！

Excalidraw 的小不足

虽然 Excalidraw 已经很棒了，但还有一些小缺憾：绘制复杂图形略显吃力，移动端体验有待优化。不过，这些小问题丝毫不影响它的优秀！

总结

Excalidraw 是一款墙裂推荐的绘图工具！简单易用、功能强大、手绘风格独特，绝对是你的效率神器！

项目地址：

https://github.com/excalidraw/excalidraw

创作不易，求点赞、求在看、求转发！你的支持是我创作的最大动力！关注小墨，带你解锁更多前端技能！