超级好用绘图工具（Draw.io+Github）

方案简介

• 绘图工具：Draw.io

• 存储方式： Github

1 Draw.io

1.2 简介

    是一款免费开源的在线流程图绘制软件，可以用于创建流程图、组织结构图、网络图、UML图等各种类型的图表。它提供了丰富的图形元素和编辑功能，使用户能够轻松地创建和编辑图表。

关键字：开源、简洁、方便、全平台、免费

1.3 官网

https://www.drawio.com/

1.4 网页版

• 地址：https://app.diagrams.net/?src=about

• 你也可以直接保存到本地

  image-20230917120628999

1.5 本地版

• 下载地址： https://github.com/jgraph/drawio-desktop/releases
• 全平台下载

image-20230917120046396

1.6 存储方式

Draw.io 提供了6种存储方式，可自行选择

• Google Drive
• One Drive
• 设备（其实就是存到本地）
• Dropbox
• Github
• GitLab

画完流程图之后，可以选择保存到本地，或者存储到网上，本着方便的原则，肯定是存到网上方便点，个人推荐是Github方式，网上也有保存到Gitee方式，可以自行研究下

image-20230917120959622

2 Github

2.1 创建Github账号

2.2 创建流程图的仓库

打开Github，创建专门存放流程图的仓库

image-20230917121614114 image-20230917121737111

2.3 授权

打开Draw.io网址，进行Github授权

• 存储方式，选择Github

  image-20230917121907638

• 创建新的绘图

  image-20230917122239774 image-20230917122348779

• 点击授权

  image-20230917122414161

        ![image-20230917124327315](https://img.haomeiwen.com/i6859236/f70e7310da2aaa56.png)
  

  image-20230917124433133

2.4 选择仓库

授权成功后，在draw.io界面，刷新可以看到仓库地址

![image-20230917122709994](https://img.haomeiwen.com/i6859236/cd8d63f37dc4e5c3.png)



![image-20230917122749526](https://img.haomeiwen.com/i6859236/bb3e91118f555641.png)

<font color='red'> PS : 如果确定按钮是灰色不可按，请在仓库里先创建一个文件夹！！！ </font>

2.5 初始提交

image-20230917124748436

2.6 绘图

image-20230917125956773

2.7 提交更新图

当流程图有修改后，会自动对比差异，显示保存按钮

image-20230917124901393

• 修改后，再次提交

  提交信息，填写本次修改内容，跟git使用类似

  image-20230917124932822

2.8 查看

打开Github仓库地址，就看到存放地址了

image-20230917125237068

总结

    开发程序的都知道，经常要画各种各样的流程图，因此一款好用、又方便的流程图工具，就显得格外重要，之前使用的是微软`Visio`,太重量级了，也不方便，后面在网上找了很久，对比现在各种收费绘图软件，真是好用多了，重点还是免费！！！

    把环境搭好后，真是大大提高了工作效率！！