绘图引擎环境搭建（程序员绘图工具-Plantuml）

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

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

@startuml A -> B: do something B -> A: do something @enduml

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

@startuml actor Foo1 boundary Foo2 control Foo3 entity Foo4 database Foo5 collections Foo6 Foo1 -> Foo2 : To boundary Foo1 -> Foo3 : To control Foo1 -> Foo4 : To entity Foo1 -> Foo5 : To database Foo1 -> Foo6 : To collections @enduml

@startuml Bob ->x Alice Bob -> Alice Bob ->> Alice Bob -\ Alice Bob \\- Alice Bob //-- Alice Bob ->o Alice Bob o\\-- Alice Bob <-> Alice Bob <->o Alice Bob -[#red]> Alice : hello Alice -[#0000FF]->Bob : ok @enduml

@startuml Alice -> Bob : message 1 Alice -> Bob : message 2 newpage Alice -> Bob : message 3 Alice -> Bob : message 4 newpage A title for the\nlast page Alice -> Bob : message 5 Alice -> Bob : message 6 @enduml

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

@startuml participant User User -> A: DoWork activate A #FFBBBB A -> A: Internal call activate A #DarkSalmon A -> B: << createRequest >> activate B B --> A: RequestCreated deactivate B deactivate A A -> User: Done deactivate A @enduml

image.png

@startuml header Page Header footer Page %page% of %lastpage% title Example Title Alice -> Bob : message 1 note left: this is a first note Alice -> Bob : message 2 @enduml

image.png

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.puml System(systemAlias, "System", "这可以看作系统上下文(Context)") Container(containerAlias, "Container", "这是Container") Person(personAlias, "Person", "这可以看作是组件(Component)") Rel(personAlias, containerAlias, "Label", "设置关联关系") @enduml