之前文章发布后,有小伙伴问下面的画怎么画的(偷偷告诉你,其实我是用铅笔+水彩笔画的),哈哈,开玩笑了。其实这些图都是用Excalidraw
画出来的。
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/b803745f7a9c4e12bf1ac2818b3a7066.png)
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/8acf4d766946449a8ddf6109c2f557a0.png)
我们平常不管是工作中,还是在日常写文章,都会接触到不少画图工具。
我们对ProcessOn、draw.io 等这些优秀的画图软件可以说是不陌生了。
自己平常写文章也用它们来画图。可以用来画流程图、思维导图、原型图、组织结构图、网络拓扑图等等。
但是,这些用久了之后吧,感觉画出来的都方方正正的、显得特别正式。当然了,这个要是放到PPT上面用于对产品的讲解、又或是用于述职报告等都是是非常不错的选择。
不过呢,今天呢给你介绍一款非常漂亮小众的手绘画图工具。
听到手绘这个词,你会不会眼前一亮呢。
1 绘图工具比较
我们平常画出来的图大多是这样的
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/ac88df96efab4f7aa8520913eff9e051.png)
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/e657bf71a3ab4eb0b856cfbfbe0180c8.png)
但是,今天我们推荐的这款画图软件,它画出来的图是这样的
![小人](http://blog.xiezhrspace.cn/blog-img/3da938b0f2f345258db628ce201b8bb8.png)
啊,这 怎么有点丑,重新画几个。下面看起来好看多了,O(∩_∩)O
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/8d6c805b89544adcae0e91e8c75d4079.png)
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/a22104a04e1746ce99ad237c14277951.png)
![异常处理](http://blog.xiezhrspace.cn/blog-img/51d4b672c6f64c91a2b57b44c64a0e12.png)
这样的风格是不是你喜欢的呢?
2 excalidraw 介绍
Excalidraw 是一款轻量的手绘风格电子白板工具。无论是 Windows / macOS / linux,甚至是手机,打开浏览器就能使用,能简单地画出美观漂亮的流程图、示意图和开发架构图等常用图片。不仅可以画图、还可以作为会议画板使用。
Excalidraw 是一款开源软件,不需要安装、不需要注册就可以免费使用。
GitHub地址:https://github.com/excalidraw/excalidraw
twitter地址:https://twitter.com/excalidraw
目前已经有41.9k star了
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/fa9920f60d5642cea913bd5b75e6bc8d.png)
作者呢也在持续更新
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/bf3d6ee6e49348b59d851f6ff740fe27.png)
3 excalidraw 使用
excalidraw 可以直接浏览器打开使用其SaaS版本,或者自己部署 又或者集成到自己软件中
excalidraw 地址:https://excalidraw.com/
浏览器输入地址打开即可使用,使用起来也很简单,都不用去学
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/edf13cddde424900b3c8c227b8ef8013.png)
3.1 快速绘制基本图形
可以快速绘制 矩形、菱形、椭圆、箭头、线、文字 等基本图形
[video(video-YVOMhS5K-1677154987998)(type-csdn)(url-https://live.csdn.net/v/embed/277640)(image-https://video-community.csdnimg.cn/vod-84deb4/8b106df0b2c371edbfb66723a78f0102/snapshots/8d1023ca07b04ccda9d9c55512a06c60-00004.jpg?auth_key=4830678850-0-0-e6d61e6478e834ccbb2b3c69d1c5a67f)(title-绘图)]
3.1.1 矩形、菱形、椭圆绘制
① 绘制图形
选中矩形(快捷键2)或菱形(快捷键3)或椭圆(快捷键4)–>拖动鼠标即可画出各种大小图形
在这里插入图片描述在这里插入图片描述
小技巧:选中要绘制的基本图形,按住shift
可以绘制正方形、圆形
② 调整边框颜色
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/75ecdfbd0af746f7b05a0d512064374c.png)
② 填充背景
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/e394addc1ea84724a97ea18422eedd71.png)
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/afb59af8c33a40f5b85a22ec9e68d3eb.png)
还可以选择填充效果
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/27c6d858278f411a81542e561e25dbda.png)
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/0c10c1e0af0a4ddcbd4ca4fd9165794e.png)
③ 边框样式
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/7aa7dd5dd7b74e89899204e30013d9aa.png)
还可以选择边框线条风格
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/81e3eec653b249b4beb26c5fce2871e9.png)
3.1.2 曲线、直线绘制
① 线条绘制
选中箭头(快捷键5)或线条(快捷键6)==>点击创建多个点/拖到创建直线
在这里插入图片描述
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/a3e82d42e2cd4ae2866c65bd5e55470e.png)
拖动上图中的紫色小圆点也可以调整线条幅度
② 选择线条样式
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/6fbc8a43f0d6493190a65257aac2f778.png)
3.2 图形对齐
选中需要对齐的图形==>选择对齐方式
在这里插入图片描述
上述图形分别左对齐、右对齐后效果在这里插入图片描述
3.4 插入图片
选择插入图片(快捷键9)==> 选择需要插入的图片
在这里插入图片描述在这里插入图片描述
3.5 橡皮擦删除元素
选中需要擦除的元素==>点击橡皮擦(快捷键0)擦除元素
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/4904367c96924be3bc11d3f2a9231f97.png)
3.5 添加个人素材库
上面这些图形还不够用,也可以添加别人绘制好的素材为我所用。
① 点击右上角的素材库
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/2e89334781094cd3a82f489b8faee5ac.png)
②预览我们需要的素材
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/f481d8d887ee438592bf51a7fdb4b76a.png)
③ 添加到素材库
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/814de6f3c9ae4da5ad471b743b9d20e5.png)
④绘制火柴人
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/e818e65b49c0447b9413c3d125252a4e.png)
3.6 添加文字
点击文字(快捷键8)==>敲入文字
在这里插入图片描述在这里插入图片描述
3.6 导入表格数据
它还有一个很厉害的功能,就是根据excel中的数据生成柱状图、折线图
① 准备数据
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/600e6b359ef747dbb1a826ba80c7e428.png)
②粘贴到Excalidraw
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/e87e52e6707640a9abbeb9b3e4cc9d85.png)
③ 简单表格来了
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/5d5ba178befd4b2aad0470c5cedb0367.png)
3.7 实时协作
可以多个人协同绘制。只需要将链接分享给需要协作的用户即可同时编辑
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
3.8 保存文件
可以将我们绘制好的图保存到本地为.excalidraw 后缀的文件
在这里插入图片描述在这里插入图片描述
3.8 导入绘图文件
可以将上一步导出的文件
在这里插入图片描述
3.9 导出成图片
可以将绘制好的导出成图片。导出图片…==>选择文件格式(PNG、SVG)
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/05df7cbf873e462cbc4668961f130dcb.png)
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/8fd65a6120594d4baee342edf77bf11d.png)
4 本地部署
文章开头我们就说过,
Excalidraw
是一个开源项目。我们可以将其从GitHub
上clone
下来,然后进行本地化部署。
既然有SaaS版本可以在线使用,为啥还要进行本地化部署呢?
不知道小伙伴有没有发现,之前我们插入的文字中,**英文是手写体,但中文不是**,中文就显得格格不入。
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/3899a27ed6c64e4b8133eb348ae55591.png)
为了解决以上问题我们就可以将代码
clone
进行修改,添加字体后编译、部署到Gitee Page
或者GitHub Page
。部署都是免费的,由于
Gitee
在国内访问速度还是挺快的 ,所以我们选择Gitee Page
部署。这个是我部署好的地址:https://xiezhr.gitee.io/excalidraw/
这个是其他博主部署到GitHub Page
上的,支持中文手写字体 可以放心使用
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/7be44296b51e4beab3c3dc6708d5300f.png)
由于前端不太熟,本地编译后中文手写字体可以了,但是发布到Gitee Page
后还有点问题。
等后面解决后再出一篇部署相关的,又给自己挖了个坑~ (⊙﹏⊙)
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/bdae966bf8714acea7428cf6b305cc27.gif)
本次内容到此就结束了,各位小伙伴们,我们下期再见~ (●’◡’●)