ChatGPT也能画图？教你一键生成时序图、类图、流程图、状态图以及用例图-六虎

作为一个文本模型，ChatGPT是无法直接输出图画的，除非借助其他的第三方插件或库。

但是，得益于前期接受了海量不同格式文本的预练习，ChatGPT能够轻松生成各种类型的结构化输出，例如表格，代码，数学公式等等。

这其间还包括一类「依据文本的图形描绘言语」，它允许咱们经过编写文本指令或代码来构建包含特定元素、联系以及布局的图形，而无需依靠图形修改东西。

那么，咱们是否能够改由让ChatGPT生成对应的文本指令或代码，然后再经过特定的解析器与渲染引擎，转化为可视化的图形或图表呢？

这不禁让我想起了一个很有意思的东西：PlantUML。

PlantUML是什么？

PlantUML供给了一种用文本描绘来绘制UML图的方式，能够绘制类图、时序图、用例图等等。

用PlantUML来创立图表有许多好处，包括：

运用人类可读的文本描绘，上手简略
免费开源
智能布局，无需手动调整
快速创立和更新
高度可定制的外观

接下来，咱们将在《运用ChatGPT提高研制生产力的10个正确姿态》一文中的「代码解说器」基础上，进一步展现如何运用ChatGPT为指定代码生成合适的UML图。

(所用到的Prompt和东西地址在文末，可自取)

时序图

时序图是一种用于描绘目标之间交互行为的UML图，它展现了目标之间的音讯传递顺序。

咱们先给ChatGPT一份Java伪代码，这份代码描绘了一个简略电商体系中的订单流程：

用户（User）下单；
订单（Order）交给订单处理器处理；
订单处理器（OrderProcessor）履行订单处理逻辑，并在完成后发送处理结果告诉。
告诉服务（NotificationService）发送告诉给用户。

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依据这份伪代码用PlantUML言语构建一张时序图：

@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

最终，咱们把ChatGPT生成的PlantUML代码复制粘贴到官网的运转块中预览：

类图

类图是一种用于描绘体系中的类以及类之间的联系的UML图，比方承继、相关、依靠等。

咱们先给ChatGPT一份Java伪代码，这份代码描绘了一个简略的人员体系：

Person类是基类，具有name和age特点，以及eat办法；
Teacher类承继自Person类，并添加了id特点和teach办法；
Student类也承继自Person类，并添加了id特点和study办法；

class Person {
    String name;
    int age;
    void eat() {
        // 吃饭的逻辑
    }
}
class Student extends Person {
    String studentId;
    void study() {
        // 学习的逻辑
    }
}
class Teacher extends Person {
    String teacherId;
    void teach() {
        // 教育的逻辑
    }
}

然后，咱们让ChatGPT依据这份伪代码用PlantUML言语构建一张类图：

@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

最终，咱们把ChatGPT生成的PlantUML代码复制粘贴到官网的运转块中预览：

流程图

流程图是一种用不同形状的图形来表示中间每个操作进程或决策点的UML图，常用于描绘体系某项任务的履行顺序。

咱们先给ChatGPT一份Java伪代码，这份代码描绘了一个购物流程的逻辑：

用户开端购物，阅读产品，挑选产品；
假如产品有库存，则将其添加到购物车中；
查看是否有扣头码可用，如有则使用扣头码。
用户进行结账，假如付出成功，则下订单并显现订单承认页面；
不然，显现付出错误信息。
假如产品无库存，则显现产品缺货信息。
最终，购物流程结束。

// 开端购物
startShopping();
// 阅读产品
browseProducts();
// 挑选产品
selectProduct();
// 查看产品是否有库存
if (isProductInStock()) {
    // 添加到购物车中
    addToCart();
    // 查看是否有扣头码可用
    if (hasDiscountCode()) {
        // 使用扣头码
        applyDiscountCode();
    }
    // 用户进行结账
    proceedToCheckout();
    if (isPaymentSuccessful()) { // 付出成功
        // 下订单并显现订单承认页面
        placeOrder();
        showOrderConfirmation();
    } else { // 付出失败
        // 显现付出错误信息
        showPaymentError();
    }
} else { // 产品无库存
    // 显现产品缺货信息
    showProductOutOfStockMessage();
}
// 购物流程结束
endShopping();

然后，咱们让ChatGPT依据这份伪代码用PlantUML言语构建一张流程图：

@startuml
start
:开端购物;
:阅读产品;
:挑选产品;
if (isProductInStock()) then (有库存)
    :添加到购物车;
    if (hasDiscountCode()) then (有扣头码)
        :使用扣头码;
    endif
    :进入结账流程;
    if (isPaymentSuccessful()) then (付出成功)
        :下订单;
        :显现订单承认页面;
    else (付出失败)
        :显现付出错误信息;
    endif
else (无库存)
    :显现产品缺货信息;
endif
:结束购物;
stop
@enduml

最终，咱们把ChatGPT生成的PlantUML代码复制粘贴到官网的运转块中预览：

状况图

状况图是一种用于描绘目标在其生命周期中不同状况及其转化联系的UML图。

咱们先给ChatGPT一份Java伪代码，这份代码描绘了一个订单的状况变化进程：

订单类（Order）具有一个表示当时状况的成员变量（state），并经过setState办法设置状况；
Order类还有一个process办法，用于触发状况处理；
订单状况接口（OrderState）定义了不同状况的处理办法；
详细的订单状况类（如NewOrderState、ShippedState等）完成了订单状况接口，并在其processOrder办法中履行详细的处理逻辑，随后流转到下一个状况。

// 订单
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) {
        // 详细的处理逻辑
    }
}

然后，咱们让ChatGPT依据这份伪代码用PlantUML言语构建一张状况图：

@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 : <<create>>
NewOrderState --> ShippedState : processOrder()
ShippedState --> DeliveredState : processOrder()
DeliveredState --> ClosedState : processOrder()
@enduml

最终，咱们把ChatGPT生成的PlantUML代码复制粘贴到官网的运转块中预览：

用例图

用例图是一种用于描绘用户与体系交互场景的UML图，展现了体系中不同角色与相关用例之间的联系。

咱们先给ChatGPT一份Java伪代码，这份代码描绘了一个简略的图书馆管理体系所包含的角色及其可支持的操作，其间：

图书管理员（Librarian）能够履行借出图书和偿还图书的操作；
读者（Reader）能够履行查找图书、借阅图书、偿还图书以及注册借书证的操作。

// 图书管理员类
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 {
  // 图书特点和办法
}

然后，咱们让ChatGPT依据这份伪代码用PlantUML言语构建一张状况图：

@startuml
left to right direction
actor 图书管理员 as Admin
actor 读者 as Reader
rectangle 图书管理体系 {
  Admin --> (借出图书)
  Admin --> (偿还图书)
  Reader --> (查找图书)
  Reader --> (借阅图书)
  Reader --> (偿还图书)
  Reader --> (注册借书证)
}
@enduml

最终，咱们把ChatGPT生成的PlantUML代码复制粘贴到官网的运转块中预览：

总结

PlantUML是一个运用文本描绘构建UML图的东西；
ChatGPT无法直接生成图画，但能够生成对应的文本描绘或代码，然后借助PlantUML等东西转化为可视化的UML图。
完成进程: 1)给ChatGPT供给要生成UML图的Java代码； 2)向ChatGPT描绘需要生成的UML图类型； 3)让ChatGPT依据代码生成PlantUML代码； 4)将PlantUML代码复制到官网预览并输出图片。

所用到Prompt：

我将为你供给一个代码片段(由“`分隔)，请先充分了解该代码片段的含义。接下来，请用PlantUML言语为我绘制一个{流程图}，要求该{流程图}能有助于解说该代码片段的结构和联系：

“`

代码

“`

PlantUMl官网：www.plantuml.com

PlantUML在线预览：www.plantuml.com/plantuml/um…

ChatGPT也能画图？教你一键生成时序图、类图、流程图、状态图以及用例图

PlantUML是什么？

时序图

类图

流程图

状况图

用例图

总结

作者信息

推广

ChatGPT也能画图？教你一键生成时序图、类图、流程图、状态图以及用例图

PlantUML是什么？

时序图

类图

流程图

状况图

用例图

总结

相关文章

必知必会的Flutter异步知识！

停更掘金一年，我写了一本书

springboot第5集：如何让多模块的项目结构更加清晰、易于理解

axios基本使用及封装

作者信息

推广