组件图：组件图是 UML（统一建模语言）中的一种结构图，用于可视化系统组件的组织和关系。这些图有助于将复杂的系统分解成易于管理的组件，展示它们之间的相互依存关系，确保高效的系统设计和架构。
PlantUML 的优势：
- 简单：使用 PlantUML，您可以使用简单直观的文本描述来创建组件图，无需使用复杂的绘图工具。
- 集成：PlantUML 可* 与各种工具和平台无缝集成，是开发人员和建筑师的多功能选择。
- 协作：PlantUML 论坛为用户提供了一个讨论、分享和寻求图表帮助的平台，从而培养了一个协作社区。
组件必须用中括号括起来。
还可以使用关键字
component定义一个组件。
并且可以用关键字
as给组件定义一个别名。
这个别名可以在稍后定义关系的时候使用。
|
🎉 Copied!
|
@startuml
[First component]
[Another component] as Comp2
component Comp3
component [Last\ncomponent] as Comp4
@enduml
|
命名例外
注意，以
$ 开头的组件名以后不能隐藏或删除，因为
hide 和
remove 命令会将该名称视为
$tag ，而不是组件名。要删除此类组件，必须为其添加别名或标记。
|
🎉 Copied!
|
@startuml
component [$C1]
component [$C2] $C2
component [$C2] as dollarC2
remove $C1
remove $C2
remove dollarC2
@enduml
|
接口可以使用
()来定义(因为这个看起来像个圆)。
还可以使用关键字
interface关键字来定义接口。
并且还可以使用关键字
as定义一个别名。
这个别名可以在稍后定义关系的时候使用。
我们稍后可以看到，接口的定义是可选的。
|
🎉 Copied!
|
@startuml
() "First Interface"
() "Another interface" as Interf2
interface Interf3
interface "Last\ninterface" as Interf4
@enduml
|
元素之间可以使用虚线(
..)、直线(
--)、箭头(
-->)进行连接。
|
🎉 Copied!
|
@startuml
DataAccess - [First Component]
[First Component] ..> HTTP : use
@enduml
|
你可以使用
note left of ,
note right of ,
note top of ,
note bottom of
等关键字定义相对于对象位置的注释。
也可以使用关键字
note单独定义注释，然后使用虚线(
..)将其连接到其他对象。
|
🎉 Copied!
|
@startuml
interface "Data Access" as DA
DA - [First Component]
[First Component] ..> HTTP : use
note left of HTTP : Web Service only
note right of [First Component]
A note can also
be on several lines
end note
@enduml
|
WARNING
This translation need to be updated. WARNING
你可以使用多个关键字将组件和接口组合在一起。
packagenodefolderframeclouddatabase
|
🎉 Copied!
|
@startuml
package "Some Group" {
HTTP - [First Component]
[Another Component]
}
node "Other Groups" {
FTP - [Second Component]
[First Component] --> FTP
}
cloud {
[Example 1]
}
database "MySql" {
folder "This is my folder" {
[Folder 3]
}
frame "Foo" {
[Frame 4]
}
}
[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]
@enduml
|
默认情况下，对象之间用
--连接，并且连接是竖直的。不过可以使用一个横线或者点设置水平方向的连接，就行这样：
|
🎉 Copied!
|
@startuml
[Component] --> Interface1
[Component] -> Interface2
@enduml
|
也可以使用反向连接：
|
🎉 Copied!
|
@startuml
Interface1 <-- [Component]
Interface2 <- [Component]
@enduml
|
还可以使用关键字
left,
right,
up
or
down改变箭头方向。
|
🎉 Copied!
|
@startuml
[Component] -left-> left
[Component] -right-> right
[Component] -up-> up
[Component] -down-> down
@enduml
|
允许使用方向单词的首字母或者前两个字母表示方向(例如
-d-,
-do-,
-down-都是等价的)。
请不要乱用这些功能：
Graphviz(PlantUML的后端引擎)不喜欢这个样子。
_See also 'Change diagram orientation' on [Deployment diagram](deployment-diagram) page._
By default
(from v1.2020.13-14), UML2 notation is used.
|
🎉 Copied!
|
@startuml
interface "Data Access" as DA
DA - [First Component]
[First Component] ..> HTTP : use
@enduml
|
命令
skinparam componentStyle uml1 可以切换到UML1标记符。
|
🎉 Copied!
|
@startuml
skinparam componentStyle uml1
interface "Data Access" as DA
DA - [First Component]
[First Component] ..> HTTP : use
@enduml
|
The
skinparam componentStyle rectangle command is used to switch to rectangle notation
(without any UML notation).
|
🎉 Copied!
|
@startuml
skinparam componentStyle rectangle
interface "Data Access" as DA
DA - [First Component]
[First Component] ..> HTTP : use
@enduml
|
可以用方括号"[ ]"在连线上添加描述。
|
🎉 Copied!
|
@startuml
component comp1 [
This component
has a long comment
on several lines
]
@enduml
|
你可以在声明一个组件时加上颜色的声明。
|
🎉 Copied!
|
@startuml
component [Web Server] #Yellow
@enduml
|
你可以在定型组件中使用精灵图（sprite）。
|
🎉 Copied!
|
@startuml
sprite $businessProcess [16x16/16] {
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFF00FFFF
FF00000000000FFF
FF000000000000FF
FF00000000000FFF
FFFFFFFFFF00FFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
}
rectangle " End to End\nbusiness process" <<$businessProcess>> {
rectangle "inner process 1" <<$businessProcess>> as src
rectangle "inner process 2" <<$businessProcess>> as tgt
src -> tgt
}
@enduml
|
用
skinparam改变字体和颜色。
可以在如下场景中使用：
可以为构造类型和接口定义特殊的颜色和字体。
|
🎉 Copied!
|
@startuml
skinparam interface {
backgroundColor RosyBrown
borderColor orange
}
skinparam component {
FontSize 13
BackgroundColor<<Apache>> Pink
BorderColor<<Apache>> #FF6655
FontName Courier
BorderColor black
BackgroundColor gold
ArrowFontName Impact
ArrowColor #FF6655
ArrowFontColor #777777
}
() "Data Access" as DA
Component "Web Server" as WS << Apache >>
DA - [First Component]
[First Component] ..> () HTTP : use
HTTP - WS
@enduml
|
|
🎉 Copied!
|
@startuml
skinparam component {
backgroundColor<<static_lib>> DarkKhaki
backgroundColor<<shared_lib>> Green
}
skinparam node {
borderColor Green
backgroundColor Yellow
backgroundColor<<shared_node>> Magenta
}
skinparam databaseBackgroundColor Aqua
[AA] <<static_lib>>
[BB] <<shared_lib>>
[CC] <<static_lib>>
node node1
node node2 <<shared node>>
database Production
@enduml
|
WARNING
This translation need to be updated. WARNING
组件样式
- 默认情况下（或使用
skinparam componentStyle uml2 ），组件有一个图标。
|
🎉 Copied!
|
@startuml
skinparam BackgroundColor transparent
skinparam componentStyle uml2
component A {
component "A.1" {
}
component A.44 {
[A4.1]
}
component "A.2"
[A.3]
component A.5 [
A.5]
component A.6 [
]
}
[a]->[b]
@enduml
|
- 如果您想取消它，只使用矩形图标，可以使用
skinparam componentStyle rectangle
|
🎉 Copied!
|
@startuml
skinparam BackgroundColor transparent
skinparam componentStyle rectangle
component A {
component "A.1" {
}
component A.44 {
[A4.1]
}
component "A.2"
[A.3]
component A.5 [
A.5]
component A.6 [
]
}
[a]->[b]
@enduml
|
[参考文献10798］
默认情况下，所有的组件都显示出来：
|
🎉 Copied!
|
@startuml
component C1
component C2
component C3
C1 -- C2
@enduml
|
但你可以：
|
🎉 Copied!
|
@startuml
component C1
component C2
component C3
C1 -- C2
hide @unlinked
@enduml
|
|
🎉 Copied!
|
@startuml
component C1
component C2
component C3
C1 -- C2
remove @unlinked
@enduml
|
[参考QA-11052]
You can put
$tags (using
$) on components, then remove, hide or restore components either individually or by tags.
By default, all components are displayed:
|
🎉 Copied!
|
@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2
@enduml
|
But you can:
|
🎉 Copied!
|
@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2
hide $tag13
@enduml
|
- or
remove $tag13 components:
|
🎉 Copied!
|
@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2
remove $tag13
@enduml
|
- or
remove $tag13 and restore $tag1 components:
|
🎉 Copied!
|
@startuml
component C1 $tag13 $tag1
component C2
component C3 $tag13
C1 -- C2
remove $tag13
restore $tag1
@enduml
|
- or
remove * and restore $tag1 components:
|
🎉 Copied!
|
@startuml
component C1 $tag13 $tag1
component C2
component C3 $tag13
C1 -- C2
remove *
restore $tag1
@enduml
|
[Ref. QA-7337 and QA-11052]
简单的例子
|
🎉 Copied!
|
@startuml
allowmixing
component Component
() Interface
json JSON {
"fruit":"Apple",
"size":"Large",
"color": ["Red", "Green"]
}
@enduml
|
[Ref.QA-15481]
关于另一个例子，请看[JSON页面](json#2fyxla9p9ob6l3t3tjre)。
您可以用
port,
portin和
portout 关键词添加
端口。
端口
|
🎉 Copied!
|
@startuml
[c]
component C {
port p1
port p2
port p3
component c1
}
c --> p1
c --> p2
c --> p3
p1 --> c1
p2 --> c1
@enduml
|
端口输入
|
🎉 Copied!
|
@startuml
[c]
component C {
portin p1
portin p2
portin p3
component c1
}
c --> p1
c --> p2
c --> p3
p1 --> c1
p2 --> c1
@enduml
|
端口输出
|
🎉 Copied!
|
@startuml
component C {
portout p1
portout p2
portout p3
component c1
}
[o]
p1 --> o
p2 --> o
p3 --> o
c1 --> p1
@enduml
|
混合使用 PortIn 和 PortOut
|
🎉 Copied!
|
@startuml
[i]
component C {
portin p1
portin p2
portin p3
portout po1
portout po2
portout po3
component c1
}
[o]
i --> p1
i --> p2
i --> p3
p1 --> c1
p2 --> c1
po1 --> o
po2 --> o
po3 --> o
c1 --> po1
@enduml
|
组件
主页
新鲜
入门指南
Online Server
使用
常见问题
下载
论坛 
Theme
预处理
标准库
Hitchhiker's Guide
用户指南(PDF)
Edit in Dokuwiki
Edit in Asciidoc
Edit in Markdown
