66K star!想画出高颜值的流程图,试试这个手绘风开源白板

工作中总是少不了要画画图,不管是开发中绘制流程图,还是设计系统时画出架构图,一款趁手的工具总是少不了。今天我们就来聊聊画图的白板工具。

今天我们推荐的推荐的项目帮你画出手绘风的高颜值图标,目前在GitHub已超过66K Star,它就是:excalidraw

excalidraw是什么?

Excalidraw是一个虚拟白板应用,专门用于绘制类似手绘的图表。它提供了一个无限的、基于画布的白板,具有手绘风格,支持多种功能。

Excalidraw具备轻量级、易用、美观、安全、协作等能力,非常适合用于技术文章配图、思维导图、架构图、流程图等场景。Excalidraw 编辑器提供的能力包括:

  • 免费且开源。
  • 无限的、基于画布的白板。
  • ✍️类似手绘的风格。
  • 黑暗模式。
  • ️可定制。
  • 图片支持。
  • 形状库支持。
  • 本地化(i18n)支持。
  • ️ 导出为 PNG、SVG 和剪贴板。
  • 开放格式 - 将图纸导出为.excalidraw
  • json 文件。
  • ⚒️ 多种工具 - 矩形、圆形、菱形、箭头、线条、自由绘制、橡皮擦...
  • ➡️ 箭头绑定和标记箭头。
  • 撤消/重做。
  • 缩放和平移支持。

下面是它的GitHub star历史,Excalidraw 在绘图工具圈里起步算是比较晚的,但是可以看出发展还是非常快的。

为什么用 excalidraw

绘图工具还是很多,比如processon、PlantUML、Draw.io,之前我也一直在用Draw.io画图,来说说excalidraw 对比同类的特点:

  • 手绘风:excalidraw主打的第一点就是手绘风格,从呈现来说,我个人觉得更好看一些。
  • 易于集成:excalidraw可以很容易的集成进你的app,也提供多种集成插件方便开发过程。
  • 快速上手:使用上和主流产品基本一致,可以无成本快速上手使用。
  • 协作:支持团队协作
  • 安全:支持端到端的加密,保障数据安全。

使用 excalidraw

在线环境

首先Excalidraw还提供了在线的环境方便用户快速上手,地址如下:excalidraw.com/

进入后直接就可以开始画图,连登录什么的都不需要,不扫码、不要验证码,真是要好评一个。

顶部的工具栏是可以直接按数字键来切换的,细节拉满。

也有一些小小的不适应,就是Draw.io的框里可以直接加文字,在这里是创建一个文本,我一开始还奇怪字怎么歪了。

点击右侧可以打开素材库,自己画的内容就是自己的素材,还可以去素材库添加素材

加了一些图标进来,还是用现成的素材省事。除了基本的素材,也有模版,可以自己翻一番。

可以将自己的画作保存下来,或者也可以分享给其他同伴来协同工作。怎么样我画图还不错吧,这个也是个模版。

自己部署

项目支持docker运行也支持源码运行:

源码的话,前提要确认已经安装好nodejs,接下来:

bash 复制代码
下载代码
git clone <https://github.com/excalidraw/excalidraw.git>

安装
yarn

启动
yarn start

现在可以打开http://localhost:3000并开始使用

docker的话:

可以在源码中构建docker image

bash 复制代码
docker build -t excalidraw/excalidraw .

也可以直接从dockerhub拉

bash 复制代码
docker pull excalidraw/excalidraw

总之获取镜像之后,启动就可以了。

css 复制代码
docker run --rm -dit --name excalidraw -p 5000:80 excalidraw/excalidraw:latest

最后 excalidraw还提供了一个VScode 插件,可以直接在vscode里画图了。

项目信息

相关推荐
林太白5 分钟前
Zustand状态库(简洁、强大、易用的React状态管理工具)
前端·javascript·react.js
Juchecar9 分钟前
Vue3 模板引用 useTemplateRef 详解
前端·vue.js
鼓浪屿11 分钟前
vue3的组件通信方式
前端
绝无仅有14 分钟前
服务器Docker 安装和常用命令总结
后端·面试·github
念旧Zestia29 分钟前
Oxc 家族 vs Biome——定位、能力与底层差异综述
前端
YuJie30 分钟前
vue3 无缝滚动
前端·javascript·vue.js
Juchecar30 分钟前
Vue3 表单输入 v-model 指令详解
前端·vue.js
晴空雨38 分钟前
Emmet 完全指南:让 HTML/CSS 开发效率提升 10 倍
前端·html
小野鲜40 分钟前
前端打开新的独立标签页面,并且指定标签页的大小,管理新标签页面的打开和关闭(包含源码和使用文档)
前端·javascript
一枚前端小能手41 分钟前
🌐 Web应用也想有原生App的体验,PWA来实现
前端·pwa