draw.io-一款适合程序员的在线免费画图工具,并将图片保存到 Github,然后作为图床使用

大家好,最近很多读者私信问我,我图解文章中用到的画图工具、思维导图工具、代码贴图工具是什么?

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

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

接下来,详细聊一聊。

画图工具

这篇文章的封面图就是 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/

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

图片

其中,最左边的「图形选择区域」可以选择的图案有很多种,常见的流程图、时序图、表格图都有,甚至还可以在最左下角的「更多图形」找到其他种类的图形,比如网络设备图标等。

怎么将文件保存到 Github,然后作为图床使用

1、在浏览器输入地址:https://app.diagrams.net,进入到在线画图网站后,就会弹出保存文件到什么地方的选择,可以保存到本地、Github、OneDrive等。

图片

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

图片

3、选择创建一个空白的图片,然后可以给文件取个名字,画图的源文件后缀是 .drawio,最后点击创建。

图片

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

图片

5、接着输入你的 Github 账号密码。

图片

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

图片

6、接着,点击同意授权。

图片

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

图片

8、然后选择你要授权的仓库,可以是某个仓库,也可以全部仓库,我这里为了方便,就直接选择了所有仓库。

图片

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

图片

10、到这一步,授权的工作就完成了。然后,就可以开始画图了。画完图后,就可以导出 png 图片。

图片

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

图片

图片

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

图片

我这个地址是经过 jsdeliver cdn 加速的了,这个 cdn 也是免费的。地址的构成是这样的:

图片

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

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

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

版权声明 1 本网站名称:北忘山博客
2 本站永久网址:https://www.beiwangshan.com
3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长删除。
4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论