Block diagrams: block-beta columns

简介 / Introduction

Block diagrams describe the structural composition of a system, ideal for showing hardware/software layers or data flow. Both PlantUML and Mermaid support block diagrams, though their syntax differs significantly. This article demonstrates equivalent diagrams using the same scenario on both engines.

PlantUML 版

PlantUML’s block syntax uses block <name> to define blocks and rel to connect them, supporting nested block structures.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

@startuml
skinparam defaultTextAlignment center

block Frontend #lightblue
  block Browser as FE
end block

block Services #lightgreen
  block API_Server as API
  block Cache as Cache
end block

block DataLayer #wheat
  block Database as DB
end block

FE      <--> API   : HTTPS
API     <--> Cache : Redis
API     <--> DB    : SQL
Cache   -[hidden]-> DB
@enduml

Mermaid 版

Mermaid v11’s block-beta uses block to declare blocks and arrange to control column layout (default LR), with : marking relationships.

1
2
3
4
5
6
7
8
9
10
11
12
13

block-beta
  columns 1

  web["Frontend<br/>Browser / Client"]
  api["API Server<br/>REST / gRPC"]
  db["Database<br/>MySQL / PG"]

  web:0
  api:0
  db:0

  web => api: HTTPS
  api => db: SQL

对比 / Side-by-side

小结 / Wrap-up

PlantUML blocks suit complex nested structures with fine-grained style control via skinparams; Mermaid block-beta wins on brevity with arrange-based column auto-layout. Both are valid choices for system architecture diagrams — pick based on your toolchain and diagram complexity.