Architecture diagrams: icons and grouping

简介 / Introduction

Architecture diagrams are purpose-built for software architecture documentation, supporting icons, hierarchical grouping, and cross-layer service references. PlantUML uses rectangle/component with skinparam; Mermaid v11 introduced architecture-beta syntax. This post compares both approaches side-by-side.

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

Feature	PlantUML	Mermaid
Diagram type	`@startuml` + `rectangle`/`component`	`architecture-beta` block
Container grouping	`rectangle "name" <<stereo>>`	`group [label]` / `service [name]`
Database shape	native `database` shape	`db [(label)]`
Cross-layer refs	`A ..> B` arrow syntax	`service:index` positioning + `<-->` arrows
Icon support	`<<icon>>` placeholder style	service name as text label
Styling	`skinparam` global config	built-in Mermaid themes

小结 / Wrap-up

PlantUML’s Architecture diagrams offer fine-grained style control via rectangle + skinparam, suited for formal documentation. Mermaid’s architecture-beta is more concise and ideal for quick sketches and inline embeds. Both support database and queue primitives — choose based on your styling requirements and rendering context.