或许你想要的画图工具在这里

程序员晓凡
3,899 阅读5分钟

之前文章发布后，有小伙伴问下面的画怎么画的（偷偷告诉你，其实我是用铅笔+水彩笔画的），哈哈，开玩笑了。其实这些图都是用Excalidraw 画出来的。 在这里插入图片描述 在这里插入图片描述

我们平常不管是工作中，还是在日常写文章，都会接触到不少画图工具。

我们对ProcessOn、draw.io 等这些优秀的画图软件可以说是不陌生了。

自己平常写文章也用它们来画图。可以用来画流程图、思维导图、原型图、组织结构图、网络拓扑图等等。

但是，这些用久了之后吧，感觉画出来的都方方正正的、显得特别正式。当然了，这个要是放到PPT上面用于对产品的讲解、又或是用于述职报告等都是是非常不错的选择。

不过呢，今天呢给你介绍一款非常漂亮小众的手绘画图工具。

听到手绘这个词，你会不会眼前一亮呢。

1 绘图工具比较

我们平常画出来的图大多是这样的 在这里插入图片描述

在这里插入图片描述 但是，今天我们推荐的这款画图软件，它画出来的图是这样的 小人 啊，这 怎么有点丑，重新画几个。下面看起来好看多了，O(∩_∩)O 在这里插入图片描述 在这里插入图片描述 异常处理

这样的风格是不是你喜欢的呢？

2 excalidraw 介绍

Excalidraw 是一款轻量的手绘风格电子白板工具。无论是 Windows / macOS / linux，甚至是手机，打开浏览器就能使用，能简单地画出美观漂亮的流程图、示意图和开发架构图等常用图片。不仅可以画图、还可以作为会议画板使用。

Excalidraw 是一款开源软件，不需要安装、不需要注册就可以免费使用。

GitHub地址：github.com/excalidraw/… twitter地址：twitter.com/excalidraw

目前已经有41.9k star了 在这里插入图片描述 作者呢也在持续更新 在这里插入图片描述

3 excalidraw 使用

excalidraw 可以直接浏览器打开使用其SaaS版本，或者自己部署 又或者集成到自己软件中

excalidraw 地址：excalidraw.com/

浏览器输入地址打开即可使用，使用起来也很简单，都不用去学 在这里插入图片描述

3.1 快速绘制基本图形

可以快速绘制 矩形、菱形、椭圆、箭头、线、文字 等基本图形

[video(video-YVOMhS5K-1677154987998)(type-csdn)(url-live.csdn.net/v/embed/277…)]

3.1.1 矩形、菱形、椭圆绘制

① 绘制图形

选中矩形（快捷键2）或菱形（快捷键3）或椭圆（快捷键4）-->拖动鼠标即可画出各种大小图形 在这里插入图片描述 在这里插入图片描述 小技巧：选中要绘制的基本图形，按住shift 可以绘制正方形、圆形

② 调整边框颜色 在这里插入图片描述 ② 填充背景 在这里插入图片描述 在这里插入图片描述

还可以选择填充效果 在这里插入图片描述 在这里插入图片描述

③ 边框样式 在这里插入图片描述 还可以选择边框线条风格 在这里插入图片描述

3.1.2 曲线、直线绘制

① 线条绘制

选中箭头（快捷键5）或线条（快捷键6）==>点击创建多个点/拖到创建直线 在这里插入图片描述

在这里插入图片描述 拖动上图中的紫色小圆点也可以调整线条幅度

② 选择线条样式 在这里插入图片描述

3.2 图形对齐

选中需要对齐的图形==>选择对齐方式 在这里插入图片描述 上述图形分别左对齐、右对齐后效果 在这里插入图片描述

3.4 插入图片

选择插入图片（快捷键9）==> 选择需要插入的图片 在这里插入图片描述 在这里插入图片描述

3.5 橡皮擦删除元素

选中需要擦除的元素==>点击橡皮擦（快捷键0）擦除元素

在这里插入图片描述

3.5 添加个人素材库

上面这些图形还不够用，也可以添加别人绘制好的素材为我所用。

① 点击右上角的素材库 在这里插入图片描述 ②预览我们需要的素材 在这里插入图片描述 ③ 添加到素材库 在这里插入图片描述 ④绘制火柴人 在这里插入图片描述

3.6 添加文字

点击文字（快捷键8）==>敲入文字 在这里插入图片描述 在这里插入图片描述

3.6 导入表格数据

它还有一个很厉害的功能，就是根据excel中的数据生成柱状图、折线图

① 准备数据 在这里插入图片描述

②粘贴到Excalidraw 在这里插入图片描述 ③ 简单表格来了 在这里插入图片描述

3.7 实时协作

可以多个人协同绘制。只需要将链接分享给需要协作的用户即可同时编辑 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

3.8 保存文件

可以将我们绘制好的图保存到本地为.excalidraw 后缀的文件 在这里插入图片描述 在这里插入图片描述

3.8 导入绘图文件

可以将上一步导出的文件 在这里插入图片描述

3.9 导出成图片

可以将绘制好的导出成图片。导出图片...==>选择文件格式（PNG、SVG）

在这里插入图片描述

在这里插入图片描述

4 本地部署

文章开头我们就说过，Excalidraw是一个开源项目。我们可以将其从GitHub 上clone 下来，然后进行本地化部署。

既然有SaaS版本可以在线使用，为啥还要进行本地化部署呢？ 不知道小伙伴有没有发现，之前我们插入的文字中，英文是手写体,但中文不是，中文就显得格格不入。 在这里插入图片描述 为了解决以上问题我们就可以将代码clone 进行修改，添加字体后编译、部署到Gitee Page 或者GitHub Page。 部署都是免费的，由于Gitee 在国内访问速度还是挺快的 ，所以我们选择Gitee Page 部署。 这个是我部署好的地址：xiezhr.gitee.io/excalidraw/

这个是其他博主部署到GitHub Page上的，支持中文手写字体 可以放心使用 在这里插入图片描述

由于前端不太熟，本地编译后中文手写字体可以了，但是发布到Gitee Page 后还有点问题。

等后面解决后再出一篇部署相关的，又给自己挖了个坑~ (⊙﹏⊙) 在这里插入图片描述

本次内容到此就结束了，各位小伙伴们，我们下期再见~ (●'◡'●)

avatar
文章
阅读
粉丝