chatgpt筆記生成 ChatGPT也能畫圖？教你一鍵生成時序圖、類圖、流程圖、狀態圖以及用例圖
作為一個文本模型，是無法直接輸出圖像的，除非借助其他的第三方插件或庫。
但是，得益于前期接受了海量不同格式文本的預訓練，可以輕松生成各種類型的結構化輸出，例如表格，代碼，數學公式等等。
這其中還包括一類「基于文本的圖形描述語言」，它允許我們通過編寫文本指令或代碼來構建包含特定元素、關系以及布局的圖形，而無需依賴圖形編輯工具。
那么，我們是否可以改由讓生成對應的文本指令或代碼，然后再通過特定的解析器與渲染引擎，轉換為可視化的圖形或圖表呢？
這不禁讓我想起了一個很有意思的工具：。
是什么？
提供了一種用文本描述來繪制UML圖的方式，可以繪制類圖、時序圖、用例圖等等。
用來創建圖表有很多好處，包括：
接下來，我們將在一文中的「代碼解釋器」基礎上，進一步展示如何使用為指定代碼生成合適的UML圖。
(所用到的和工具地址在文末，可自取)
01時序圖
時序圖是一種用于描述對象之間交互行為的UML圖，它展示了對象之間的消息傳遞順序。
我們先給一份Java偽代碼，這份代碼描述了一個簡單電商系統中的訂單流程：
用戶（User）下單；
訂單（）交給訂單處理器處理；
訂單處理器（）執行訂單處理邏輯，并在完成后發送處理結果通知。
通知服務（）發送通知給用戶。
public?class?User?{
????private?String?name;
????private?String?email;
????//?...
????public?void?placeOrder(Order?order)?{
????????//?下單邏輯
????????//?...
????}
}
public?class?Order?{
????private?User?user;
????private?String?orderId;
????//?...
????public?void?process()?{
????????OrderProcessor?orderProcessor?=?new?OrderProcessor();
????????orderProcessor.processOrder(this);
????}
}
public?class?OrderProcessor?{
????public?void?processOrder(Order?order)?{
????????//?執行訂單處理邏輯
????????//?...
????????//?發送處理結果通知
????????NotificationService.sendNotification(order.getUser(),?"訂單處理完成");
????}
}
public?class?NotificationService?{
????public?static?void?sendNotification(User?user,?String?message)?{
????????//?發送通知給用戶
????????//?...
????}
}
然后chatgpt筆記生成，我們讓根據這份偽代碼用語言構建一張時序圖：
@startuml
actor?User
participant?Order
participant?OrderProcessor
participant?NotificationService
User?->?Order:?placeOrder(order)
activate?Order
Order?->?OrderProcessor:?process()
activate?OrderProcessor
OrderProcessor?->?NotificationService:?processOrder()
activate?NotificationService
NotificationService?-->?User:?sendNotification()
deactivate?NotificationService
deactivate?OrderProcessor
deactivate?Order
@enduml
最后，我們把生成的代碼復制粘貼到官網的運行塊中預覽：
02類圖
類圖是一種用于描述系統中的類以及類之間的關系的UML圖，比如繼承、關聯、依賴等。
我們先給一份Java偽代碼，這份代碼描述了一個簡單的人員系統：
類是基類，具有name和age屬性chatgpt筆記生成，以及eat方法；
類繼承自類，并添加了id屬性和方法；
類也繼承自類chatgpt筆記生成，并添加了id屬性和方法；
class?Person?{
????String?name;
????int?age;
????void?eat()?{
????????//?吃飯的邏輯
????}
}
class?Student?extends?Person?{
????String?studentId;
????void?study()?{
????????//?學習的邏輯
????}
}
class?Teacher?extends?Person?{
????String?teacherId;
????void?teach()?{
????????//?教學的邏輯
????}
}
然后，我們讓根據這份偽代碼用語言構建一張類圖：
@startuml
class?Person?{
????-?name:?String
????-?age:?int
????+?eat():?void
}
class?Student?{
????-?studentId:?String
????+?study():?void
}
class?Teacher?{
????-?teacherId:?String
????+?teach():?void
}
Person?<|--?Student
Person?<|--?Teacher
@enduml
最后，我們把生成的代碼復制粘貼到官網的運行塊中預覽：
03流程圖
流程圖是一種用不同形狀的圖形來表示中間每個操作步驟或決策點的UML圖，常用于描述系統某項任務的執行順序。
我們先給一份Java偽代碼，這份代碼描述了一個購物流程的邏輯：
用戶開始購物，瀏覽產品，選擇產品；
如果產品有庫存，則將其添加到購物車中；
檢查是否有折扣碼可用，如有則應用折扣碼。
用戶進行結賬，如果支付成功，則下訂單并顯示訂單確認頁面；
否則，顯示支付錯誤信息。
如果產品無庫存，則顯示產品缺貨信息。
最后，購物流程結束。
//?開始購物
startShopping();
//?瀏覽產品
browseProducts();
//?選擇產品
selectProduct();
//?檢查產品是否有庫存
if?(isProductInStock())?{
????//?添加到購物車中
????addToCart();
????//?檢查是否有折扣碼可用
????if?(hasDiscountCode())?{
????????//?應用折扣碼
????????applyDiscountCode();
????}
????//?用戶進行結賬
????proceedToCheckout();
????if?(isPaymentSuccessful())?{?//?支付成功
????????//?下訂單并顯示訂單確認頁面
????????placeOrder();
????????showOrderConfirmation();
????}?else?{?//?支付失敗
????????//?顯示支付錯誤信息
????????showPaymentError();
????}
}?else?{?//?產品無庫存
????//?顯示產品缺貨信息
????showProductOutOfStockMessage();
}
//?購物流程結束
endShopping();
然后，我們讓根據這份偽代碼用語言構建一張流程圖：
@startuml
start
:開始購物;
:瀏覽產品;
:選擇產品;
if?(isProductInStock())?then?(有庫存)
????:添加到購物車;
????if?(hasDiscountCode())?then?(有折扣碼)
????????:應用折扣碼;
????endif
????:進入結賬流程;
????if?(isPaymentSuccessful())?then?(支付成功)
????????:下訂單;
????????:顯示訂單確認頁面;
????else?(支付失敗)
????????:顯示支付錯誤信息;
????endif
else?(無庫存)
????:顯示產品缺貨信息;
endif
:結束購物;
stop
@enduml
最后，我們把生成的代碼復制粘貼到官網的運行塊中預覽：
04狀態圖
狀態圖是一種用于描述對象在其生命周期中不同狀態及其轉換關系的UML圖。
我們先給一份Java偽代碼，這份代碼描述了一個訂單的狀態變化過程：
訂單類（）具有一個表示當前狀態的成員變量（），并通過方法設置狀態；
類還有一個方法，用于觸發狀態處理；
訂單狀態接口（）定義了不同狀態的處理方法；
具體的訂單狀態類（如、等）實現了訂單狀態接口，并在其方法中執行具體的處理邏輯，隨后流轉到下一個狀態。
//?訂單
class?Order?{
????private?OrderState?state;
????public?Order()?{
????????state?=?new?NewOrderState();
????}
????public?void?setState(OrderState?state)?{
????????this.state?=?state;
????}
????public?void?process()?{
????????state.processOrder(this);
????}
????//?Other?methods?and?attributes
}
//?訂單狀態
interface?OrderState?{
????void?processOrder(Order?order);
}
//?新訂單狀態
class?NewOrderState?implements?OrderState?{
????@Override
????public?void?processOrder(Order?order)?{
????????//?具體的處理邏輯
????????order.setState(new?ShippedState());?//?狀態流傳
????}
}
//?已發貨狀態
class?ShippedState?implements?OrderState?{
????@Override
????public?void?processOrder(Order?order)?{
????????//?具體的處理邏輯
????????order.setState(new?DeliveredState());?//?狀態流傳
????}
}
//?已送達狀態
class?DeliveredState?implements?OrderState?{
????@Override
????public?void?processOrder(Order?order)?{
????????//?具體的處理邏輯
????????order.setState(new?ClosedState());?//?狀態流傳
????}
}
//?已關閉狀態
class?ClosedState?implements?OrderState?{
????@Override
????public?void?processOrder(Order?order)?{
????????//?具體的處理邏輯
????}
}
然后，我們讓根據這份偽代碼用語言構建一張狀態圖：
@startuml
class?Order?{
????-?state:?OrderState
????+?setState(state:?OrderState)
????+?process()
}
interface?OrderState?{
????+?processOrder(order:?Order)
}
class?NewOrderState?{
????+?processOrder(order:?Order)
}
class?ShippedState?{
????+?processOrder(order:?Order)
}
class?DeliveredState?{
????+?processOrder(order:?Order)
}
class?ClosedState?{
????+?processOrder(order:?Order)
}
Order?-->?OrderState
OrderState?<|..?NewOrderState
OrderState?<|..?ShippedState
OrderState?<|..?DeliveredState
OrderState?<|..?ClosedState
Order?-->?NewOrderState?:?<>
NewOrderState?-->?ShippedState?:?processOrder()
ShippedState?-->?DeliveredState?:?processOrder()
DeliveredState?-->?ClosedState?:?processOrder()
@enduml
最后，我們把生成的代碼復制粘貼到官網的運行塊中預覽：
05用例圖
用例圖是一種用于描述用戶與系統交互場景的UML圖，展現了系統中不同角色與相關用例之間的關系。
我們先給一份Java偽代碼，這份代碼描述了一個簡單的圖書館管理系統所包含的角色及其可支持的操作，其中：
圖書管理員（）可以執行借出圖書和歸還圖書的操作；
讀者（）可以執行搜索圖書、借閱圖書、歸還圖書以及注冊借書證的操作。
//?圖書管理員類
class?Librarian?{
??void?checkOutBook(Book?book,?Reader?reader)?{
????//?實現借書邏輯
??}
??
??void?returnBook(Book?book,?Reader?reader)?{
????//?實現還書邏輯
??}
}
//?讀者類
class?Reader?{
??void?searchBook(String?keyword)?{
????//?實現搜索圖書邏輯
??}
??
??void?borrowBook(Book?book)?{
????//?實現借書邏輯
??}
??
??void?returnBook(Book?book)?{
????//?實現還書邏輯
??}
}
//?Book類（圖書）
class?Book?{
??//?圖書屬性和方法
}
然后，我們讓根據這份偽代碼用語言構建一張狀態圖：
@startuml
left?to?right?direction
actor?圖書管理員?as?Admin
actor?讀者?as?Reader
rectangle?圖書管理系統?{
??Admin?-->?(借出圖書)
??Admin?-->?(歸還圖書)
??Reader?-->?(搜索圖書)
??Reader?-->?(借閱圖書)
??Reader?-->?(歸還圖書)
??Reader?-->?(注冊借書證)
}
@enduml
最后，我們把生成的代碼復制粘貼到官網的運行塊中預覽：
總結
是一個使用文本描述構建UML圖的工具；
無法直接生成圖像，但可以生成對應的文本描述或代碼，然后借助等工具轉換為可視化的UML圖。
實現過程:
1)給提供要生成UML圖的Java代碼；
2)向描述需要生成的UML圖類型；
3)讓根據代碼生成代碼；
4)將代碼復制到官網預覽并輸出圖片。
所用到：
?
我將為你提供一個代碼片段(由```分隔)，請先充分理解該代碼片段的含義。接下來，請用語言為我繪制一個{流程圖}，要求該{流程圖}能有助于解釋該代碼片段的結構和關系：
```
代碼
```
官網：
在線預覽：
免責聲明：本文系轉載，版權歸原作者所有；旨在傳遞信息，不代表本站的觀點和立場和對其真實性負責。如需轉載，請聯系原作者。如果來源標注有誤或侵犯了您的合法權益或者其他問題不想在本站發布，來信即刪。
聲明：本站所有文章資源內容，如無特殊說明或標注，均為采集網絡資源。如若本站內容侵犯了原著者的合法權益，可聯系本站刪除。