在团队协作过程中最常见的就是开会、开会最常用的就是图，而图中最常见的就是流程图，时序图，类图等下面介绍一款画图神器：PlantUML

PlantUML是一个开源项目，支持快速绘制：

• 时序图
• 用例图
• 类图
• 活动图
• 组件图
• 状态图
• 对象图
• 部署图
• 定时图

附上地址: http://plantuml.com

在线画图

假如您和我一样也是个急性子 :-)

尝试 PlantUML 最简单快捷的方法就是使用在线编辑服务.

http://www.plantuml.com/plantuml/uml

• 1.打开在线编辑服务

在线编辑服务

• 2.输入代码：

@startumlBob -> Alice : hello@enduml

• 3.点击submit即可

第一个UML图

本地画图

• 安装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"按钮 来重新指定工作目录. 保持界面处于打开状态,不要关闭.

uml界面

• 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

(注：重启生效)

安装plugin

• 2.右键-> New-> PlantUML FIle-> 输入Name -> ok

创建uml1

创建uml2

• 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