PlantUML组件图

<uml>
@startuml
'以方括号[]定义组件
[First Component]

'使用as关键字定义别名
[Second Component] as comp2

'使用component关键字显式定义
component [Third Component]

'使用括号()定义接口，as指定别名，也可以使用关键字interface显式定义。但是注意，接口名称TM是在一堆括号后面的，并且有空格的话放在双引号中，奇葩的UML
() "1st Interface"
() "2nd Interface" as intf2
interface "3rd Interface"
@enduml

@startuml
'元素之间的连接使用虚线（..）、直线（--）、箭头（-->）连接。
'老规矩，一个连接符默认向右，两个连接符默认向下
() "Data Access" as da
da - [Database Engine]
[Database Engine] ..> [PHP]

'用冒号:可以指定连接符上的文本
[PHP] --> [HTTP Server] : "Hypertext pre-processing"

'使用note关键字定义注释
note right of [HTTP Server]
  Apache httpd or nginx
end note

'可以通过left、right、up、down关键字定义箭头方向，也可以使用反向连接来指定
[Client] <- [HTTP Server]
[Client] -up-> [Browser]
@enduml