1. 引言
好多读者对我的《百图解码支付系统设计与实现》专栏没有记住多少内容，倒是对我画图工具特别感兴趣，经常留言或私信问我画图工具是什么。今天就专程向各位安利一下我用的画图工具：excalidraw.com/。
先上几个以前文章中的手绘风格图，直观感受一下：
图1. 最简跨境收单协议关系图（来源：《跟着图走，学支付：在线支付系统设计的图解教程》）
图2. 最简跨境收单时序图（来源：《跟着图走，学支付：在线支付系统设计的图解教程》）
图3. 核心系统依赖图（来源：《跟着图走，学支付：在线支付系统设计的图解教程》）
图4. 支付系统架构图（来源：《跟着图走，学支付：在线支付系统设计的图解教程》）
图5. 即时到账资金流（来源：《图解收单平台：打造商户收款的高效之道》）
图6. 业务ID生成规范（来源：《交易流水号的艺术：掌握支付系统的业务ID生成指南》）
图7. 日志分类（来源：《支付系统日志设计完全指南：构建高效监控和问题排查体系的关键基石》）
图8. 收银核心领域模型（来源：《图解收银台：支付系统承上启下的关键应用》）
图9. 支付咨询核心工作（来源：《图解收银台：支付系统承上启下的关键应用》）
图10. 状态机图（来源：《支付系统的心脏：简洁而精妙的状态机设计与核心代码实现》）
图11. 削峰填谷原理（来源：《削峰填谷与应用间解耦：分布式消息中间件在分布式环境下并发流量控制的应用》）
图12. 时间窗口算法（来源：《精确掌控并发：固定时间窗口算法在分布式环境下并发流量控制的设计与实现》）
图13. 密钥层级关系图（来源：《图解金融级密钥管理系统：构建支付系统的安全基石》）
图14. 支付安全核心关注点 （来源：《一文搞懂支付安全》）
图15. 数字信封工作原理 （来源：《一文搞懂支付安全》）
图16. 极简风控系统 （来源：《一文搞懂支付安全》）
2. 我为什么强烈推荐Excalidraw
从事软件架构设计10多年，我一直相信"一图胜千言"，好多时候写几千字，还不如一个架构图来得直观，也正是这个原因，我使用过有二十来款画图软件，甚至还花不少钱买了一些号称适用于软件行业的专业画图软件。然而这些软件都过于笨重繁琐，而且画出来的图还特别丑。
去年下半年突然发现了Excalidraw，简直如获至宝，相见恨晚，感叹世界上竟然还有这么简洁而强大的图形绘制工具，尤其爱Excalidraw极简的界面，极其容易上手的零门槛，不用安装，直接拖拉拽就能快速出图。
通过Excalidraw，发现绘制超帅的系统架构图变得如此轻而易举，甚至有了一种愉悦的体验。
3. Excalidraw简介
Excalidraw是一款开源的在线图形绘制工具，它的设计理念是简单易用，特点就是直观的界面和简洁的操作方式。不用安装，使用在线版本，浏览器打开：excalidraw.com/。
先上界面，除了简洁还是简洁，我就喜欢这样的性冷淡风：
Excalidraw默认只提供基本的形状、箭头、文本框等元素，但是也因为如此，我们可以自由组合出很多适合自己的图形，而我以前使用的一些画图软件，虽然提供了非常多的基础图案，但可定制性非常不好用。
此外，Excalidraw还提供了丰富的免费第三方扩展图形库，可以直接加载使用，也非常方便把自己的图形保存为组件库，下次直接使用。
还有一些拓展功能，比如实时协作，多人可以同时在同一份文档上进行编辑和绘制，操作会即时同步到其他用户的屏幕上。
还有AI绘图功能，用自然语言描述需求，直接出图，不过我测试了一下，感觉离实用还差一点火候。
4. 画图技巧
首先要心中有图，知道自己的文章在什么地方需要使用样的图形可以恰到好处地表达出自己的思想。在引言部分，我们可以看到，我画的图有：序列图，系统架构图，流程图，状态机图，依赖关系图等，这些都是根据文章需要来画的。
其次，在重点图形元素上使用不同的颜色。Excalidraw提供了一些精心挑选的配色，直接使用就让人感觉赏心悦目。
再次，学会使用图层和基础图案组合，让整体布局有层次感。
最后，不必追求完美。Excalidraw的手绘风格，随便一画就比其它软件好看。
5. 案例分享
以下面这个图为例做个简单演示。图中用到了基本的框图，圆圈，箭头，还有自己组合出来的管道，第三方组件图等。
5.1. 安装本地快速启动
如果使用苹果Macbook，使用Google Chrome 浏览器打开：excalidraw.com/。在右边有个安装按钮，点击就会安装。
这样就可以直接在应用程序中打开，不需要每次都打开浏览器。
5.2. 导入第三方素材库
第三方素材库可以节约很多时间。
点击右上角的素材库，跳到官网的素材库去。选择自己喜欢的加载或下载。
5.3. 维护自己的本地素材库
可以把自己常用的组件保存到自己的本地素材库，下次用起来方便。
5.4. 画自己的组件
找不到现成的组件，就自己画一个出来。
以画一个管道图为例子（支付安全问题的图中，需要用到管道加密的示例）。
先出一个长方形：
然后画两个椭圆，管道就出来了：
5.5. 使用素材库的组件
点击右上角的素材库，点击一个图标，就到画板上。
5.6. 各种组合
各种基本图标拖、拉、拽、放大、缩小、组合，最终如下图所示。
6. 保存与导出图片
保存很简单，就直接保存到本地电脑上。
导出的话，可以选择保存图片。我一般都是直接复制到剪贴板，然后粘贴到文档中。因为如果先保存到本地图片，还得在文章中导入图片，麻烦。
7. 结语
今天简单地介绍了一下Excalidraw这款极简的绘图工具，以及常用的一点小技巧，希望对你画出自己超帅的设计图有一点点帮助。
我的主业仍然是写支付系统设计和实现的系列文章。 目前已经写了30来篇大家觉得还不错的文章，并导出了PDF。
系列文章PDF合集，不定时更新：
Github： https://github.com/yinmo-sc/Decoding-Payment-System-Book
百度网盘： https://pan.baidu.com/s/1I5dIR8SoGH_Iy_8Hbv8mXQ?pwd=0000
公众号：隐墨星辰。