适合程序员的画图工具

大家好，我是小林。

最近很多读者私信问我，我图解文章中用到的画图工具、思维导图工具、代码贴图工具是什么/p>

我在很早的时候提到过，不过时间有点久了，而且比较零散，可能现在大部分读者还不知道。

我今天统一整理一下，我图解文章用到的各类工具吧，这些工具我用了一年多了，没发现什么问题，所以是值得推荐的。

我这里先列一下：

• 画图工具：draw.io
• 思维导图工具：xmind/effie
• 代码贴图工具：carbon
• 文章编写工具：有道云笔记/typora/effie

接下来，详细聊一聊。

画图工具

这篇文章的封面图就是 draw.io 的开发团队。

我的图解文章里的图片全是在 draw.io 这个工具画的，写了那么久的图解文章，再加上我工作中也有画图的习惯，累计也有在上面画了接近 1000+ 张图片。

选择它的原因很简单，因为是免费的，而且图片的源文件可以直接保存到 Github 的，这样非常方便，相当于直接云备份到了 Github 仓库里，然后用 Github 作为图床。

这一套操作下来，不管是画图工具，还是图床，都是不花一分钱的方案！

draw.io 画图工具可以在线画图，或者下载应用，或者作为 visual studio code 插件来使用。

我比较常用的方式是在线画图，就是直接在 站上画图。draw.io 一开始的画图 站地址就是直接在浏览器输入 draw.io 地址后，就会自动进入在线画图工具页面，现在它改版了， 改成重定向到官 地址了，所以现在想进入在线画图工具页面，地址是：

https://app.diagrams.net

当然，如果你想下载应用来使用，也可以在 Github 下载：

https://github.com/jgraph/drawio-desktop/releases/

我们来看看这个画图工具的页面长什么样子，主要分为三个区域，从左往右的顺序是「图形选择区域、绘图区域、属性设置区域」。

2、选择保存到 Github 后，就选择创建一个新的画图文件。

4、点击创建后，就会弹出获取你的 Github 账 权限，点击同意就行。

5、登陆完后，选择你要保存的 Github 仓库，比如我选择这里：

7、然后就会跳转到一个 站，在你的Github需要安装 draw.io App，直接点击安装即可，初次使用才会有这一步，后面就不用那么麻烦了。

9、安装完成后，在回到在线画图 站，点击「try again」。

11、我直接将 png 图片保存到 Github。

12、保存好图片后，我们可以用以下地址作为图片的地址。

也就是说，红色部分的前缀地址是固定的，绿色部分的地址是根据文件的保存仓库路径而变更就行。

如果你嫌这样替换地址麻烦，想自动化一点。可以搭配使用 pingo 工具来上传图片，上传完图片它会自动生成一个经过 jsdeliver cdn 加速的地址。 上的资料很多，关键词搜索「github + jsdeliver cdn + pingo」即可。

怎么样，这一套免费版的画图+Github云同步+图床的方案，还是很舒服的。

思维导图工具

我用的思维导图工具是 xmind，是国产的。他们软件的交互设计做的很不错，很简洁明了。

它有很多种风格选择，基本都是五彩的，整体挺好看的。

习惯用思维导图做笔记的同学， xmind 这个思维导图工具是个不错的选择。

另外，我有时会使用 Effie 这个工具来生成思维导图，它本身是一个写作的工具，但是自带一个根据文字内容生成思维导图的功能。

导出图片后，就一张漂亮的代码展示图。

最近就开始转到 typora 写文章了。

最新版本的 typora 已经开始要收费了，我一直没有更新，所以还是免费的状态。

还有一点，typora 有生成 pdf 的功能，我之前生成的图解系统和图解 络的 pdf，就是在 typora 生成的。

有时候写一些感想类的文章，我就直接在 Effie 这个工具写，因为它的页面非常简洁纯粹，就是一张大白纸页面，非常容易专注起来，而且是支持 mardown 格式的语法。