程序员难免要经常画流程图,状态图,时序图等。以前经常用 visio 画,经常为矩形画多大,摆放在哪等问题费脑筋。有时候修改文字后,为了较好的显示效果不得不再去修改图形。今天介绍的工具是如何使用 Sublime + PlantUML 的插件画流程图,状态图,时序图等。这是一种程序员看了就会爱上的画图方式:自然,高效。

什么是 PlantUML

PlantUML 是一个画图脚本语言,用它可以快速地画出:

  • 时序图
  • 流程图
  • 用例图
  • 状态图
  • 组件图

简单地讲,我们使用 visio 画图时需要一个一个图去画,但使用 PlantUML 只需要用文字表达出图的内容,然后就可以直接生成图片。看一个最简单的例子:

Bob -> Alice : Hello, how are you
Alice -> Bob : Fine, thank you, and you?

demo

软件安装

这些软件全部是开源或共享软件,不存在版权问题,可以放心使用。

  • 安装 Sublime
    Sublime 是个强大的可扩展的文本编辑器。进入官网下载对应操作系统下的版本安装即可。
  • 安装 graphviz
    graphviz 是个开源的图片渲染库。安装了这个库才能在 Windows 下实现把 PlantUML 脚本转换为图片。
  • 安装 PlantUML for Sublime 插件
    有了这个插件后,我们就可以在 Sublime 里写 PlantUML 脚本,然后直接通过一个快捷键生成图片。安装步骤如下
    • 下载插件,并解压
    • 通过 Preferences -> Browse Packages ... 打开 sublime 的 Packages 目录,解压后的插件放在 Packages 目录下
    • 重启 Sublime

为了简化使用,可以在 Sublime 里配置个快捷键。打开 Preferences -> Key Binding - User,添加一个快捷键:

{ "keys": ["alt+d"], "command": "display_diagrams"}

上面的代码配置成按住 Alt + d 来生成 PlantUML 图片,你可以修改成你自己喜欢的按键。

效果检验

最后检验一下工作安装是否正确。打开 Sublime 输入:

Bob -> Alice : Hello, how are you
Alice -> Bob : Fine, thank you, and you?

选中这些文本内容,按 Alt + d 会在当前工作目录下生成这个图片文件,同时自动弹出窗口显示图片。

注意事项

  • Sublime Text 3 安装失败问题
    安装plantUML插件时,出现 unable to load diagram plugin,check console for details. 把例子粘过来 alt+D 时显示nothing to process. 刚刚找到了解决办法:原因是下载的插件里无法加载文件:Diagram.sublime-settings,其中第三行将编码方式”charset”: null改为”charset”: “UTF-8″,关掉sublime Text 3重启即可。感谢 @niminote 提供的解决方案。
  • 按 Alt + d 前需要让要生成图片的 PlantUML 脚本处于选中状态,否则会提示 No diagrams overlap selections 。留言里有不止一位同学犯了这个错误。

PlantULM 快速入门

时序图

@startuml

title 时序图

== 鉴权阶段 ==

Alice -> Bob: 请求
Bob -> Alice: 应答 == 数据上传 == Alice -> Bob: 上传数据
note left: 这是显示在左边的备注 Bob --> Canny: 转交数据
... 不超过 5 秒钟 ...
Canny --> Bob: 状态返回
note right: 这是显示在右边的备注 Bob -> Alice: 状态返回 == 状态显示 == Alice -> Alice: 给自己发消息 @enduml

sequence diagram

TIPS:

  • 使用 title 来指定标题
  • ‘->’ 和 ‘–>’ 来指示线条的形式
  • 在每个时序后面加冒号 : 来添加注释
  • 使用 note 来显示备注,备注可以指定显示在左边或右边
  • 使用 == xxx == 来分隔时序图
  • 使用 ... 来表示延迟省略号
  • 节点可以给自己发送消息,方法是发送方和接收方使用同一个主体即可

用例图

@startuml

left to right direction
actor 消费者
actor 销售员
rectangle 买单 {
消费者 -- (买单)
(买单) .> (付款) : include
(帮助) .> (买单) : extends
(买单) -- 销售员
} @enduml

use case

TIPS:

  • 用例图使用 actor 来定义参与者

    • 用例图是指由参与者(Actor)、用例(Use Case)以及它们之间的关系构成的用于描述系统功能的静态视图
    • 百度百科上有简易的入门资料,其中用例之间的关系 (include, extends) 是关键
  • 使用括号 (xxx) 来表示用例,用例用椭圆形表达
  • 使用不同的线条表达不同的关系。包括参与者与用例的关系,用例与用例的关系

流程图

@startuml

title 流程图

(*) --> "步骤1处理"
--> "步骤2处理"
if "条件1判断" then
->[true] "条件1成立时执行的动作"
if "分支条件2判断" then
->[no] "条件2不成立时执行的动作"
-> === 中间流程汇总点1 ===
else
-->[yes] === 中间流程汇总点1 ===
endif
if "分支条件3判断" then
-->[yes] "分支条件3成立时执行的动作"
--> "Page.onRender ()" as render
--> === REDIRECT_CHECK ===
else
-->[no] "分支条件3不成立时的动作"
--> render
endif
else
-->[false] === REDIRECT_CHECK ===
endif if "条件4判断" then
->[yes] "条件4成立时执行的动作"
--> "流程最后结点"
else
endif
--> "流程最后结点"
-->(*) @enduml

activity diagram

上面的流程图写的时候还是挺直观的,但画出来的图片渲染效果不好,对逻辑的显示不清楚。由于这个原因 PlantUML 实现了另外版本的流程图脚本。

下面是 PlantUML 支持的新版本的流程图脚本,从使用角度来讲,更直观,画出来的图片也更漂亮,推荐使用。

@startuml

start
:"步骤1处理";
:"步骤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

active diagram 2

TIPS:

  • 使用 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

component diagram

TIPS:

  • 使用方括号 [xxx] 来表示组件
  • 可以把几个组件合并成一个包,可以使用的关键字为 package, node, folder, frame, cloud, database。不同的关键字图形不一样。
  • 可以在包内部用不同的箭头表达同一个包的组件之间的关系
  • 可以在包内部直接表达到另外一个包内部的组件的交互关系
  • 可以在流程图外部直接表达包之间或包的组件之间的交互关系

状态图

我们一般使用状态图来画状态机。

@startuml

scale 640 width

[*] --> NotShooting

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

State Diagram

TIPS:

  • 使用 [*] 来表示状态的起点
  • 使用 state 来定义子状态图
  • 状态图可以嵌套
  • 使用 scale 命令来指定生成的图片的尺寸

总结

不需要去记这些标记,在需要的时候去使用它,通过不断地使用来熟悉不同的图的语法。可以下载 PlanUML 官方文档 作为参考,遇到问题的时候翻一翻,这样很快就可以学会使用 PlantUML 高效地画图。
文/kamidox(简书作者)

原文链接:http://www.jianshu.com/p/e92a52770832

使用sublime+platUML快速画流程图的更多相关文章

  1. sublime text 快速补全

    sublime text 快速补全 关于补全,其实有很多,记录一些常用的在这里,忘记了可以查找 nav>ul>li    <nav>          <ul>  ...

  2. canvas画流程图

    用canvas画流程图: 需求:最后一个圆圈无直线 遇到问题:需要画多个圆圈时,画布超出显示屏加滚动条,解决方法是<canvas>外层<div>的width=100%,且ove ...

  3.  sublime text3快速生成html头部信息(转)

    sublime text3快速生成html头部信息  https://blog.csdn.net/sunshinegirl_7/article/details/49802579 经常见别人创建新的ht ...

  4. Slickflow.NET 开源工作流引擎高级开发(四) -- 硬核编码:代码式快速构建流程图

    前言:通过设计器交互来创建流程图是比较常见的方式,这种方式是比较方便业务人员对流程的操作.然而,在需要流程模板,或者技术开发阶段以及一些自动化流程的处理过程中,使用代码快速创建流程图也是一种非常有必要 ...

  5. 使用mermain用Markdown的语法画流程图和UML图

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:使用mermain用Markdown的语法画流程图和UML图.

  6. activiti在线画流程图

    springboot2.2 activiti6.0 activiti-modeler 5.22.0 注明:版本不一样会导致报错 上一篇:springboot整合activiti 效果图 代码分享:ht ...

  7. flowable+tomcat部署flowable项目,在线画流程图

    参考: flowable+tomcat部署flowable项目,在线画流程图

  8. 使用 Markdown Flow 画流程图

    使用 Markdown Flow 画流程图 好处是可以方便的使用 Git 管理版本 st=>start: 开始 e=>end: 结束 c1=>condition: A c2=> ...

  9. html5 canvas画流程图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. python-并发编程之进程

    进程 python中创建进程模块为:multiprocessing 开销非常大 是计算机中资源分配的最小单位(内存隔离) 能利用多个CPU 由操作系统控制 同时操作内存之外的数据会产生数据的不安全 进 ...

  2. python面试题之下面这些是什么意思:@classmethod, @staticmethod, @property?

    回答背景知识 这些都是装饰器(decorator).装饰器是一种特殊的函数,要么接受函数作为输入参数,并返回一个函数,要么接受一个类作为输入参数,并返回一个类. @标记是语法糖(syntactic s ...

  3. __attribute__((regparm(3))) from GNU C

    在 x86 上,regparm 属性会传递一个数值给编译器,这个数值会告诉编译器要用多少个寄存器来传递函数参数(EAX, EDX 或 ECX,最多 3 个寄存器),通常情况下函数是用堆栈来传递参数的. ...

  4. Go 语言变量、常量

    变量 第一种,指定变量类型,声明后若不赋值,使用默认值. var v_name v_type v_name = value 第二种,根据值自行判定变量类型. var v_name = value 第三 ...

  5. 学习笔记-es5新增的一些数组的API(不全)-字符串-字符串API(不全)

    ### es5新增的数组的api + indexOf() 搜索数组中的元素,并返回它所在的位置. arr.indexOf(str,index) 参数: str为要查找的字符串 index为开始查找的下 ...

  6. 嵌入式平台 RAM与ROM区分

    ROM(Read Only Memory)和RAM(Random Access Memory)指的都是半导体存储器,ROM在系统停止供电的时候仍然可以保持数据,而RAM通常是在掉电之后就丢失数据,典型 ...

  7. html浮动小问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 38th 字符串与 列表间的转换

    字符串与 列表间的转换 如何利用字符串 'Life is short ,I use python'输出 :'python use I, short is Life' s = 'Life is shor ...

  9. Vue学习笔记【2】——Vue指令之 - v-cloak、v-text和v-html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 赋能时空云计算,阿里云数据库时空引擎Ganos上线

    随着移动互联网.位置感知技术.对地观测技术的快速发展,时空信息已从传统GIS行业渗透到大众应用及各行各业.从静态POI(兴趣点)到APP位置信息,从导航电子地图到车辆行驶轨迹,从卫星影像到三维城市建模 ...