边城工具集：绘图及标注工具

Posted 2021-01-27

写文档、写博客难免需要绘图，笔者在前端时间写专栏《JavaScript 全栈工程师养成记》 的时候，就使用了大量的绘图工具来绘制插图，受到读者们的要求和鼓励，决定将自己使用的绘图工具和方法展示出来，供大家参考、批评、指正。

根据笔者的习惯，介绍的工具几乎都是免费或个人使用免费的，如果有收费工具，笔者会特别说明。

纸、笔和扫描软件

最先介绍的工具，非常传统，就是纸和笔。不过纸笔绘制的内容要在呈现在电子文档中或者在网络上分享，还需要电子化，扫描仪固然是非常专业的设备，但不是人人都能找一这样的条件。不过智能手机几乎人人都有，安装一个扫描软件就能解决问题。扫描软件很多，笔者一直使用的是老牌软件“全能扫描王”。

先秀两张图：

纸笔是在思考问题时能使用的最直接，也最方便的工具。提笔便画，不受软件格式约束（笔者在使用软件时常常会被一些细节分散注意力，比如字体、颜色、线条粗细等）。

当然纸笔绘制的一般都是草图，要想放在正式文稿当中还需要加工，这个时候就要用一些绘图类软件了。比如上面两张图，笔者要把它们绘制成正式文稿的话，使用脑图工具 MindMaster 来绘制第一张，使用 WPS 演示（或 PowerPoint）来绘制第二张。

脑图工具：MindMaster

脑图又称思维导图，是将思维过程绘制出来的最佳工具之一。笔者曾使用过多款思维导图工具，比如开源的 FreeMind，曾经具有免费版本的 XMind，在线的百度脑图，及至目前最常用的 MindMaster。比如前面提到的《javascript 全栈工程师养成记》，笔者就用脑力绘制了一个大纲

脑图可以很好地表达具有分支结构的内容，也可以对其中一些节点进行连续关联。但是如果跨分支的关联节点太多，脑图就可能会画得比较乱，还是需要一些技巧和细致调整来保持脑图的整洁程度。

用办公套件画示意图

办公套件，当然是指 WPS 或 Microsoft Office。笔者近年来比较习惯使用 WPS，尤其是 WPS 2019 的界面的操作非常人性化，当然部分功能还不如 Microsoft Office 强大，但笔者认识常规应用上 WPS 的体验已经超过 Office 了。笔者养成这个习惯是因为 WPS 个人版本免费，虽然新买的电话赠送了 Office 2016 家庭版，但是用习惯了，只有在遇到 WPS 不能很好处理的问题时会换 Office 来处理。

套件中，最常用的两个工具是幻灯片和电子表格。幻灯片本身的重点就在于示意，所以用它来绘制示意图非常合适，还是拿一张专栏中的插图来举例：

而且还可以用来画一些简单的原型图：

但如果是一些开头比较规则的图，不管是原型图还是示意图，都可以用电子表格来绘制，比如这样在“JavaScript/TypeScript 编写俄罗斯方块”系列文章中用的大部分插图都是电子表格绘制的，这是其中一张

相关阅读

• JavaScript 版俄罗斯方块
• JavaScript 版俄罗斯方块 - 重构
• JavaScript 版俄罗斯方块 - 转换为 TypeScript
• TypeScript(JavaScript) 版俄罗斯方块 — 深入重构
• 代码（注意查看分支）

除此之外，笔者还在视频《从JS到TS开发数独游戏（JS版）》的 2-2 节中利用电子表格讲解了洗牌算法。

还有 TS 版在这里

除此之外，绘制统计图形，更是电子表格的强项。当然如果想把统计图形绘制得漂亮一点，可以使用百度 ECharts，它官方示例 中的数据都是可以修改的 —— 找个自己中意的示例，改下数据就好。

强大的看图工具：FastStone Image Viewer

FastStone Image Viewer，简称 FSIV， 是笔者非常喜欢的一款看图工具，功能强大，而且免费。它提供好几种模式（列表、预览、窗口、全屏、幻灯片等），但这不是重点。重点是它还有很多常用的图片处理功能：

• 常用的缩放、裁剪、旋转、翻转等，尤其是它的“任意角度旋转”功能，非常贴心的提供了根据用户绘制水平或垂直参考线来旋转，不需要去猜角度（菜单：编辑→放置→任意角度旋转）
• 补光/减光：可以分别对阴暗区域和明亮区域进行亮度调整，可以调整对比度和饱和度
• 编辑工具板：可以对图片添加矩形（正方形）、椭圆（圆）、线条、箭头、高亮区域、文本、插图等。不过笔者少用这个功能，因为有后面要介绍的 Snipaste 截图工具。
• 调整色阶、曲线、锐化、模糊、去噪音等，尤其是“调整色彩”功能，可以在一个界面上调整亮度、对比度、伽玛、红绿蓝通道、色调和饱和度，都快赶上 Photoshop 了。
• 几种效果：灰度、负片、怀旧（老照片）
• 还有几种特效：浮雕、素描、油画等

你以为这就完了，No, No, No，FSIV 还有强大的批处理功能，列表浏览模式下，多选几张图片，在右键菜单“工具”中就可以看到批量重命名和批量转换功能。

• 批量重命名很灵活，可以指定自增序号的模板，还可以使用查找替换，恐怕比很多专门的重命名工具还专业

• 批量转换就更专业了，转换图片格式这是最基本的，在高级属性里还可以调整大小、旋转、裁切、水印……举例来说，调整大小的时候可以按像素、百分比调整，还可以按一条边（可以是长边、短边、高、宽）为基础来调整。功能太多，读者可以自行研究。

  

FastStone 还有非常厉害的打印功能。随便选一张图，点击打印（或 Ctrl+P），会弹出打印设置框，在这里可以按顺序增加若干张其它图片，然后打印成 PDF，非常方便（如果只是输出到打印机，批量或单张并没多大差别）。

顺带说明一下，这家公司还出品了一个叫 FastStone Capture 的截图工具，也是非常好用的，可惜从 v5.4 开始收费。不过基本的截图功能 FSIV 也提供哦。还有一点需要说明的是，FastStone 的官网国内不能打开，大家在各软件站下载时请注意安全，笔者推荐使用电脑管家之类的具有软件管理功能的安全软件下载。

截图工具 Snipaste

截图工具很多，甚至 Windows 都自带截图，哪怕是老版 Windows，也可以用 PrintScreen 截全屏，用 Alt+PrintScreen 截当前窗口。何况还有 QQ 截图、浏览器截图、输入法截图等。

在众多的截图工具中，笔者偏爱 Snipaste，因为它使用简单，功能全面。官网已经介绍得非常全面，我也不会比官网描述得更好。总的来说，笔者喜欢它主要因为以下几个功能：

• 标注：线条、三种箭头、矩形、椭圆、文本、马赛克，粗细可调，颜色可调，透明度可调……
• 截图后可以直接生成贴图窗口，把图片呈现在桌面上（就像便笺那样），可缩放（Ctrl+滚动）可调透明度（Shift+滚动）
• 有取色功能

说起来语言不多，用起来是真的强大。Snipates 现在还提供收费的专业版，其中增值的功能一般来说也不怎么需要，不过笔者为了支持作者继续开发，毫不犹豫的购买了专业版。

绘制流程图、序列图等

Visio？太贵，用不起。

笔者曾经也用WPS演示来绘制流程图，简单的还行，复杂点的真心累。后来发现了在线的 ProcessOn，不过现在也已经收费了，免费用户有绘图量的限制。当然，不嫌麻烦的话，可以画完导出后删除再新建。

后来在使用 Markdown 的过程中，笔者发现了通过文本描述来绘制流程图的神工具。先来看看效果

这是来自“作业部落（CMD Markdown）”的截图，作业部落是个免费的在线 Markdown 编辑器，可在线保存，也提供了客户端下载。除了流程图，它还支持绘制序列图的甘特图，语法参考如下：

• 流程图语法参考
• 序列图语法参考
• 甘特图语法参考

除了作业部落，笔者还经常使用有道云笔记的 Markdown 功能。有道云笔记也提供了通过文本描述来绘制流程图、序列图和甘特图的功能。

有这些工具，画图方便多了。

其它工具

美工把设计图交给前端的时候，前端会不断的问，这里距离多少，那里颜色值是什么……真的累。所以美工交设计图的时候，通常会进行标注，这类工具，最有名的当然是马克鳗，基础功能免费可用。除此之外腾讯 CDC 还出品过一款 Darado

绘制原型图的工具比较多，但免费好用的不多。墨刀是一个在线的原型图工具，不仅可以画原型图，还可以绘制页面流，免费版受限。

ER 图绘制工具，没找到免费好用的。PowerDesigner 应该是首选，据说 mysql Workbench 也能画，没试过。

笔者使用的绘图工具并不算多，但是日常工作也够用了。如果您有什么好的工具，也请向笔者推荐哦！