画图工具
6.2 画图经验分享
图解网站上线以来，一直有很多同学喜欢我画的图，然后很多同学就很好奇 ，我这些技术文章的
配图是用什么 工具画的。
所以，今天就再啰嗦 聊一下， 画图这件事。
我的图解类的文章，可以说图片是灵魂之处，没有了图片，相当于失去了灵魂，技术文章本身就
很枯燥，如果文章中没有几张图片，很多人看着看着 就被劝退了，剩下没被劝退的估计看着看着
就睡着 了。
有时候，一张图片的信息，胜过几千字的解释。文字的描述都线性的，有时候解释的地方，可能
看着 迷糊的同学，都不知道在解释哪个问题。而画图去解释一个问题，图片里包含了很多信息，
就能一目了然的知道在说什么 问题。
可能有的读者会说自己不写文章呀，是不是没有必要了解画图了？
我觉得这是不对，画图在 我们工作中其实也是有帮助的。比如，如果你想跟领导汇报一个业 务流
程的问题，把业务流程画出来，肯定用图的方式比用文字的方式交流起来会更有 效率，更轻松
些，我自己常常 通过这 种方式跟领导反馈问题。
再比如说，如果你参与了 一个比较复杂的项目开发，你也可以把代码的流程图给画出来，不仅 能
帮助自己加深理解，也能帮助后面参与的同事能更快的接手这个项目，甚至如果你要晋升级别
了，演讲 PTT 里的配图也是必不可少的。
不过很多人都是纠结 用什么 画图工具，其实小林觉得再烂的画图工具，只要你思路清晰，确定自
己要表达出什么 信息，也是能把图画好的，所以不必纠结 哪款画图工具，挑一款自己画起来舒服
的就行了。
画图工具
“小林，你说的我都懂，我就是喜欢你的画图⻛格嘛，你就说说 你用啥画的？”
没问题，直接坦白讲，我用了 2 年的画图工具是：draw.io 。
2025/8/7 11:22 6.2 画图经验分享|小林coding
> https://xiaolincoding.com/network/5_learn/draw.html 1/17我的图解文章里的图片全是在 draw.io 这个工具画的，写了那么久 的图解文章，再加上我工作中也
有画图的习惯，累计也有在上面画了接近 1000+ 张图片。
选择它的原因很简单，因为是免费的，而且图片的源文件可以直接保存到 Github 的，这样非常方
便，相当于直接云备份到了 Github 仓库里。
draw.io 画图工具可以在线画图，或者下载应用，或者作为 visual studio code 插件来使用。
我比较常用的方式是在线画图，就是直接在网站上画图。draw.io 一开始的画图网站地址 就是直接
在浏览器输入 draw.io 地址 后，就会自动进入在线画图工具⻚面，现在它改版了， 改成重定向到
官网地址 了，所以现在想进入在线画图工具⻚面，地址 是：
我们来看看 这个画图工具的⻚面⻓什么 样子，主要分为三个 区域，从左往右的顺序是「图形选择
区域、绘图区域、属性设置区域」。
其中，最左边的「图形选择区域」可以选择的图案有很多种，常⻅的流程图、时序图、表格图都
有，甚至还可以在最左下⻆的「更多图形」找到其他种类的图形，比如网络设备图标等。
2025/8/7 11:22 6.2 画图经验分享|小林coding
> https://xiaolincoding.com/network/5_learn/draw.html 2/17再来，最右边「属性设置区域」可以设置文字的大小，图片颜色、线条形状等，而我最常用颜色
板块是下面这三种，都是比较浅色的，这样看起来舒服些。
基本图形介绍
我常用的一个图形是圆⻆方块图 ，它的位置如下图：
2025/8/7 11:22 6.2 画图经验分享|小林coding
> https://xiaolincoding.com/network/5_learn/draw.html 3/17但是它默认的颜色过于深色，如果要在方框图中描述文字，则可能看不清楚，这时我会在最右侧
的「属性设置区域」把方块颜色设置成浅色系列的。另外，还有一点需要注意的是，默认的字体
大小比较小，我一般会调成 16px 大小。
如果你不喜欢上图的带有「划痕」的圆⻆方块图 形，可以选择下图中这个最简洁的圆⻆方框图
形。
这个简洁的圆⻆方框图形，再搭配颜色，能组合成很多结构图，比如我用过它组成过 CPU Cache
的结构图。
2025/8/7 11:22 6.2 画图经验分享|小林coding
> https://xiaolincoding.com/network/5_learn/draw.html 4/17那直⻆方框图形，我主要是用来组成「表格」，原因自带的表格不好看，也不 方便调。
比如，我用直⻆方框图形，画过「不同层级的存储器之间的成本对比表格」。
2025/8/7 11:22 6.2 画图经验分享 | 小林coding
https://xiaolincoding.com/network/5_learn/draw.html 5/17 如果觉得直直 的线条太死板，你可以把图片属性中的「Comic 」勾上，于是就会变成歪歪 扭扭 的效
果啦，有点像手绘⻛格，挺多人喜欢这种⻛格。
比如，我用过这 种⻛格画过 TCP 三次握手流程的图。
2025/8/7 11:22 6.2 画图经验分享|小林coding
> https://xiaolincoding.com/network/5_learn/draw.html 6/17方块图 形再加上菱形，就可以组合成简单程序流程图了，比如我画过「写直达」缓存更新模型的
流程图。
2025/8/7 11:22 6.2 画图经验分享 | 小林coding
https://xiaolincoding.com/network/5_learn/draw.html 7/17 所以，不要小看这些基本图形，只要构思清晰，再基本的图形，也是能构成层次分明并且好看的
图。
各种组合画图
2025/8/7 11:22 6.2 画图经验分享 | 小林coding
https://xiaolincoding.com/network/5_learn/draw.html 8/17 基本的图形介绍完后，相信你 画一些简单程序流程图等图形是没问题的了，接下来就是各种图形
- 线条的组合的了。
通过一些基本的图形组合，你还可以画出时序图，时序图可以用来描述多个对象之间的交互 流
程，比如我画过多个线程获取互斥锁的时序图。
再来，为了 更好表达零拷⻉技术的过程，那么用图的方式会更清晰。
2025/8/7 11:22 6.2 画图经验分享|小林coding
> https://xiaolincoding.com/network/5_learn/draw.html 9/17也可以，只用一张图就描述 MySQL 执行一条 SQL 查询语句的流程。
当然，draw.io 这个画图工具，不只有简单图形，还有其他自带的设备类图形。通常我都会这些设
备类型的图标来画网络图。
比如，我之前画过路由器寻址的图片。
2025/8/7 11:22 6.2 画图经验分享|小林coding
> https://xiaolincoding.com/network/5_learn/draw.html 10/17你要说，我画过最复杂的图，那就是写 TCP 流量控制的时候，把整个交互 过程 + 文字描述 + 滑动
窗口状况都画出来了，现在回想起来还是觉得累人。
2025/8/7 11:22 6.2 画图经验分享 | 小林coding
https://xiaolincoding.com/network/5_learn/draw.html 11/17 2025/8/7 11:22 6.2 画图经验分享 | 小林coding
https://xiaolincoding.com/network/5_learn/draw.html 12/17 还有好多好多 ，我就比一一列举了 。
图床
我之前用的图床是一套免费的图床，但是踩过坑。
我发现这类免费图床用着用着就不能用了，然后每次 迁移图片我都花费很多时间去搞，果然免费
就是最贵的。
所以，后来我就干脆自己掏钱搞了个 图床，在云厂商那买了 OSS 存储服务器， 然后在加上 CDN
形成自己的图床。
之前还写过我迁移图片的经历：完了，小林网站的图片都挂了
思维导图工具
我用的思维导图工具是 xmind ，是国产的。他们软件的交互 设计 做的很不错，很简洁明了。
它有很多种⻛格选择，基本都是五彩的，整体挺好看的。
2025/8/7 11:22 6.2 画图经验分享|小林coding
> https://xiaolincoding.com/network/5_learn/draw.html 13/17有意思的地方，这个思维导图工具的右侧会 有一些图标图片选择，比如表情图片、标签图片、进
度图图 片等等 。
习惯用思维导图做笔记的同学， xmind 这个思维导图工具是个不 错的选择。
另外，我有时会使 用 Effie 这个工具来生成思维导图，它本身是一个写作的工具，但是自带一个根
据文字内容生成思维导图的功能。
2025/8/7 11:22 6.2 画图经验分享|小林coding
> https://xiaolincoding.com/network/5_learn/draw.html 14/17代码贴图工具
如果你想展示你的代码，又苦于源代码的样式不好看，则可以使 用一个生成漂亮的代码贴图网
站。
导出图片后，就一张漂亮的代码展示图。
2025/8/7 11:22 6.2 画图经验分享 | 小林coding
https://xiaolincoding.com/network/5_learn/draw.html 15/17 最后
这两年下来，我感觉至少画了 1000+ 张图了，每一张图其实还是挺费时间的，相信画过图的朋友
后，都能体会 到这种感觉了。
但没办法，谁叫我是图解工具人呢，画图可以更好的诠释文章内容，但最重要的是，把你们 吸引
过来了，这是件让我非常高兴的事情，也是让我感觉画图这个事 情值得认真做。
文字的分享有局限性，关键还是要你自己动手摸索摸索，形成自己一套画图的方法论，练习的时
候可以先从模仿画起，后面再结合工作或文章的需求画出自己心中的那个图。
最后罗列一下，我常用工具：
画图工具： draw.io
思维导图工具： xmind
代码贴图工具： carbon
文章编写工具： typora 、语雀
2025/8/7 11:22 6.2 画图经验分享|小林coding
> https://xiaolincoding.com/network/5_learn/draw.html 16/17Powered by GitHub & Vssue
上次更新: 1/20/2023
← 6.1 计算机网络怎么学？
评论
使用 GitHub 帐号登录后发表评论
使用 GitHub 登录
登录后查看评论
登录后才能发表评论 ⼁支持 Markdown 语法