AI 如何精準產生令人驚嘆的程式碼流程圖

大家好，我是木川

在沒有人工智慧的時候，我們需要花費至少60分鐘，閱讀程式碼並根據自己的理解手動繪製心智圖或流程圖，以幫助我們更好地理解程式碼。

AI可以將程式碼轉換為準確的程式碼視覺化圖形，節省閱讀程式碼的時間，只需5分鐘。

這裡面有三個問題：

1、怎麼透過 AI 解讀程式碼

2、怎麼透過流程圖呈現解讀後的程式碼？

3、怎麼產生流程圖

我將依序介紹這三部分

一、AI 解讀程式碼

AI解讀程式碼實際上利用了AI的總結能力，產生程式碼註解。大模型已實現此功能。

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

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

GPT 是一個通用大模型，可以做很多事情，寫文章、寫程式、寫小說等；如果只寫程式碼，不如專有程式碼大模型，更專一，只專注在程式碼領域，解讀程式碼更準確，產生的程式碼註解更精準

這裡介紹一個使用Comate 解讀程式碼的範例：

例如下面這段程式碼有200 行，核心就是訂單打包，例如10 個訂單聚類後產生8 個包裹

聚類的細節太多，想著用AI 提取並繪製流程圖，更加直觀，首先使用AI 編程工具Baidu Comate，解讀這段代碼

# #安裝外掛程式Comate 後，在函數程式碼上方，找到程式碼解釋選單

圖片

##點擊程式碼註釋，將會開啟百度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、套件圖（Package Diagram）：展示程式碼的套件結構，有助於理解程式碼的模組化組織。 ###

圖片

9、組織結構圖（Wireframe Graphic Interface）：用於描述圖形組織結構組成

圖片

10、甘特圖（Gantt Diagram）：用於專案管理中，展示專案的時間軸和進度。

圖片

我不知道大家發現沒有，好像沒看到流程圖，其實PlantUML 中的活動圖就是流程圖，左邊是程式碼語法，右邊是可視化圖形

圖片

我們透過AI 程式設計工具產生了程式碼註釋，然後將拿到的程式碼註釋，詢問AI：請基於下面這段程式碼註釋，產生PlantUML 活動圖程式碼

圖片

#看看AI 的回覆：

圖片三、生成流程圖

將步驟二中產生的流程圖程式碼，複製到plantuml 視覺化網站網址：http://www.plantuml.com/plantuml

圖片

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

圖片

看流程圖就大概知道這段程式碼的意思了，AI 解讀程式碼視覺化圖，真的很方便

四、總結

以上透過程式碼-> 註解-> ; 繪製流程圖的方法，就得到了想要的效果，相比傳統方式閱讀完程式碼自己手動繪製圖形，確實效率高了很多最後分享一個小技巧：程式碼的視覺化呈現方式有很多種，為什麼必須是流程圖，而不是其它類型的圖，可以問AI 這段程式碼生成什麼圖比較好，選擇最優呈現方式可視化

例如基於上面的程式碼，我也可以生成類別圖

圖片像這樣的圖，我生成了很多，例如我主要是寫Go 的，我寫了很多文章，然後用AI 進行了視覺化

例如Go 可重入鎖，一張圖解釋簡單易懂

圖片

例如Go 記憶體管理，一張圖詮釋記憶體分佈元件

圖片

#例如go.sum 文件，一張圖描述內部結構

#圖片

例如sync.Cond 底層資料結構，一張圖說明提供的函數介面

圖片

上面的圖都是使用AI 產生的，AI 可以讓不懂程式設計的人，完成一個工具或插件的開發，大大降低了軟體開發的成本；AI 可以讓懂程式設計的人，更有效率地完成日常工作，更快地完成應用開發，大大提高了工作和學習效率######我一直秉承一個觀點：如果你不會寫作，你也不會AI 寫作；如果你不會編程，你也不會AI 程式設計。 ######如果想透過 AI 產生程式碼流程圖，首先你得知道，什麼是程式碼流程圖，有哪些方式可以視覺化，然後利用 AI 加速這個過程。 ######今天的分享就到這裡了，使用 AI 提效的場景還有很多，下次有機會再和大家分享，感謝大家抽出時間圍觀####

以上是AI 如何精準產生令人驚嘆的程式碼流程圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！