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

写文档、写博客不免须要绘图，笔者在前端时间写专栏《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 也能画，没试过。

笔者使用的绘图工具并不算多，可是平常工做也够用了。若是您有什么好的工具，也请向笔者推荐哦！