程序员绘图工具-Plantuml

在写文档的过程中，经常需要进行画图。虽然说现在有很多类似viso之类的可视化画图工具，但是还是要花费大量时间在拖拉组件上，效率十分低下。最近在 上找到了一款还算不错的绘图工具– Plantuml, 它本质上是也算一门可以快速画图的设计语言，学习起来也很方便。可以在http://plantuml.com/ 站上体验一下。
在vscode, webstorm都有相关的插件可以使用。

时序图

时序图相对来说是平常比较经常画的一种设计图稿，在这里记录一下plantuml中相关的语法。

基本用法

@startumlA -> B: do somethingB -> A: do something@enduml

设置不同的角色

时序图角色可以分为: actor, boundary, control, entity, database，每种角色呈现的图形也是不一样的。

@startumlactor Foo1boundary Foo2control Foo3entity Foo4database Foo5collections Foo6Foo1 -> Foo2 : To boundaryFoo1 -> Foo3 : To controlFoo1 -> Foo4 : To entityFoo1 -> Foo5 : To databaseFoo1 -> Foo6 : To collections@enduml

不用的箭头样式

@startumlBob ->x AliceBob -> AliceBob ->> AliceBob - AliceBob \- AliceBob //-- AliceBob ->o AliceBob o\-- AliceBob <-> AliceBob <->o AliceBob -[#red]> Alice : helloAlice -[#0000FF]->Bob : ok@enduml

分页

@startumlAlice -> Bob : message 1Alice -> Bob : message 2newpageAlice -> Bob : message 3Alice -> Bob : message 4newpage A title for thenlast pageAlice -> Bob : message 5Alice -> Bob : message 6@enduml

分段

@startuml== Initialization ==Alice -> Bob: Authentication RequestBob --> Alice: Authentication Response== Repetition ==Alice -> Bob: Another authentication RequestAlice <-- Bob: another authentication Response@enduml

生命线

@startumlparticipant UserUser -> A: DoWorkactivate A #FFBBBBA -> A: Internal callactivate A #DarkSalmonA -> B: << createRequest >>activate BB --> A: RequestCreateddeactivate Bdeactivate AA -> User: Donedeactivate A@enduml

image.png

图例注脚等

@startumlheader Page Headerfooter Page %page% of %lastpage%title Example TitleAlice -> Bob : message 1note left: this is a first noteAlice -> Bob : message 2@enduml

image.png

C4架构图

C4 model是一种软件架构图的设计方法，具体介绍可以参考C4 architecture model。利用C4-PlantUML工具，可以画出很多很不错的架构图。
C4模型分为Context, Container, Component和Code 4个组成部分，我们一般在画图的时候主要用到前三个组成部分。

@startuml C4_Elements!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Context.puml!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Component.pumlSystem(systemAlias, "System", "这可以看作系统上下文(Context)")Container(containerAlias, "Container", "这是Container")Person(personAlias, "Person", "这可以看作是组件(Component)")Rel(personAlias, containerAlias, "Label", "设置关联关系")@enduml