写文档、写博客难免需要绘图,笔者在前端时间写专栏《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 编写俄罗斯方块”系列文章中用的大部分插图都是电子表格绘制的,这是其中一张

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

相关阅读

除此之外,笔者还在视频《从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 也能画,没试过。

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