plantuml画uml图

 可以复制到官网查看效果图，官网地址：

https://www.plantuml.com/plantuml

@startuml
' 设置全局样式
skinparam linetype ortho
skinparam shadowing false
skinparam ArrowColor #333333
skinparam defaultFontName Arial
skinparam defaultFontSize 12

' 总图标题
title 复杂系统架构图

' 定义颜色
skinparam component {
    BackgroundColor<<Frontend>> #FFEBEE
    BackgroundColor<<Backend>> #E3F2FD
    BackgroundColor<<Database>> #E8F5E9
    BackgroundColor<<MessageQueue>> #FFF3E0
    BackgroundColor<<ExternalService>> #F5F5F5
}

' 子图1：前端模块
package "前端模块" <<Frontend>> {
    [用户界面] as UI
    [状态管理] as State
    [API客户端] as APIClient

    UI --> State : 更新状态
    State --> APIClient : 发起请求
}

' 子图2：后端模块
package "后端模块" <<Backend>> {
    [REST API] as REST
    [业务逻辑层] as BusinessLogic
    [数据访问层] as DAL

    REST --> BusinessLogic : 调用逻辑
    BusinessLogic --> DAL : 操作数据
}

' 子图3：数据库模块
package "数据库模块" <<Database>> {
    [主数据库] as MainDB
    [缓存数据库] as CacheDB

    DAL --> MainDB : 查询/写入
    DAL --> CacheDB : 缓存读取
}

' 子图4：消息队列模块
package "消息队列模块" <<MessageQueue>> {
    [事件队列] as EventQueue
    [任务队列] as TaskQueue

    BusinessLogic --> EventQueue : 发布事件
    EventQueue --> TaskQueue : 分发任务
}

' 子图5：外部服务模块
package "外部服务模块" <<ExternalService>> {
    [支付网关] as PaymentGateway
    [邮件服务] as EmailService

    BusinessLogic --> PaymentGateway : 发起支付
    BusinessLogic --> EmailService : 发送通知
}

' 连接各模块
APIClient --> REST : HTTP请求
TaskQueue --> BusinessLogic : 处理任务

' 注释
note left of UI
    用户与系统交互的入口。
end note

note right of MainDB
    数据持久化存储。
end note

note bottom of EventQueue
    异步处理的核心。
end note
@enduml