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里画图了。

项目信息

相关推荐
罗克米13 分钟前
通过脚本,发起分支合并请求和打tag
github
DK七七28 分钟前
多端校园圈子论坛小程序,多个学校同时代理,校园小程序分展示后台管理源码
开发语言·前端·微信小程序·小程序·php
老赵的博客39 分钟前
QSS 设置bug
前端·bug·音视频
Chikaoya40 分钟前
项目中用户数据获取遇到bug
前端·typescript·vue·bug
南城夏季40 分钟前
蓝领招聘二期笔记
前端·javascript·笔记
Huazie40 分钟前
来花个几分钟,轻松掌握 Hexo Diversity 主题配置内容
前端·javascript·hexo
NoloveisGod1 小时前
Vue的基础使用
前端·javascript·vue.js
GISer_Jing1 小时前
前端系统设计面试题(二)Javascript\Vue
前端·javascript·vue.js
喔喔咿哈哈1 小时前
【手撕 Spring】 -- Bean 的创建以及获取
java·后端·spring·面试·开源·github
海上彼尚2 小时前
实现3D热力图
前端·javascript·3d