Architecture 图：图标与分组

简介 / Introduction

Architecture 图专为软件架构文档设计，支持图标、分层分组和跨层服务引用。PlantUML 通过 !theme + rectangle/component 实现；Mermaid v11 引入了 architecture-beta 语法。本文对比两种写法和视觉效果。

PlantUML 版

@startuml
skinparam rectangle {
    BackgroundColor #F0F4F8
    BorderColor #4A90E2
    FontStyle bold
}
skinparam component {
    BackgroundColor #E8F5E9
    BorderColor #388E3C
}
skinparam arrow {
    Color #555555
}

rectangle "Web Frontend" <<web>> as WF {
    component "SPA" <<gui>>
}
rectangle "API Gateway" <<gateway>> as GW
rectangle "User Service" <<service>> as US
rectangle "Order Service" <<service>> as OS
database "User DB" <<db>> as UDB
database "Order DB" <<db>> as ODB

WF ..> GW : HTTPS
GW --> US : gRPC
GW --> OS : gRPC
US --> UDB : SQL
OS --> ODB : SQL
@enduml

Mermaid 版

architecture-beta
    group web[Web Frontend]
        service spa[SPA]
    end
    group api[API Gateway]
        service gateway[Gateway]
    end
    group services[Backend Services]
        service user[User Service]
        service order[Order Service]
        db userdb[(User DB)]
        db orderdb[(Order DB)]
    end
    web:0
    spa:1
    gateway:0
    user:0
    order:1
    userdb:0
    orderdb:1
    web <--> gateway
    gateway <--> user
    gateway <--> order
    user <--> userdb
    order <--> orderdb

对比 / Side-by-side

特性	PlantUML	Mermaid
图类型声明	`@startuml` + `rectangle`/`component`	`architecture-beta` 区块
容器分组	`rectangle "name" <<stereo>>`	`group [label]` / `service [name]`
数据库形状	`database` 原生形状	`db [(label)]`
分层引用	`A ..> B` 箭头语法	`service:index` 定位 + `<-->` 箭头
图标支持	`<<icon>>` 占位符风格	服务名作为文字标签
皮肤样式	`skinparam` 全局配色	Mermaid 内置主题

小结 / Wrap-up

PlantUML 的 Architecture 图通过 rectangle + skinparam 提供细粒度样式控制，适合正式文档；Mermaid 的 architecture-beta 更简洁，适合快速草图和内嵌展示。两者都支持数据库和队列等标准组件，选型取决于项目的样式需求和渲染环境。