用极简的excalidraw画超帅的架构图

文摘   2024-08-07 08:15   新加坡  
我非常喜欢“一图胜千言”这句话,有时候和同事讨论问题,经常鸡同鸭讲,这个时候我往往喜欢说:“我们在白板上画一下... ...”,然后效果奇好。

以前发过一次,但又有读者留言或私信问我画图工具是什么。所以今天再次安利一下我用的画图工具:https://excalidraw.com/

这款软件在线免费使用,极简,性冷淡风,也有很多文档类软件做了内嵌。

但是,同样一支毛笔,“胸有成竹”的人和“胸无点墨”的人画出来的效果是截然不一样的,所以关键还是需要锻炼自己的架构抽象能力。

内功深厚的武林高手,随手拿一根树枝,也如利剑一般。


1. 一些成品图示例

先上几个以前文章中的手绘风格图,直观感受一下:

图1. 最简跨境收单协议关系图

图2. 极简跨境支付与打算打款图

图3. 极简信息流与资金流

图4. 极简信息流与资金流(2)

图5. 三层对账体系

图5. 支付记账流程

图6. 结算记账流程

图7. 账户分类

图8. 记账方向

图9. 科目分类

图10. 最简跨境收单时序图

图11. 核心系统依赖图

图12. 支付系统架构图

图13. 即时到账资金流

图14. 业务ID生成规范

图15. 日志分类

图16. 收银核心领域模型

图17. 支付咨询核心工作

图18. 状态机图

图19. 削峰填谷原理

图20. 时间窗口算法实现

图21. 密钥层级关系图

图22. 支付安全核心关注点

图23. 数字信封工作原理

图24. 极简风控系统

2. 我为什么强烈推荐Excalidraw

从事软件架构设计10多年,我一直相信“一图胜千言”,好多时候写几千字,还不如一个架构图来得直观,也正是这个原因,我使用过有二十来款画图软件,甚至还花不少钱买了一些号称适用于软件行业的专业画图软件。然而这些软件都过于笨重繁琐,而且画出来的图还特别丑。

去年下半年突然发现了Excalidraw,简直如获至宝,相见恨晚,感叹世界上竟然还有这么简洁而强大的图形绘制工具,尤其爱Excalidraw极简的界面,极其容易上手的零门槛,不用安装,直接拖拉拽就能快速出图。

极致愉悦的画图体验。

3. Excalidraw简介

Excalidraw是一款开源的在线图形绘制工具,它的设计理念是简单易用,特点就是直观的界面和简洁的操作方式。不用安装,使用在线版本,浏览器打开:https://excalidraw.com/

先上界面,除了简洁还是简洁,我就喜欢这样的性冷淡风:

Excalidraw默认只提供基本的形状、箭头、文本框等元素,但是也因为如此,我们可以自由组合出很多适合自己的图形,而我以前使用的一些画图软件,虽然提供了非常多的基础图案,但可定制性非常不好用。

此外,Excalidraw还提供了丰富的免费第三方扩展图形库,可以直接加载使用,也非常方便把自己的图形保存为组件库,下次直接使用。

还有一些拓展功能,比如实时协作,多人可以同时在同一份文档上进行编辑和绘制,操作会即时同步到其他用户的屏幕上。

还有AI绘图功能,用自然语言描述需求,直接出图,不过我测试了一下,感觉离实用还差一点火候。

4. 画图技巧

首先要心中有图(胸有成竹),知道自己的文章在什么地方需要使用样的图形可以恰到好处地表达出自己的思想。在引言部分,我们可以看到,我画的图有:序列图,系统架构图,流程图,状态机图,依赖关系图等,这些都是根据文章需要来画的。

其次,在重点图形元素上使用不同的颜色。Excalidraw提供了一些精心挑选的配色,直接使用就让人感觉赏心悦目。

再次,学会使用图层和基础图案组合,让整体布局有层次感。

最后,不必追求完美。Excalidraw的手绘风格,随便一画就比其它软件好看。

5. 案例分享

以下面这个图为例做个简单演示。图中用到了基本的框图,圆圈,箭头,还有自己组合出来的管道,第三方组件图等。

5.1. 安装本地快速启动

如果使用苹果Macbook,使用Google Chrome 浏览器打开:https://excalidraw.com/。在右边有个安装按钮,点击就会安装。

这样就可以直接在应用程序中打开,不需要每次都打开浏览器。

5.2. 新建

这个“重置画布”,等同于“新建”。我摸索了好久,也有读者留言问我“新建“在哪里。

5.3. 导入第三方素材库

第三方素材库可以节约很多时间。

点击右上角的素材库,跳到官网的素材库去。选择自己喜欢的加载或下载。

5.4. 维护自己的本地素材库

可以把自己常用的组件保存到自己的本地素材库,下次用起来方便。

5.5. 画自己的组件

找不到现成的组件,就自己画一个出来。

以画一个管道图为例子(支付安全问题的图中,需要用到管道加密的示例)。

先出一个长方形:

然后画两个椭圆,管道就出来了:

5.6. 使用素材库的组件

点击右上角的素材库,点击一个图标,就到画板上。

5.7. 各种组合

各种基本图标拖、拉、拽、放大、缩小、组合,最终如下图所示。

5.8. 保存与导出图片

保存很简单,就直接保存到本地电脑上。

导出的话,可以选择保存图片。我一般都是直接复制到剪贴板,然后粘贴到文档中。因为如果先保存到本地图片,还得在文章中导入图片,麻烦。

5.9. 多人协作

支持多人协作,使用“实时协作”功能就行。

5.10. AI绘图

试用了一下,出图效果不行,还是不如自己动手。

6. 结语

今天简单地介绍了一下Excalidraw这款极简的绘图工具,以及常用的一点小技巧,希望能为大家在画架构图时能提供一些有益的参考。

曾经苦苦找寻各种画图软件,回望过往,缺的是画图软件吗,其实不是,缺的是心中的那幅图。

有个交流支付知识的小群,供有兴趣的同学加入,如果满了或过期,可先加微信(yinmon_sc)后进入,添加微信请备注:666。已经加过的就不需要重复加。

   

隐墨星辰
支付/投资/成长,随手记录点滴,待它日回望,知我曾来过。