使用 Sublime + PlantUML 高效地画图
程序员难免要经常画流程图,状态图,时序图等。以前经常用 visio 画,经常为矩形画多大,摆放在哪等问题费脑筋。有时候修改文字后,为了较好的显示效果不得不再去修改图形。今天介绍的工具是如何使用 Sublime + PlantUML 的插件画流程图,状态图,时序图等。这是一种程序员看了就会爱上的画图方式:自然,高效。
什么是 PlantUML
PlantUML 是一个画图脚本语言,用它可以快速地画出:
- 时序图
- 流程图
- 用例图
- 状态图
- 组件图
简单地讲,我们使用 visio 画图时需要一个一个图去画,但使用 PlantUML 只需要用文字表达出图的内容,然后就可以直接生成图片。看一个最简单的例子:
Bob -> Alice : Hello, how are you
Alice -> Bob : Fine, thank you, and you?
软件安装
这些软件全部是开源或共享软件,不存在版权问题,可以放心使用。
- 安装 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
TIPS:
- 使用
title
来指定标题 - '->' 和 '-->' 来指示线条的形式
- 在每个时序后面加冒号
:
来添加注释 - 使用
note
来显示备注,备注可以指定显示在左边或右边 - 使用
== xxx ==
来分隔时序图 - 使用
...
来表示延迟省略号 - 节点可以给自己发送消息,方法是发送方和接收方使用同一个主体即可
用例图
@startuml
left to right direction
actor 消费者
actor 销售员
rectangle 买单 {
消费者 -- (买单)
(买单) .> (付款) : include
(帮助) .> (买单) : extends
(买单) -- 销售员
}
@enduml
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
上面的流程图写的时候还是挺直观的,但画出来的图片渲染效果不好,对逻辑的显示不清楚。由于这个原因 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
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
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
TIPS:
- 使用
[*]
来表示状态的起点 - 使用 state 来定义子状态图
- 状态图可以嵌套
- 使用
scale
命令来指定生成的图片的尺寸
总结
不需要去记这些标记,在需要的时候去使用它,通过不断地使用来熟悉不同的图的语法。可以下载 PlanUML 官方文档 作为参考,遇到问题的时候翻一翻,这样很快就可以学会使用 PlantUML 高效地画图。
转自:http://www.jianshu.com/p/e92a52770832
相关推荐
VISIO机柜设备,可以灵活调整组合及位置
4. **UML图**:对于软件开发者来说,Visio还可以创建UML(统一建模语言)图,如类图、用例图、序列图等,辅助理解软件设计和开发过程。 5. **绘图工具**:Visio内置了多种绘图工具,如直线、曲线、箭头等,使得用户...
在IT行业中,利用Office Visio工具进行画图是一种常见的需求,尤其在系统设计、网络架构描绘和流程图制作等方面。本文将深入探讨如何在ASP.NET C#环境下开发一个基于C/S(客户端/服务器)架构的程序,利用Office ...
在“visio画图示范视频”中,我们可以期待学习如何使用Visio 2003来绘制UML(统一建模语言)图表。UML是一种标准化的建模语言,用于软件工程和其他领域,它提供了图形化的方式来描述、构建和文档化系统的结构和行为...
使用具有专业外观的 Office Visio 图表,可以促进对系统和流程的了解,深入了解复杂信息并利用这些知识做出更好的业务决策。 Microsoft Office Visio帮助您创建具有专业外观的图表,以便理解、记录和分析信息、数据...
例如,对于流程图,你可以选择标准的开始/结束框、决策节点、流程步骤等元素,通过简单的拖放操作将它们组合在一起。软件还提供了自动对齐和分布功能,确保你的图表整洁有序。此外,它支持自定义形状,允许用户根据...
本教程还将介绍 Visio 2007 的安装和卸载过程,用户可以根据自己的需要选择合适的安装方式。同时,本教程还将介绍 Visio 2007 的界面和基本操作,帮助用户快速上手 Visio 2007。 通过本教程,用户将能够掌握 Visio ...
总的来说,Java结合SpringBoot和com4j库为Visio的二次开发提供了一种高效、灵活的方式。这种技术在业务流程自动化、系统集成、数据可视化等领域有广泛的应用。开发者可以根据需求,利用Visio丰富的图形元素库和布局...
在“VMware vSphere画图图标 Visio.rar”这个压缩包中,包含的是一系列专门设计用于在Visio中绘制vSphere环境的图形素材。 这些图标涵盖了vSphere的主要组件和功能,例如: 1. **ESXi主机**:这是vSphere的基础,...
除了绘图功能,Visio还提供了协作和分享的特性,用户可以通过云服务(如OneDrive或SharePoint)与其他团队成员共享和编辑图表,促进团队合作。 总的来说,Visio专业绘图软件以其强大的绘图能力和与Word的良好集成,...
Visio 2003 SP3(Service Pack 3)是该版本的重要更新,它修复了多个已知问题,提升了软件的稳定性和性能,确保用户在使用过程中有更流畅的体验。 总的来说,Visio以其强大的绘图功能和友好的用户界面,成为了学术...
通过使用这个模板,工程师和学生可以更高效地绘制数字电路流程图,无需从零开始创建每个形状,从而节省大量时间和精力,专注于电路设计本身。同时,标准化的图形也有助于提高沟通效率,确保团队成员对设计的理解一致...
以下将详细介绍如何在C#中控制Visio画图以及相关的知识点。 首先,你需要安装Visual Studio 2008和Visio 2007。这两个工具是进行C#与Visio交互的基础。在VS2008中创建一个新的Windows Forms应用程序项目,命名为...
此外,Visio还支持导入和导出功能,可以与其他人共享工作成果,或者在其他Microsoft Office应用程序中引用。 对于初学者,Visio的图标和图库是一个学习和模仿的好资源。通过观察和使用这些素材,可以了解到不同类型...
同时,Visio还允许用户自定义形状,可以对图标进行填充颜色、添加文字说明等个性化设置,以满足不同项目的需求。 在安防系统设计中,通常会涉及到以下几个方面: 1. 视频监控:包括固定摄像头、PTZ(Pan-Tilt-Zoom...
Visio是一款由Microsoft开发的专业绘图软件,特别适用于创建流程图、组织结构图、网络图、电路图等各类图表。...通过这些图标,你可以更高效、更准确地表达想法,无论是商业计划、项目管理还是技术文档,都能轻松应对。
microsoft visio 画图示例
标签中的“visio 图标 合计”可能意味着图库不仅包含单独的图形,还可能有组合图标或者预设的模板。组合图标通常是一些相关的形状按照特定布局组合在一起,形成一个完整的系统或流程表示,如数据中心布局或电气系统...
在“visio画图工具可兼容w7”的标题中,我们可以理解为Visio这款应用软件在Windows 7操作系统上运行良好,用户可以放心在Windows 7环境下使用它来满足自己的绘图需求。 Visio的兼容性是其一大优点,对于Windows 7...