使用sublime+platUML快速画流程图

程序员难免要经常画流程图，状态图，时序图等。以前经常用 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

原文地址：https://www.cnblogs.com/zytrue/p/8496641.html

时间： 2024-07-30 21:09:05

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

流程图的制作技巧分享，手把手教你如何画流程图？

什么是流程图?流程图是思维导图的一种表现形式,流程图是流经一个系统的信息流.观点流或部件流的图形代表.在企业中,流程图主要用来说明某一过程.这种过程既可以是生产线上的工艺流程,也可以是完成一项任务必需的管理过程等. 一．流程图符号代表什么含义: 二．怎么做流程图 绘制流程图的方法很简单,不过我们需要借助工具来进行绘制,选对工具也是提高工作效率的一个技能.迅捷画图制作软件就是一个不错的选择,软件操作简单.功能齐全,还配置了多种适量工具,可以帮助我们快速绘制出需要的流程图样式. 1.打开画图软件,点

java Graphics2D根据流程xml文件画流程图（完整代码）

1.先来一张效果图 2.java代码 package com.geoway.plan.action; import java.awt.BasicStroke; import java.awt.Color; import java.awt.Graphics2D; import java.awt.Image; import java.awt.RenderingHints; import java.awt.geom.GeneralPath; import java.awt.image.Buffered

metapost画流程图的几种选择metaflow or box?

最近几天老板要出国,很多事儿着急弄完,所以比较忙,没睡一个好觉,反正一句话:够蛋疼的了!难得有点时间,说说最近用metapost画流程图的一点感受吧. 首先说明一点,很多人都不建议用metapost画流程图,当然这么说肯定是有道理的,比如被广泛推荐的Context,或是其他专门用来画流程图的工具,甚至有人问latex提供了画流程图的宏包为什么还要单独用别的工具画流程图,这里我坚持用metapost的原因很简单,因为我最近在学这个东东,用它画出来的图感觉非常漂亮,所以我确定画个流程图肯定是没有问题

图解程序员画流程图、数据结构图及各种复杂图形的Graphviz工具入门

我们画常规图形时一般用word上面自带的插件或visio画图.但是我在画linux内核文件系统结构图.内存分配以及学习数据结构树.图时,发现使用Graphviz非常的方便快捷.鉴于网上关于它的安装.使用不是特别具体,本博文将一步步告诉大家如何快速地使用Graphviz画相关的流程图.树形图等. 1.安装Graphviz 在官网上面下载相关文件,地址:http://www.graphviz.org/Download..php.如果遇到官网进不去,可以等待一旦时间或者在网上直接搜索下载. Linux

怎么画流程图（转）

业务流程图的表达的6个关键问题 业务流程图的“烹饪三部曲” 在绘制业务流程图前,思考如何精美,如何交互,使用什么工具,都不应该是重点. 真正重点的是将业务流程图的关键要素给搜集一番.请试图回答清楚以下几个问题,否则不要开始绘制流程图: 整个流程的起始点是什么?整个流程的终结点是什么? 在整个流程中,涉及到的角色都是谁? 在整个流程中,都需要做什么事情?(可是是一个会议,可以是一个任务) 这些会议和任务是可选还是必选的? 分别产出什么文档? 这有点像一个头脑风暴,能够帮助你将所需用到的原材料获取到

免费的画流程图的工具dia

下载地址:https://u18103887.ctfile.com/fs/18103887-336904173 dia可以取代的对象:微软Visio 当你需要为自己的网络制作一份可视化图表时,Dia提供了除Visio之外的一种免费选择.它支持XML.EPS.SVG. XFIG.WMF和PNG等多种文件格式.支持的操作系统:Windows和Linux. Dia [1]  是基于GTK的图形绘制程序,适用于Linux, Unix和Window DIA软件启动界面,以 GPL 许可发布.通俗的说,一个

Bresenham快速画直线算法

现在的计算机的图像的都是用像素表示的,无论是点.直线.圆或其他图形最终都会以点的形式显示.人们看到屏幕的直线只不过是模拟出来的,人眼不能分辨出来而已.那么计算机是如何画直线的呢,其实有比较多的算法,这里讲的是Bresenham的算法,是光栅化的画直线算法.直线光栅化是指用像素点来模拟直线,比如下图用蓝色的像素点来模拟红色的直线 给定两个点起点P1(x1, y1), P2(x2, y2),如何画它们直连的直线呢,即是如何得到上图所示的蓝色的点.假设直线的斜率0<k>0,直线在第一象限,Brese

Windows下使用Sublime text3快速编辑Linux文件，写Shell

所需要配合的工具是WinSCP 添加完毕之后直接在目录下双击要编辑的shell脚本文件,即可弹出Sublime Text的编辑器 然后咱通过Putty看看Linux虚拟机上的文件有没有发生变化

XMind 6 如何画流程图

在使用思维导图软件制作流程图的时候,怎样的流程图才能算作好的流程图呢?好的流程图能够清晰的表达出思维导图的内容,使得思维导图的类容清晰化.简单化.易懂化.在xmind6思维导图软件中中我们可以通过创建自由主体和添加关系线的形式建立流程图.今天和大家分享关于如何使用XMind 6制作流程图. 步骤一 打开XMind 6思维导图,建立新的导图,并且确立中心主题. 步骤二 双击导图界面空白区域,建立新的自由主题,并且依次排列好位置. 步骤三 在创建好的主题内输入主题内容,在属性中修改主题样式. 步骤四