快速进入文本绘图世界

叫叫技术团队
2,217 阅读6分钟

原创 李富 / 叫叫技术团队

前言

作为一名程序员书写各种方案文档已经成为了日常开发工作必不可少的一环，在文档方案中加入各种图型模型表述能够大大提高文档的丰富可读性，那你是否已经厌倦了对于各种各样图形的拖拉拽拼凑操作，就在今天，是时候加入文本绘图的世界了，摒弃繁琐的操作，运用类代码的形式快速高效的产出方案模型表达，让你的表达与方案思考合一。

文本绘图

image.png
一张图了解什么是文本绘图，如上图所示。
通俗来讲就是利用特定的语句来构建模型，那么有人可能会质疑，我就画个图难道还得去新学一门语言？非也！既然都是程序员，if...else...了解吧、switch...case...这些语句都熟悉吧，结合这些特定语句，再加上一些简单规则即可分分钟上手，画图就像markdown写 文章一样简单，那么接下来就让我们进一步了解模型与规则。

模型

我们使用文本绘图究竟可以绘出什么图，能不能像拖拉拽图形拼凑一样随意操作？答案当然是否，但随意操作真的好吗？一个毫无章法的绘图很难让人明白其中的逻辑思维表达，使用统一建模语言(UML)能够让你的绘图更加专业，不同的场景表述对应着不同的模型，这里我们会简单介绍UML中常用的几种模型。

流程图

流程图：描述系统的活动，判断系统的活动，判断点和分支等，活动图集中在一个单独过程动作流程。活动图告诉了我们活动之间的依赖关系。
image.png

时序图

时序图：时序图强调消息时间顺序的交互图、描述系统的内部交互，将交互关系表示为一个二维图。纵向是时间轴，时间沿竖线向下延伸。横向轴代表了在协作中各独立对象的类元角色。类元角色用生命线表示。当对象存在时，角色用一条虚线表示，当对象的过程处于激活状态时，生命线是一个双道线。
image.png

用例图

用例图：举个栗子、打个比方、描述系统的外部交互，描述了作为一个外部的观察者的视角对系统的印象。强调这个系统是什么而不是这个系统怎么工作。
image.png

当然除了这三种模型之外，还有类图、组件图、状态图、对象图、部署图等等，这里只是简单例举了常用的模型，想要了解更多模型可以查看UML教程，通过上方简单模型的模型表述，表达一个程序或需求时UML图是非常必要的。

PlantUML

PlantUML是一款开源的UML图绘制工具，支持通过文本来生成图形，使用起来非常高效。可以支持时序图、类图、对象图、活动图、思维导图等图形的绘制，实现文本绘图。他有诸多的优点：

  • 上手快：学习成本超低，部分场景（如语雀中可以直接添加文本绘图不需安装任何软件）甚至几乎没有学习成本；
  • 作图心智舒适：绝大多数情形不用关心布局、样式等问题，告别对齐矩形、调间距这种繁琐无意义的事情，我们只用把心里所想表达出来即可，心智自然；
  • 超强的可维护性：永远不用担心图的源文件丢了，它自己本身就是源文件，避免了文档维护的割裂；
  • 容易实现版本管理、团队协同；

既然有这么多优点，就让我们去感受感受文本绘图的魔力。

绘图通用规则

//开始与结束的标记
@startuml
代码块
@enduml

//颜色值表达、可在文本或角色等之后使用
#颜色值(英文、16进制)
<color:颜色值>

//指向(适用于流程、时序)表达箭头指示
->  实线
--> 虚线

//换行符
\n 

//组合（活动/时序）
group 标签
代码块

//语句（流程）
if (XXX) then (XXX) else （XXX） endif 
switch (XXX) case (XXX)  endswitch

//注释 左右
note right(left):注释

流程图

基础流程图

规则：

  • : 符号 紧跟步骤对象
  • start 起始、end 表示结束、stop 表示停止

image.pngimage.png

复杂流程图

步骤： 先确定流程走向(双分支、多分支)，使用不同的条件语句，流程途中可添加各种注释模块，以及分组，可以对步骤进行kill停止，也可对流程进行循环。
规则：

  • note right(left) XXXX end note 注释模块
  • group 分组名称 XXX end group 分组标识
  • kill 特定行为停止
  • repeat XXX backward XXX repeatwhile (循环内容) 循环标识

image.pngimage.png

时序图

步骤： 声明各个时序参与者，然后根据时序关系进行指向，并对指向进行标注解释，可添加各种标签备注，也可进行分组等。
规则：

  • 声明参与者 participant 关键字
  • ->、--> 直接指向即可，箭头双方表示时序对象
  • autonumber 前方声明时序编号
  • group 分组名 [次级标签] XXX end
  • note right(left):标签内容

image.pngimage.png

用例图

步骤： 声明用例对象，定义别名，进行指向，进行注释
规则：

  • (XXX) 声明用例对象
  • as 关键字定义别名、actor 关键字更改角色外形
  • X -(up/right/down/left)-> X 指向与方向
  • note right:注释

image.pngimage.png

工具介绍

当然“工欲善其事,必先利其器”，了解了文本绘图的基本规则还需要一个工具去进行呈现，常规的PlantUML工具需要java的支持解析，安装过程复杂，所以直接选择语雀文档中现成工具是较好的一种选择。

语雀文本绘图工具使用图解

image.png

小结

上方简单介绍了流程图、时序图、用例图文本构建模型的例子，并且简单介绍了相关工具的使用，我们可以发现，通过简单的语法轻易的生成需要复杂拖拉拽才能构成的模型图，且在完美的使用文字去表达逻辑，可见文本沟通的优势。

总结

经过几分钟对文本绘图有了个初步的了解，是否已经对此产生了浓厚的兴趣，不要急这只是文本绘图的冰山一角，除了上方介绍的基础绘画规则之外还有更强大的功能，如流程图的分割并行处理，泳道分离、时序图的生命线激活、空间等，甚至可以自己定制主题，从这些专业的词语中是否能够感受到你构建的模型图是多么的高大上，想要了解更多的绘画规则可以参看PlantUML官方文档，学习如何定制出自己想要的模型图。
学习文本绘图，让没有耐心的你也能成为绘图大师。

参考资料

PlantUML官方文档 plantuml.com/zh/starting
UML学习网 www.uml.org.cn/oobject/201…

avatar
文章
阅读
粉丝