在团队协作过程中最常见的就是开会、开会最常用的就是图,而图中最常见的就是流程图,时序图,类图等下面介绍一款画图神器:PlantUML
PlantUML是一个开源项目,支持快速绘制:
- 时序图
- 用例图
- 类图
- 活动图
- 组件图
- 状态图
- 对象图
- 部署图
- 定时图
附上地址: http://plantuml.com
在线画图
假如您和我一样也是个急性子 :-)
尝试 PlantUML 最简单快捷的方法就是使用在线编辑服务.
http://www.plantuml.com/plantuml/uml
- 1.打开在线编辑服务
- 2.输入代码:
@startumlBob -> Alice : hello@enduml
- 3.点击submit即可
本地画图
- 安装PlantUML
软件要求: Java : 是运行PlantUML的必需条件 (如果想绘制 除 时序图和活动图以外的图, 就需要安装 Graphviz)
- 1.下载plantuml.jar
jar下载地址:http://sourceforge.net/projects/plantuml/files/plantuml.jar/download
- 2.双击 plantuml.jar 文件(或者: java -jar plantuml.jar ), 启动 plantUML界面. 可以点击"Change Directory"按钮 来重新指定工作目录. 保持界面处于打开状态,不要关闭.
- 3.构建第一个本地UML图
在工作目录中建立一个demo.txt内容如下:
@startumlAlice -> Bob: test@enduml
- 4.打开文件所在目录就可以看到生成的图片:demo.png
注: 图片的生成是实时的,可以边改边看哦!
看到这里,你是不是觉得爱上画图了?
我想你是爱我的我猜你也舍不得但是怎么说 总觉得我们之间留了太多空白格……
还没有爱上?怎么又是要打开网址,又是下载jar, 这么麻烦?
没关系, 下面我们再来介绍一个IDEA插件。
IntelliJ IDEA PLUGIN
- 1.打开IDEA :
Settings -> Plugins -> Browse repositories -> 输入:Plantuml integration -> Install
(注:重启生效)
- 2.右键-> New-> PlantUML FIle-> 输入Name -> ok
- 3.打开demo.puml
@startumlAlice -> Bob: Authentication RequestBob --> Alice: Authentication ResponseAlice -> Bob: Another authentication RequestAlice
这时候我们就可以看到,左边为代码, 右边为UML图。
怎么画图
看完上面的安装使用,大家可能发现了,画图的方式是不是变了?
平时画图都是通过鼠标,拖出各种图
现在而是通过代码的形式在生成
对于同为程序员的我来说,写代码跟画图来比,我还是更热衷于通过代码来实现
- 时序图的语法于功能
修改箭头样式
方式有以下几种:
- 表示一条丢失的消息:末尾加 x
- 让箭头只有上半部分或者下半部分:将替换成或者 /
- 细箭头:将箭头标记写两次 (如 >> 或 //)
- 虚线箭头:用 -- 替代 -
- 箭头末尾加圈:->o
- 双向箭头:
@startumlBob ->x AliceBob -> AliceBob ->> AliceBob - AliceBob - AliceBob //-- AliceBob ->o AliceBob o-- AliceBob AliceBob o Alice@enduml
修改箭头颜色
@startumlBob -[#red]> Alice : helloAlice -[#0000FF]->Bob : ok@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
分割示意图
@startumlAlice -> Bob : message 1Alice -> Bob : message 2newpageAlice -> Bob : message 3Alice -> Bob : message 4newpage A title for thelast pageAlice -> Bob : message 5Alice -> Bob : message 6@enduml
组合消息
@startumlAlice -> Bob: Authentication Requestalt successful caseBob -> Alice: Authentication Acceptedelse some kind of failureBob -> Alice: Authentication Failuregroup My own labelAlice -> Log : Log attack start loop 1000 times Alice -> Bob: DNS Attack endAlice -> Log : Log attack endendelse Another type of failure Bob -> Alice: Please repeat end@enduml
给消息添加注释
@startumlAlice->Bob : hellonote left: this is a first noteBob->Alice : oknote right: this is another noteBob->Bob : I am thinkingnote lefta notecan also be definedon several linesend note@enduml
更多的语法请参考官方……
通过代码来实现流程图,有没有觉得很爽呢?
更重要的,支持的平台非常多
http://plantuml.com/zh/running