Block 块状图：列与自动布局

简介 / Introduction

Block 块状图用于描述系统的组件结构，适合展示硬件/软件层次或数据流。PlantUML 和 Mermaid 都支持块状图，但语法差异较大。本文用同一场景分别演示两种引擎的写法。

PlantUML 版

PlantUML 的 block 语法以 block <name> 定义块，rel 连接块，支持嵌套 block。

@startuml
skinparam defaultTextAlignment center

block 展示层 #lightblue
  block 前端 as FE
end block

block 服务层 #lightgreen
  block API服务 as API
  block 缓存 as Cache
end block

block 数据层 #wheat
  block 主数据库 as DB
end block

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

Mermaid 版

Mermaid v11 的 block-beta 以 block 声明块，用 arrange 控制列布局（默认 LR），: 标注连接关系。

block-beta
  columns 1

  web["展示层<br/>Frontend<br/>浏览器/客户端"]
  api["服务层<br/>API Server<br/>REST / gRPC"]
  db["数据层<br/>Database<br/>MySQL / PG"]

  web:0
  api:0
  db:0

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

对比 / Side-by-side

特性	PlantUML	Mermaid
声明块	`block <name> as <alias>`	`block <id>["标签"]`
列布局	隐式按嵌套层级排列	`columns N` 显式指定列数
连接线	`rel` + 方向符号	`=>` 或 `<=`
嵌套块	`block ... end block`	不支持直接嵌套
样式	`skinparam` + 颜色关键字	暂不支持颜色注入

小结 / Wrap-up

PlantUML block 适合复杂嵌套结构，支持皮肤参数精细控制样式；Mermaid block-beta 胜在简洁，支持 arrange 列布局自动排列。两者皆可用于表达系统架构，选型依团队工具链和图复杂度而定。