同事突然被裁员,我用 AI 流程图快速上手他的代码

大家好,我是木川

上周同事被裁了,接手了别人的代码,我懵逼了

一般同事离职时,就会其它人补上,第一件要做的事情就是接手他写的代码

但阅读别人的代码,难不了心态爆炸,一看代码太长又繁琐,看不下去了

传统的方法不仅耗时长,而且效率低下,这时我想到了使用 AI 来辅助这一过程,简直太高效了

一、AI 生成代码注释

同事的这段代码有 200 行,核心就是订单打包,比如 10 个订单聚类后生成 8 个包裹

聚类的细节太多,想着用 AI 提取并绘制流程图,更加直观

首先使用 AI 编程工具 Baidu Comate,解读这段代码

在函数代码上方,找到代码解释菜单

9365a0fc91f585a9bd29e58ced656833.png

点击代码注释,将会打开百度 AI 助手聊天框,显示代码的解读

9b6ebbb571c182991d7f262ef41366f9.png

二、AI 生成流程图代码

代码可视化一般需要创建 UML 图,这样的工具有很多,从使用文本描述来生成UML图的角度,我选择的是 PlantUML

PlantUML 是一个强大的工具,用于快速创建多种类型的图表。这些图表广泛用于软件开发和文档编写中,以下是PlantUML支持的一些主要图表类型:

  1. 序列图(Sequence Diagram):用于展示对象之间交互的时间序列,常用于展示系统内部组件或对象之间的消息传递。

  2. 用例图(Use Case Diagram):描述系统的功能和外部用户(参与者)之间的交互。

  3. 类图(Class Diagram):展示系统中类的结构和类之间的关系,如继承、接口实现、依赖关系等。

  4. 活动图(Activity Diagram):类似于流程图,用于展示从一个活动到另一个活动的控制流。

  5. 组件图(Component Diagram):展示系统的组件如何组合在一起工作。

  6. 状态图(State Diagram):展示一个对象在其生命周期内经历的状态以及状态间的转移。

  7. 对象图(Object Diagram):类图的一个实例,显示了系统中对象之间的关系。

  8. 部署图(Deployment Diagram):展示系统的物理部署,包括硬件和软件的配置。

  9. 时序图(Timing Diagram):展示对象状态随时间的变化。

  10. 包图(Package Diagram):展示代码的包结构,有助于理解代码的模块化组织。

  11. 组织结构图(Wireframe Graphic Interface):用于描述图形用户界面的布局和元素。

  12. 甘特图(Gantt Diagram):用于项目管理中,展示项目的时间线和进度。

PlantUML 中的活动图就是流程图,左边是代码语法,右边是可视化图形

a5bcafd5b08f411284fd6bf4d315b2d9.png

将步骤一种拿到的代码注释,询问 ChatGPT:请基于下面这段代码注释,生成PlantUML活动图代码

8750891aebfe04141bee97449857da34.png a8a0f4461eb9fba6c9345ff5e29f1491.png

三、流程图可视化

将步骤二中生成的流程图代码,复制到 plantuml 可视化网站

网址:http://www.plantuml.com/plantuml

@startuml
start
:初始化 packs;
if (订单数量 == 1) then (是)
  :创建一个包含单一订单的Pack;
  stop
else (否)
endif

:初始化 clusters;
:创建距离矩阵 matrix;

partition "计算最大距离" {
  :遍历订单计算距离;
  :记录最大距离;
}

partition "处理每个距离对" {
  :遍历 matrix;
  if (已访问) then (是)
    :跳过;
  else (否)
    :确定订单的cluster;
    if (是否合并订单) then (是)
      :合并订单;
    endif
    :标记为已访问;
  endif
}

partition "处理每个 cluster" {
  :遍历 clusters;
  :计算和排序订单;
  :创建对应的 Pack;
}

:排序 packs;
:分配 ClusterId;
stop
@enduml
1e1e0fccedc1e069c73fbf7990f136ff.png

点击 Submit 按钮,就可以获取到图片了

5e610a441fcd4e0aa6189ef02f6889b7.png

看流程图就大概知道这段代码的含义了,AI 解读代码绘制流程图,真的很方便

四、总结

以上通过代码 -> 注释 -> 绘制流程图的方法是经过了三个步骤,实际上也可以直接让 AI 解读代码,获取到流程图,只需要两步就可以完成,但是效果可能不如先生成注释,再绘制流程图

毕竟代码生成注释,是通过专有代码大模型生成,相比 通用大模型 GPT 理解代码可能更加顺畅一些

最后分享一个小技巧:代码的可视化呈现方式有很多种,为什么必须是流程图,而不是其它类型的图,可以问 AI 这段代码生成什么图比较好,选择最优呈现方式可视化

比如基于上面的代码,我也可以生成类图

b1ddb1d5ef5c69bb5c515f28021e62e5.png

今天的分享就到这里了,加下面微信拉你进编程技术交流群,赠送你一份 AI 提效大礼包

863a8f61f083e3f0d94d9e7780086e47.png

欢迎加入持续关注我,也可以进入我的免费星球,向我提问或者深度链接我。

6dce2541e64421c3580b570d8408f378.jpeg

  • 17
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值