大家好，我是木川

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

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

這里面存在三個問題：

1、怎么通過 AI 解讀代碼

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

3、怎么生成流程圖

我將依次介紹這三部分

一、AI 解讀代碼

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

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

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

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

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

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

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

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

圖片

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

圖片

二、代碼可視化方式

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

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

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

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

圖片

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

圖片

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

圖片

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

圖片

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

圖片

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

圖片

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

圖片

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

圖片

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

圖片

10、甘特圖（Gantt Diagram）：用于項目管理中，展示項目的時間線和進度。

圖片

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

圖片

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

圖片

看看 AI 的回復(fù)：

圖片

三、生成流程圖

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

圖片

點擊 Submit 按鈕，就可以獲取到圖片了

圖片

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

四、總結(jié)

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

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

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

圖片

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

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

圖片

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

圖片

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

圖片

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

圖片

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

我一直秉承一個觀點：如果你不會寫作，你也不會 AI 寫作；如果你不會編程，你也不會 AI 編程。

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

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