使用sublime+platuml高效画图

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

什么是 PlantUML

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

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

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

Bob -> Alice : Hello, how are you
Alice -> Bob : Fine, thank you, and you?
1470277840-4366-184896-9428a12b03ccd981

软件安装

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

  • 安装 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
1470277841-4171-184896-56a88c6b5d0443dd

TIPS：

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

用例图

@startuml

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

@enduml
1470277842-8712-184896-0c072df74861b98b

TIPS：

  • 用例图
    • 用例图是指由参与者（Actor）、用例（Use Case）以及它们之间的关系构成的用于描述系统功能的静态视图
    • 百度百科上有简易的入门资料，其中用例之间的关系 (include, extends) 是关键
  • 使用 actor 来定义参与者
  • 使用括号 (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
1470277840-1556-184896-3fa814911f607681

上面的流程图写的时候还是挺直观的，但画出来的图片渲染效果不好，对逻辑的显示不清楚。由于这个原因 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
1470277841-7184-184896-1d774153c5abc0fc

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
1470277840-3064-184896-06cc62fef7c22da7

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
1470277841-1608-184896-280d1d3ec20ea22e

TIPS:

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

总结

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

你可能还喜欢下面这些文章

gcc/g++编译参数详解

编译步骤gcc 与 g++ 分别是 gnu 的 c & c++ 编译器。gcc/g++ 在执行编译工作的时候，总共需要4步：预处理,生成 .i 的文件将预处理后的文件转换成汇编语言, 生成文件 .s 有汇编变为目标代码(机器代码)生成 .o 的文件连接目标代码, 生成可执行程序 参数详解-x language filename参数含义为指定文件所使用的语言。根据约定，C语言的后缀名称为".c"，而 C++ 的后缀名为".cpp"或".cc"，但如果你的源代码后缀不约定的那几种，那么需要使用-x参数来指定文件所使用的语言。这个参数对他后面的文件名都起作用。 可以使用的参数吗有下面的这些：

Go入门：六、常用标准库

这是我的Go学习的第六篇笔记，也是Go入门的最后一篇笔记。在大多数语言中，了解了变量和数据类型，流程控制，函数，面向对象，再加上标准库，就可以用这门语言去写一些项目了。首先让我想想，在工作中通常会用语言频繁处理什么问题或者处理什么数据？最常见的应该是各种字符串操作，日期和时间，读写文件、socket等IO相关的操作！字符串处理 — StringsString提供了一组处理字符串的操作，常用的有：判断一个字符串是否在另一个字符串中分割字符串为[]string和组合[]string为一个字符串字符串替换...太多了，就不一一列举了，这里列出一些常用的字符串操作。字符串判断字符串分割与合并字符串转换

ftp命令大全详解

来熟悉熟悉ftp命令，对于服务器之间的文件传输太有用啦，不会怎么能行呢！先来看看基础的命令，包括了连接，列出列表，下载，上传，断开这最基础的命令，会这些，在使用ftp命令行就毫无压力啦！1. 连接ftp服务器格式：ftp a)在linux命令行下输入：b)服务器询问你用户名和密码，分别输入用户名和相应密码，待认证通过即可。2.列出文件列表以及切换目录这部分其实和linux并无区别，分别是ls，和cd列出目录列表切换当前目录3. 下载文件下载文件通常用get和mget这两条命令。a) get格式：get 将文件从远端主机中传送至本地主机中。如要获取远程服务器上/usr/your/1.htm，则

C++动态内存管理

C++中，动态内存管理是通过一对运算符来完成：new 和 delete。new操作符在内存中为对象分配空间并返回一个指向该对象的指针，delete接收一个动态对象的指针，销毁该对象，并释放与之相关的内存。手动管理内存看起来只有这两个操作，似乎很轻松，但实际上这是一件非常繁琐的事情，分配了内存但没有释放内存的场景发生的概率太大了！回想一下，你有多少次打开抽屉却没关上，拿出来的护肤品擦完脸之后却忘了放回去，吃完饭却忘了洗碗。类似这种没有收尾的事情我做的太多了。（以上这些都是在实际生活中我爱人批评我的点）我连这种明面上的事情都能忘记收尾，何况分配内存！所以为了世界和平，我放弃了手动管理内存。好在C+

布隆过滤器(bloom filter)介绍以及php和redis实现布隆过滤器实现方法

引言在介绍布隆过滤器之前我们首先引入几个场景。场景一在一个高并发的计数系统中，如果一个key没有计数，此时我们应该返回0。但是访问的key不存在，相当于每次访问缓存都不起作用了。那么如何避免频繁访问数量为0的key而导致的缓存被击穿？有人说， 将这个key的值置为0存入缓存不就行了吗？这是确实是一种解决方案。当访问一个不存在的key的时候，设置一个带有过期时间的标志，然后放入缓存。不过这样做的缺点也很明显：浪费内存和无法抵御随机key攻击。场景二在一个黑名单系统中，我们需要设置很多黑名单内容。比如一个邮件系统，我们需要设置黑名单用户，当判断垃圾邮件的时候，要怎么去做。比如爬虫系统，我们要记录下

linux shell 入门

从程序员的角度来看， Shell本身是一种用C语言编写的程序，从用户的角度来看，Shell是用户与Linux操作系统沟通的桥梁。用户既可以输入命令执行，又可以利用 Shell脚本编程，完成更加复杂的操作。在Linux GUI日益完善的今天，在系统管理等领域，Shell编程仍然起着不可忽视的作用。深入地了解和熟练地掌握Shell编程，是每一个Linux用户的必修 功课之一。Linux的Shell种类众多，常见的有：Bourne Shell（/usr/bin/sh或/bin/sh）、Bourne Again Shell（/bin/bash）、C Shell（/usr/bin/csh）、K Shel

linux awk命令分析你的文本或日志，awk命令用法

简介awk是一个强大的文本分析工具，相对于grep的查找，sed的编辑，awk在其对数据分析并生成报告时，显得尤为强大。简单来说awk就是把文件逐行的读入，以空格为默认分隔符将每行切片，切开的部分再进行各种分析处理。awk有3个不同版本: awk、nawk和gawk，未作特别说明，一般指gawk，gawk 是 AWK 的 GNU 版本。awk其名称得自于它的创始人 Alfred Aho 、Peter Weinberger 和 Brian Kernighan 姓氏的首个字母。实际上 AWK 的确拥有自己的语言： AWK 程序设计语言 ， 三位创建者已将它正式定义为“样式扫描和处理语言”。它允许您

sublime优秀插件推荐

最佳的Sublime Text 插件朋友们你们好！我尝试着收集了最佳的ST插件，这些插件真的会改善你的工作流程。我搜索了很多网站，下面是我的成果。WebInspector在 JavaScript调试方面，这是一个令人惊讶的工具，Sublime上的完整的代码检查工具。功能：使用绝对路径储存在用户设置中的项目断点，控制台，分步和断点调试器，栈追踪。这些都能够很棒的工作！而且Mozilla还提供了一个插件Fireplay让你连接到Firefox 开发工具和最简单的调试器JSHintEmmet编辑器中最流行的插件之一。Emmet，前身Zen Coding也是web开发者提高生产力最有效的方法之一。按下

使用apidoc为你的项目编写api文档

在使用apidoc之前，我一直使用wiki来写文档，后来发现这种方式更新起来比较痛苦，时间一长甚至就忘记了更新了。一直在寻找能够使用注释直接生成文档的程序。某一天同事推荐了apidoc，发现这正是我想要的工具。apidoc原理apidoc的原理是扫描你的代码文件，提取出注释部分，根据一些规则生成相应的文档。默认的模板久很美观，十分适合作为api文档的生成器。目前apidoc支持的注释基本涵盖了大部分语言的风格了，c，java，php，js，python，perl，lua, Erlang...安装需要使用npm安装，如果没有安装npm，请先去https://www.npmjs.com/下载npm

记一次进程异常退出的问题排查

机器搬家之后，之前一直稳定的PHP多进程程序子进程突然异常退出，但是退出的不是很频繁，查看进程日志并也没有发现有什么导致退出的，问题比较诡异。于是开启了一段问题排查之路。首先查看内核日志，使用dmesg，拉到最后发现有一些这样的错误，看来确实是崩溃了。 php: segfault at 7f6443ee18c8 ip 00007f6443ee18c8 sp 00007fff4d4ba818 error 15 in libc-2.17.so php: segfault at 0 ip 000000000075919d sp 00007fff0c6e0578 error 4 in php trap

赞赏

微信赞赏支付宝赞赏

《使用sublime+platuml高效画图》有1条评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注