上週剛發了有人問我架構圖、流程圖為什麼這麼好看?,主要介紹了使用 Excalidraw 這個畫圖工具,之所以聊到畫流程圖,一方面是因為我平時寫文章經常畫圖,還有一個原因是最近正在寫一堆亂七八糟的文件。
對於程式設計師來說,寫文件這件事是絕大多數程式設計師不喜歡甚至非常討厭的一件事兒,枯燥、乏味。我本身其實並不太排斥寫文件、畫圖這些,當然了,比起寫程式碼來說,我還是更喜歡寫程式碼的。
但是寫文件和補文件是兩碼事,有類似經歷的同學應該能夠理解,懂的都懂。專案開始前寫文件還好,比如寫登入功能、畫登入流程圖,這其實是一個設計的過程,寫好文件後可以直接作為開發指導,還是很有價值的。而專案完成後補文件,感覺就是在浪費生命。
剛寫的時候還行,一邊寫一邊畫圖,還有精力注意圖的美感,寫了兩天就徹底放飛了,美感不美感的放一邊,關鍵是已經不想畫了。
於是我找到了這個方法,用 ChatGPT 直接生成 PlantUML,微調一下就可以了,甚至有的調都不調,直接用了。
什麼是 PlantUML
PlantUML是一個通用性很強的工具,可以快速、直接地建立各種圖表。利用簡單直觀的語言,使用者可以毫不費力地繪製各種型別的圖表。支援序列圖、用例圖、類圖、物件圖、活動圖、元件圖、部署圖、狀態圖、時序圖。
「毫不費力」這個特點非常有吸引力,當然沒那麼誇張,還是要費點力氣的。它有自己的一套語法,類似於寫程式碼的方式表示各個實體之間的關係、指示要生成哪種型別的圖。用過 Markdown 的一下就能理解。
舉個例子,下面的程式碼可以表示 Client 向 Server 傳送 Hello。
@startuml !theme materia-outline Client -> Server : Hello @enduml
如果你想自己用它的語法規則,透過寫程式碼的方式畫圖,可以到官網 https://plantuml.com/zh/ 上學習一下語法。
可以直接在 PlantUML 線上環境上執行 https://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000
上方寫程式碼,下面就直接生成對應的 UML 圖了,可以調整樣式,可以下載各種格式的圖片。
也可以在本地安裝執行,支援 Java 包執行,也支援 Docker 。
另外,像 VSCode 這些編輯器或者一些筆記軟體都有對應的外掛支援,可以搜尋安裝。
ChatGPT + PlantUML
如果你還是覺得不夠「毫不費力」,那可以讓 ChatGPT 直接生成給你。
開啟 ChatGPT ,在「探索 GPT」裡面可以搜尋 “PlantUML Diagram Wizard”,這個應用是專門用來幫你畫 PlantUML 的,但是使用的話需要 GPT-4o,如果超過最大限制,則需要開通 plus 才能用,有實力的同學可以用這個。
不用它也完全可以,我就直接用的免費版 ChatGPT-3.5,效果也沒有問題。除此之外,用 Kimi 等大模型應該也問題不大。
那應該怎麼給 ChatGPT 提示詞呢?
首先你必須知道你要畫的是什麼型別的圖,序列圖、用例圖、類圖、物件圖、活動圖、元件圖、部署圖、狀態圖、時序圖,型別關鍵詞必須準確給到 GPT。
描述要清晰,這是必須的,就像你解釋給別人一樣,只不過 GPT 的理解能力更強一些。
如果有程式碼的話,必要情況下給一些解釋。
下面我舉幾個例子,不一定是最好的,但是基本上能解決問題。
畫類圖
有時候 IDEA 能解決一部分問題,比如我檢視一個 serverImpl的類圖,但是更大範圍的關係就不行了,比如我還想看到 Controller 呼叫 Service 的關係。
用 ChatGPT 怎麼做呢?
第一步就是將程式碼給到 ChatGPT。這一步要看你的程式碼量有多少,如果程式碼量不多的話,可以一次性都給它,如果多的話,ChatGPT 的輸入token 是有限制的,就要分批次告訴它。
第一步 prompt:接下來我會發給你幾個 java 檔案,在我告訴你開始畫圖之前,你只需要記住檔案的內容就好了。之後GPT會表示明白了,請你傳送檔案內容。
第二步:將你要畫的檔案一個個的輸送給 GPT。
第三步:好了,請幫我生成 PlantUML 格式的類圖,請開始畫圖吧。
然後 GPT 就會輸出一個 PlantUML 程式碼段。
之後貼上到 https://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000 線上環境中,然後選一個主題,就可以把圖弄下來了。
時序圖
接下來我將一個登入流程的描述告訴 GPT 讓它畫出時序圖。
prompt 如下:
以客戶端、登入服務、資料庫為3個主體,畫出整個登入過程的Sequence diagrams:客戶端輸入手機號,呼叫登入服務,查詢資料庫,檢視手機號是否存在,如果不存在,直接通知客戶端使用者不存,如果存在,登入服務查詢資料庫驗證手機號和密碼是否匹配,如果匹配,返回使用者資訊,客戶端跳轉到首頁
其實描述的並不是那麼條理很清晰,但是 GPT 比較聰明,它能理解。
最後還是貼上到線上環境上,檢視並下載最終的UML圖。
怎麼樣,是不是能夠偷下懶了。