大厂程序员都在用什么工具绘图？-技术圈

大厂技术高级前端 Node进阶

点击上方程序员成长指北，关注公众号

回复1，加入高级Node交流群

作者：程序员晚天

原文：https://juejin.cn/post/7239996872005091383

如果你不只闷头写代码，还需要方案设计、内部分享、向上汇报、述职答辩、追求晋升等等，绘图工具几乎是互联网从业者标配工具。好用的绘图工具，可以大幅提升绘图效率和图形效果，甚至能够让你的汇报鹤立鸡群、增色不少。

那么，弱弱的请教下，你在用什么「工具绘图」呢？欢迎大家把自己最喜欢的绘图工具回复在本文的评论区。

本文先抛砖引玉，介绍一个作者在使用，且非常喜欢的白板绘图工具 Excalidraw^[1]。

Excalidraw

Excalidraw^[2] 是一个开源的无限画布的手绘效果白板绘图工具，支持多人协作和端到端加密。

作者

Excalidraw^[3] 的作者是一位目前在 Facebook 工作的法裔前端开发工程师 Vjeux。除了是 Excalidraw^[4] 的作者之外，还是 React Native、Prettier 的联合创始人，也是 CSS-IN-JS、Yoga、React Conf 的创建者。

发展趋势

Excalidraw 也是 Github 开源项目，从 2020 年开源开始，Star 数一路直线增长，目前已经积攒了 49.1k 的 Star 数。

从 npm 趋势上，我们也能看到 Excalidraw 的热度目前也处于一个爆发式增长的阶段，没有已经有接近 7w 的 npm 下载量。

效果

下面我们来看下，使用 Excalidraw 我们能够绘制怎样的效果.

首先,比较常见的,我们可以绘制手绘效果的流程图,从这张图的效果我们可以看出 Excalidraw 的手绘效果还是非常真实的。

我们还可以绘制网页的线框图、步骤图、不同形式的流程图、看板图等等；

线框图：

步骤图：

天马星空的流程图：

看板：

甚至只要发挥想象力，我们可以绘制出所有手绘等够得到的图形。比如这些火柴人。

功能介绍

对效果进行简单展示之后，我们来对 Excalidraw 的工具进行手把手的演示。接下来，我将给大家演示 Excalidraw 的布局、基础绘图、图层、批量操作、图表、快捷键、文件保存、多端能力。

布局

我们来看下 Excalidraw 的布局。

左上角是菜单栏，有打开文件、保存文件、导出图片、实时协作、重置画布、设置画布背景等功能；

顶部是工具栏，有拖动、选择、矩形、菱形、圆形、箭头、线、画笔、文本、图片、橡皮擦等功能；

右上角有实时协作、素材库功能；

左下角可以缩放画布、撤回操作和取消撤回操作；

右下角是快捷键和帮助。

基础绘图

介绍完布局，我们来实操下绘图。Excalidraw 的绘图非常简单，拿到就可以直接上手。下面，我们来绘制一个矩形，我们可以看到在左侧菜单，可以对我们刚绘制的图形进行属性设置，包括描边、背景、宽度、边框、线条风格、边角、透明度，同时我们可以可以进行图层、赋值、删除、增加链接等操作；

接下来，我们用 Excalidraw 绘制一个简单的流程图。

如果想要增加绘图效率，最好的方式就是使用快捷键。我们可以在右下角的快捷键帮助中看到所有快捷键。

此外，Excalidraw 还支持图层、批量对齐、文件保存、图片导出等能力。

自动生成图表

Excalidraw 还有一个非常值得一提的功能是基于“两列表格”自动生成图表，简直秀的飞起。

例如，我们有下列「全球公司市值排行榜」两列表格数据：

公司名称	市值 (亿美元)
Apple	2,430.92
Microsoft	1,633.23
Amazon	1,599.03
Alphabet	1,087.08
Facebook	757.89
Tencent	728.39
Alibaba	713.7
Berkshire Hathaway	613.37
Visa	438.32
Johnson & Johnson	422.63

我们复制上述两列数据黏贴到 Excalidraw 中，将会得到如下效果：

随便选择一个图表形式，即可生成如下效果：

是不是秀的飞起？再也不用使用 Excel 中生成的丑陋的图表了。

缺点

Excalidraw 的功能演示完成。整体体验下来，Excalidraw 的绘图能力是非常强大的，但是也有两个比较致命的缺点，会劝退很多人。

缺少中文手绘效果，使得使用中文绘制出的内容充满违和感；
不支持多画布能力，如果我们需要并行绘制多个画布，往往是不太可行的。但是，现实场景下，我们不可能一个个的画布绘制，往往是在绘制一个主题画布的时候，就需要绘制另一个主题的画布。

解决方案

只提问题，不提解决方案是远远不够的。这里作者针对上述两个问题，也给出了解决方案。那就是 Handraw^[5]，一个支持中文手绘效果和多画布能力的 Excalidraw 增强版。

Handraw

Handraw^[6] 是基于开源 Excalidraw 进行了「中文手绘效果」和「多画布」能力增强，并推出了免费线上服务 Handraw^[7] 和开源项目 excalidraw-cn^[8]。

中文手绘效果

我们直接拿前文中的流程图做示例，分别使用 Handraw^[9] 和 Excalidraw 实现该流程图，对比效果如下，Handraw 完美支持了中文手绘效果，解决了手绘图中中文效果确是打印体这种满满违和感的问题。

多画布能力

Handraw^[10] 相较 Excalidraw 在左上侧菜单中新增了「新建画布」和「切换画布」功能，使得用户可以同时创建和绘制多个画布，相互不干扰，大大提升并行绘制效率。与此同时，也在画布左上角显示了当前画布名称，告诉用户当前编辑的画布是哪一个，避免在并行绘制过程中出现画布混淆。

总结

Excalidraw 是一个非常强大的手绘效果的白板工具，一经推出，就非常火爆、广受欢迎。但是作为中文用户，在使用中却没有中文手绘效果，这是接受不了的。另外，只有单画布能力也大大限制了我们日常的使用效率。

因此，作者基于开源 Excalidraw 进行了能力增强，并推出了免费线上服务 Handraw^[11] 和开源项目 excalidraw-cn^[12]（欢迎 star），大家可免费使用。

文章提到的增强版 Excalidraw 产品 Handraw 已升级为 ReveZone，不仅支持中文手绘效果，支持自定义字体，支持类 Notion 笔记功能，使用方法如下，欢迎前往使用。

ReveZone：

线上体验版 (基础功能): revezone.com^[13]
桌面应用版 (全量功能): github.com/revezone/re…^[14]

另外，欢迎大家把自己喜欢的绘图工具回复到评论区，大家互通有无，交流学习。