Startuml 画流程图使⽤⽅法
程序员难免要经常画流程图，状态图，时序图等。以前经常⽤ visio 画，经常为矩形画多⼤，摆放在哪等问题费脑筋。有时候修改⽂字后，为了较好的显⽰效果不得不再去修改图形。今天介绍的⼯具是如何使⽤ Sublime + PlantUML 的插件画流程图，状态图，时序图等。这是⼀种程序员看了就会爱上的画图⽅式：⾃然，⾼效。Alt+d ⽣成图⽚
什么是 PlantUML
PlantUML 是⼀个画图脚本语⾔，⽤它可以快速地画出：
时序图
流程图
⽤例图
状态图
组件图
简单地讲，我们使⽤ visio 画图时需要⼀个⼀个图去画，但使⽤ PlantUML 只需要⽤⽂字表达出图的内容，然后就可以直接⽣成图⽚。看⼀个最简单的例⼦
时序图
TIPS ：使⽤  来指定标题
'->' 和 '-->' 来指⽰线条的形式在每个时序后⾯加冒号  来添加注释
使⽤  来显⽰备注，备注可以指定显⽰在左边或右边
使⽤  来分隔时序图
使⽤  来表⽰延迟省略号uml图用什么软件画
节点可以给⾃⼰发送消息，⽅法是发送⽅和接收⽅使⽤同⼀个主体即可
⽤例图
⽤例图
⽤例图是指由参与者（Actor ）、⽤例（Use Case ）以及它们之间的关系构成的⽤于描述系统功能的静态视图上有简易的⼊门资料，其中⽤例之间的关系 (include, extends) 是关键
使⽤  来定义参与者
使⽤括号  来表⽰⽤例，⽤例⽤椭圆形表达
使⽤不同的线条表达不同的关系。包括参与者与⽤例的关系，⽤例与⽤例的关系流程图
@startuml
title 时序图
== 鉴权阶段 ==
Alice -> Bob: 请求
Bob -> Alice: 应答
== 数据上传 ==
Alice -> Bob: 上传数据
note left: 这是显⽰在左边的备注
Bob --> Canny: 转交数据
... 不超过 5 秒钟 ...
Canny --> Bob: 状态返回
note right: 这是显⽰在右边的备注
Bob -> Alice: 状态返回
== 状态显⽰ ==
Alice -> Alice: 给⾃⼰发消息
@enduml
title :note == xxx ==...@startuml
left to right direction
actor 消费者
actor 销售员
rectangle 买单 {
消费者 -- (买单)
(买单) .> (付款) : include
(帮助) .> (买单) : extends
(买单) -- 销售员
}
@enduml
actor (xxx)@startuml
start
:
"步骤1处理";
:"步骤2处理";
TIPS ：使⽤  来表⽰流程开始，使⽤  来表⽰流程结束
顺序流程使⽤冒号和分号  来表⽰
条件语句使⽤  来表⽰
条件语句可以嵌套
组件图
我们经常使⽤组件图来画部署视图，或者⽤来画系统的拓扑结构图。
TIPS：使⽤⽅括号  来表⽰组件可以把⼏个组件合并成⼀个包，可以使⽤的关键字为 。不同的关键字图形不⼀样。可以在包内部⽤不同的箭头表达同⼀个包的组件之间的关系可以在包内部直接表达到另外⼀个包内部的组件的交互关系
可以在流程图外部直接表达包之间或包的组件之间的交互关系状态图
我们⼀般使⽤状态图来画状态机。
:"步骤2处理";
if ("条件1判断") then (true)
：条件1成⽴时执⾏的动作;
if ("分⽀条件2判断") then (no)
:"条件2不成⽴时执⾏的动作";
else
if ("条件3判断") then (yes)
:"条件3成⽴时的动作";
else (no)
:"条件3不成⽴时的动作";
endif
endif
:"顺序步骤3处理";
endif
if ("条件4判断") then (yes)
:"条件4成⽴的动作";
else
if ("条件5判断") then (yes)
:"条件5成⽴时的动作";
else (no)
:"条件5不成⽴时的动作";
endif
endif
stop
@enduml
start stop :xxx;if ("condition 1") then (true/yes/false/no)@startuml
package "组件1" {
["组件1.1"] - ["组件1.2"]
["组件1.2"] -> ["组件2.1"]
}
node "组件2" {
["组件2.1"] - ["组件2.2"]
["组件2.2"] --> [负载均衡服务器]
}
cloud {
[负载均衡服务器] -> [逻辑服务器1]
[负载均衡服务器] -> [逻辑服务器2]
[负载均衡服务器] -> [逻辑服务器3]
}
database "MySql" {
folder "This is my folder" {
[Folder 3]
}
frame "Foo" {
[Frame 4]
}
}
[逻辑服务器1] --> [Folder 3]
[逻辑服务器2] --> [Frame 4]
[逻辑服务器3] --> [Frame 4]
@enduml
[xxx]package, node, folder, frame, cloud, database @startuml
scale 640 width
[*] --> NotShooting
state NotShooting {
TIPS：使⽤  来表⽰状态的起点
使⽤ state 来定义⼦状态图
状态图可以嵌套
使⽤  命令来指定⽣成的图⽚的尺⼨state NotShooting {
[*] --> Idle
Idle --> Processing: SignalEvent
Processing --> Idle: Finish
Idle --> Configuring : EvConfig
Configuring --> Idle : EvConfig
}
state Configuring {
[*] --> NewValueSelection
NewValueSelection --> NewValuePreview : EvNewValue
NewValuePreview --> NewValueSelection : EvNewValueRejected    NewValuePreview --> NewValueSelection : EvNewValueSaved    state NewValuePreview {
State1 -> State2
}
}
@enduml
[*]scale

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。