大家好，我是木川

沒有 AI 的時(shí)候，我們閱讀完代碼，然后根據(jù)自己的理解，手動通過 XMind 繪制思維導(dǎo)圖，或者通過 draw.io 繪制流程圖，至少需要 60 分鐘 

有了 AI，其實(shí)可以直接將代碼轉(zhuǎn)換為比較準(zhǔn)確的代碼可視化圖形，省掉自己閱讀代碼的時(shí)間，AI 直接解讀代碼，可能只需要 5分鐘

這里面存在三個(gè)問題：

1、怎么通過 AI 解讀代碼

2、怎么通過流程圖呈現(xiàn)解讀后的代碼？

3、怎么生成流程圖

我將依次介紹這三部分

一、AI 解讀代碼

AI 解讀代碼實(shí)際上是利用了 AI 的總結(jié)能力，也就是生成代碼注釋，目前有很多代碼輔助相關(guān)的大模型都實(shí)現(xiàn)了這個(gè)功能

比如 Baidu Comate 的底層模型：文心一言 4.0、清華開發(fā)的 CodeGeex 大模型、GitHub Copilot 的底層模型：CodeX

可能有的人會問，為什么不通過 GPT 直接生成注釋呢？

GPT 是一個(gè)通用大模型，可以做很多事情，寫文章、寫代碼、寫小說等；如果只寫代碼，不如專有代碼大模型，更加專一，只專注在代碼領(lǐng)域，解讀代碼更準(zhǔn)確，生成的代碼注釋更精準(zhǔn)

這里介紹一個(gè)使用 Comate 解讀代碼的例子：

比如下面這段代碼有 200 行，核心就是訂單打包，比如 10 個(gè)訂單聚類后生成 8 個(gè)包裹

聚類的細(xì)節(jié)太多，想著用 AI 提取并繪制流程圖，更加直觀，首先使用 AI 編程工具 Baidu Comate，解讀這段代碼

安裝插件 Comate 后，在函數(shù)代碼上方，找到代碼解釋菜單

圖片

點(diǎn)擊代碼注釋，將會打開百度 AI 助手聊天框，顯示代碼解釋

圖片

二、代碼可視化方式

不論是給領(lǐng)導(dǎo)匯報(bào)，還是寫周報(bào)，如果你能將的文字或者代碼可視化，給人的感覺就立馬不一樣了，所以學(xué)會可視化非常重要

代碼可視化一般需要創(chuàng)建 UML 圖，這樣的工具有很多，從使用文本描述來生成 UML 圖的角度，我選擇的是 PlantUML

PlantUML 是一個(gè)強(qiáng)大的工具，用于快速創(chuàng)建多種類型的圖表。這些圖表廣泛用于軟件開發(fā)和文檔編寫中，以下是 PlantUML 支持的一些主要圖表類型：

1、序列圖（Sequence Diagram）：用于展示對象之間交互的時(shí)間序列，常用于展示系統(tǒng)內(nèi)部組件或?qū)ο笾g的消息傳遞。

圖片

2、用例圖（Use Case Diagram）：描述系統(tǒng)的功能和外部用戶（參與者）之間的交互。

圖片

3、類圖（Class Diagram）：展示系統(tǒng)中類的結(jié)構(gòu)和類之間的關(guān)系，如繼承、接口實(shí)現(xiàn)、依賴關(guān)系等。

圖片

4、活動圖（Activity Diagram）：類似于流程圖，用于展示從一個(gè)活動到另一個(gè)活動的控制流。

圖片

5、組件圖（Component Diagram）：展示系統(tǒng)的組件如何組合在一起工作。

圖片

6、狀態(tài)圖（State Diagram）：展示一個(gè)對象在其生命周期內(nèi)經(jīng)歷的狀態(tài)以及狀態(tài)間的轉(zhuǎn)移。

圖片

7、對象圖（Object Diagram）：類圖的一個(gè)實(shí)例，顯示了系統(tǒng)中對象之間的關(guān)系。

圖片

8、包圖（Package Diagram）：展示代碼的包結(jié)構(gòu)，有助于理解代碼的模塊化組織。

圖片

9、組織結(jié)構(gòu)圖（Wireframe Graphic Interface）：用于描述圖形組織結(jié)構(gòu)組成

圖片

10、甘特圖（Gantt Diagram）：用于項(xiàng)目管理中，展示項(xiàng)目的時(shí)間線和進(jìn)度。

圖片

不知道大家發(fā)現(xiàn)沒有，好像沒看到流程圖，其實(shí) PlantUML 中的活動圖就是流程圖，左邊是代碼語法，右邊是可視化圖形

圖片

我們通過 AI 編程工具生成了代碼注釋，然后將拿到的代碼注釋，詢問 AI：請基于下面這段代碼注釋，生成 PlantUML 活動圖代碼

圖片

看看 AI 的回復(fù)：

圖片

三、生成流程圖

將步驟二中生成的流程圖代碼，復(fù)制到 plantuml 可視化網(wǎng)站 網(wǎng)址：http://www.plantuml.com/plantuml

圖片

點(diǎn)擊 Submit 按鈕，就可以獲取到圖片了

圖片

看流程圖就大概知道這段代碼的含義了，AI 解讀代碼可視化圖，真的很方便

四、總結(jié)

以上通過代碼 -> 注釋 -> 繪制流程圖的方法，就得到了想要的效果，相比傳統(tǒng)方式閱讀完代碼自己手動繪制圖形，確實(shí)效率高了很多

最后分享一個(gè)小技巧：代碼的可視化呈現(xiàn)方式有很多種，為什么必須是流程圖，而不是其它類型的圖，可以問 AI 這段代碼生成什么圖比較好，選擇最優(yōu)呈現(xiàn)方式可視化

比如基于上面的代碼，我也可以生成類圖

圖片

像這樣的圖，我生成了很多，比如我主要是寫 Go 的，我寫了很多文章，然后用 AI 進(jìn)行了可視化

比如 Go 可重入鎖，一張圖解釋通俗易懂

圖片

比如 Go 內(nèi)存管理，一張圖詮釋內(nèi)存分布組件

圖片

比如 go.sum 文件，一張圖描述內(nèi)部結(jié)構(gòu)

圖片

比如 sync.Cond 底層數(shù)據(jù)結(jié)構(gòu)，一張圖說明提供的函數(shù)接口

圖片

上面的圖都是使用 AI 生成的，AI 可以讓不懂編程的人，完成一個(gè)工具或者插件的開發(fā)，大大降低了軟件開發(fā)的成本；AI 可以讓懂編程的人，更高效地完成日常工作，更快地完成應(yīng)用開發(fā)，大大提高了工作和學(xué)習(xí)效率

我一直秉承一個(gè)觀點(diǎn)：如果你不會寫作，你也不會 AI 寫作；如果你不會編程，你也不會 AI 編程。

如果想通過 AI 生成代碼流程圖，首先你得知道，什么是代碼流程圖，有哪些方式可以可視化，然后利用 AI 加速這個(gè)過程。

今天的分享就到這里了，使用 AI 提效的場景還有很多，下次有機(jī)會再和大家分享，感謝大家抽出時(shí)間圍觀