捣鼓PlantUML（二、组件图）

简单介绍

为什么先讲组件图，是因为我是由于需要画组件图所以才去找的这个工具。组件图实质就是将一个大系统，拆分为若干功能相对独立，互相之间存在关联依赖关系的组件集合。然后由一张图列出所有组件及它们之间的关联关系。这样我们就可以很直观地初步了解这个大系统的整体情况。

组件可以是一个jar包，可以是一个业务逻辑上功能相对独立的类，也可以是一个完整的子系统或者外部服务等。组件的概念比较松散。

同样以上一篇文章(《捣鼓PlantUML（一、环境）》)中的图作为示范：

这篇文章将参考plantUML官方文档PlantUML_Language_Reference_Guide对组件的画法做一个梳理。（注：画上面这个组件图时，我还没看文档哈！）

组件

组件是被中括号[]扩起来的，除此之外，也可以使用component关键字来定义一个组件。每个组件定义之后，都可以通过as关键字来为这个组件定义一个别名。在后面讲关系映射的时候会用到。

@startuml[第一个组件]
[第二个组件] as com2
component 组件三
component [最后一个组件] as com4@enduml

画出的UML图如下：

接口

接口一般是通过括号来定义()（因为它看起来像是一个圆^_^）。除此以外，还可以通过关键字interface来定义。在接口定义好之后，可以通过as关键字来为这个组件定义一个别名。在后面讲关系映射的时候会用到。（注：另外，不用括号，直接写接口名称，也可以直接生成接口。)

@startuml() "第一个接口"
() "second interface" as inter2
interface inter3
interface lastInterface as inter4@enduml

画出的UML图如下：

基本关系示例

组件与组件、组件与接口之间的关系，通过两点..或者两短线--和尖括号表达>(-->)的组合来表达。

@startuml() "数据访问接口" - [第一个组件]
[第一个组件] ..> () "HTTP" : use@enduml

由于接口定义的括号可以省略，因此也可以写为：

@startuml数据访问接口 - [第一个组件]
[第一个组件] ..> HTTP : use@enduml

画出的UML图如下：

注释便签

每个组件上都可以添加注释便签，以便做进一步的说明和注释。这是通过note left of 、 note right of 、 note top of 、 note bottom of关键词来定义的。

除此以外，还可以仅通过note关键词来定义个注释标签，然后通过..将它与具体的组件绑定。

@startuml数据访问接口 - [第一个组件]
[第一个组件] ..> HTTP : usenote left of HTTP : 这是一个web服务接口
note right of [第一个组件]
注释便签也可以像这样，
用多行来表示。
end notenote "先定义后绑定的方式" as note1
note1 ..  数据访问接口@enduml

画出来的UML图如下：

组合组件

一些组件合起来可以组合成一个更大的相对独立的逻辑业务。为了系统组件图看起来逻辑更清晰直观，往往需要我们将这些组件组合起来。

将组件组合起来的关键字有以下这些：

package
node
folder
frame
cloud
database

@startuml

package "包组合" {HTTP - [包一组件][包二组件]
}node "节点组合" {FTP - [节点一组件][包一组件] --> FTP
}cloud "云服务" {[云里一]
}database "数据库服务" {folder "文件夹组合" {[文件夹一]}frame "帧组合" {[帧二]}
}[包二组件] --> [云里一]
[云里一] --> [文件夹一]
[文件夹一] --> [帧二]@enduml

画出的UML图如下：

关系的箭头方向

我们一般使用两个短横线箭头-->或者两个点箭头..>，表示的是箭头方向是垂直的，由上指向下。如果使用单横线箭头->或者单点箭头.>则箭头方向水平。

@startuml[组件] --> [我在下面]
[组件] -> [我在右边]@enduml

UML图如下：

除此以外，还可以改变箭头的指向向左。例如<-- 或者 <..。
但是不管表达式中的箭头方向如何，一定是表达式左边组件在左或者在上，右边组件在右或者在下。

@startuml[中间] --> [下面]
[中间] -> [右边]
[左边] <. [中间]
[上面] <.. [中间]@enduml

UML图如下：

另外还有一种办法可以改变箭头的方向。就是在短横线或点中间，加入left、right、up、down关键字。

@startuml[中间] -right-> [右边]
[中间] -down-> [下面]
[中间] .left.> [左边]
[中间] .up.> [上面]@enduml

生成的UML图与上面完全相同。

设置标题

使用title关键字就可以为UML组件图设置标题。可以用title配合end title来设置多行标题。

@startumltitle UML图标题数据访问接口 - [第一个组件]
[第一个组件] ..> HTTP : use@enduml

UML图如下：

UML2风格

通过skinparam componentStyle uml2指令，可以将UML组件图风格切换为UML2风格。我们以上一个图为例，使用UML2风格，看看有何不同。

@startumlskinparam componentStyle uml2title
UML图标题
可以吗？
end title数据访问接口 - [第一个组件]
[第一个组件] ..> HTTP : use@enduml

UML2风格图如下：

个性化颜色

在组件定义完成后，可以手动指定组件的颜色。

@startumlskinparam componentStyle uml2title
UML图标题
可以吗？
end title[第一个组件] #00ff00
数据访问接口 - [第一个组件]
[第一个组件] ..> HTTP : use@enduml

UML图如下：

在Stereotype中使用像素格式小图标

UML中的Stereotype意思是你自己定义的模块风格。通常用两对尖括号声明<<>>。

@startumlrectangle "module" <<mine>> {rectangle "handler1" <<mine>> as h1rectangle "handler2" <<mine>> as h2h1 -> h2
}@enduml

UML图如下：

我们可以看到，此处组件上多了<<mine>>标记，从而确认是自定义的模块。但是这个文字内容不便于识别，特别是有多个种类的自定义模块时。PlantUML支持此标记用像素格式的小图标来标记。

@startumlsprite $mine [16x16/16] {FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF0FFFFFFFFFFFFFFF00FFFFFF00000000000FFFFF000000000000FFFF00000000000FFFFFFFFFFFFF00FFFFFFFFFFFFFF0FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
}rectangle "module" <<$mine>> {rectangle "handler1" <<$mine>> as h1rectangle "handler2" <<$mine>> as h2h1 -> h2
}@enduml

UML图如下：

skinparam修改外观

你可以通过skinparam指令改变组件的颜色和字体。可以在以下三种场合中使用skinparam指令：

在图表的描述文件中，像其他指令写法一样
写在一个包含文件中
写在一个配置文件中，然后提供给图表文件作为指令，或者提供给ANT编译时指定

@startumlskinparam interface {backgroundColor RosyBrownborderColor orange
}
skinparam component {fontsize 13backgroundColor #AAAAAAborderColor #FF6655fontName 微软雅黑arrowFontName ImpactarrowColor greenarrowFontColor red
}
[组件] -left-> 接口 : arrow
[组件] -down-> API
API .> [客户端]@enduml

UML图如下：

我们可以通过这种方式来定义stereotype的颜色和字体。

@startumlpackage "包包" <<myPack>> {[组件] <<myComp>>
}
package "普通包" {[普通组件]
}
skinparam package {backgroundColor<<myPack>> grey
}
skinparam component {backgroundColor<<myComp>> #0000FF
}@enduml

UML图如下：

至此，PlantUML画组件图的相关知识点梳理完毕~