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

2025-10-05 08:55热点百科

在写文档的过程中，经常需要进行画图。虽然说现在有很多类似viso之类的可视化画图工具，但是还是要花费大量时间在拖拉组件上，效率十分低下。最近在网上找到了一款还算不错的绘图工具-- Plantuml, 它本质上是也算一门可以快速画图的设计语言，学习起来也很方便。可以在网站上体验一下。在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 the\nlast 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