• 超级好用绘图工具(Draw.io+Github)


    超级好用绘图工具(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

      image-20230917124433133

    2.4 选择仓库

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

    image-20230917122709994

    image-20230917122749526

    PS : 如果确定按钮是灰色不可按,请在仓库里先创建一个文件夹!!!

    2.5 初始提交

    image-20230917124748436

    2.6 绘图

    image-20230917125956773

    2.7 提交更新图

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

    image-20230917124901393

    • 修改后,再次提交

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

      image-20230917124932822

    2.8 查看

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

    image-20230917125237068

    总结

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

    ​ 把环境搭好后,真是大大提高了工作效率!!

  • 相关阅读:
    Spring Cloud Netflix之OpenFeign
    带你一起理解什么是数据库分片?
    多因素(MFA)是防止数据泄露的最佳安全实践方法
    [elasticsearch]使用postman来查询数据
    Excel中功能区的存放位置很灵活,可以根据需要隐藏或显示
    征稿:【1区TOP】CCF推荐,Elsevier出版社,仅2个月左右录用!
    卫星多址方式
    A Comprehensive Survey on Graph Neural Networks
    计算机网络运维方向综合知识大全
    IDEA快速入门01-认识IDEA
  • 原文地址:https://blog.csdn.net/leovnay/article/details/132941754