这篇文章用来介绍,如何画出好看的流程图。


本文地址:https://www.cnblogs.com/hchengmx/p/16367169.html

一个PlantUML时序图的效果图

1. 选择合适的组件

在流程图中,plantUML图最上方是组件,标识该流程图有多少参与方

首先,不能用 Participant 一概所有,针对不同的情况应该选择合适的组件。

1.1 plantuml官方提供的组件

官方提供了以下几种参与者

参考:Sequence Diagram syntax and features - PlantUml1

Sample 1:

@startuml
participant Participant as Foo
actor Actor as Foo1
boundary Boundary as Foo2
control Control as Foo3
entity Entity as Foo4
database Database as Foo5
collections Collections as Foo6
queue Queue as Foo7
Foo -> Foo1 : To actor
Foo -> Foo2 : To boundary
Foo -> Foo3 : To control
Foo -> Foo4 : To entity
Foo -> Foo5 : To database
Foo -> Foo6 : To collections
Foo -> Foo7: To queue
@enduml

note: as关键字用来重命名

1.2 加载图片

要是觉得官方提供的图标不好看,或者没有想要的图标,ES、Azure、防火墙等、比如实际参与者实际是有图标的,就可引入该图标显示在参与者里 。

这样情况下,我们则可以通过引用外部图片的方式来加载图标。

plantuml提供了两种引入图片的方式,引入本地文件或引入网络图片。

1.2.1 加载本地图片

  1. 保存矢量图标到本地

建议专门创建一个文件夹来放所有的图片

e.g. {YOUR_PLANTUML_WORKSPACE}\image\XXXX.png

  1. 引用图片

Sample 2

@startuml
participant "\nMerchant\nSystem\n<img:../image/merchant.png>\n" as merchantsystem
participant "\nPayment\nSystem\n<img:../image/payement.png>\n" as paymentsystem merchantsystem -> paymentsystem: do something
@enduml

1.2.2 加载网络图片

Sample 3:

@startuml
title Office Icons Example package "Images" {
rectangle "<img:https://raw.githubusercontent.com/Roemer/plantuml-office/master/office2014/Servers/database_server.png>\r DB" as db2
rectangle "<img:https://raw.githubusercontent.com/Roemer/plantuml-office/master/office2014/Servers/application_server.png>\r App-Server" as app2
rectangle "<img:https://raw.githubusercontent.com/Roemer/plantuml-office/master/office2014/Concepts/firewall_orange.png>\r Firewall" as fw2
rectangle "<img:https://raw.githubusercontent.com/Roemer/plantuml-office/master/office2014/Clouds/cloud_disaster_red.png>\r Cloud" as cloud2
db2 <-> app2
app2 <-\-> fw2
fw2 <.left.> cloud2
}
@enduml

1.2.3 图片资源

常见的图片资源有:


2. 背景以及颜色优化

2.1 通用设置

首先包括一些通用设置,包括 背景颜色、字体大小、字体颜色、字体等

skinparam backgroundColor White
skinparam defaultFontName MarkForMCNrw
skinparam defaultFontSize 17
skinparam defaultFontColor #141413
skinparam roundCorner 10

2.2 对每个组件的样式进行设置

其他的组件,包括 Participant、Collection、Actor、Database、Box、Vertical Line、Arrow、Alt、Loop、Group box、Ref box、Notes、Divider 都可以设置 背景颜色、字体颜色、粗细等属性。

所有的属性可参考

  1. Changing colors and fonts - PlantUML6
  2. All Skin Parameters — Ashley's PlantUML Doc 0.2.01 documentation7

2.3 引入文件

2.3.1 引用本地模板文件

以上的其实都是配置项,配置项不适合放在脚本文件中,可以把所有的配置项放在一个配置文件中,我们在脚本文件中只需要引用配置文件,就可以使得配置生效。

  1. include 关键字

2.3.2 引用网页模板文件

  1. includeurl 关键字

2.3.3 模板文件资源

github上一些现成的模板文件可用于参考使用。

bschwarz/puml-themes: This repository is used to hold themes for plantuml (www.plantuml.com) diagraming tool. Users can use these themes to give there diagrams different looks.8

plantuml/themes at master · plantuml/plantuml9


3. 使用关键字

plantuml提供了很多关键字,下面介绍一些常用的关键字

3.1 条件选择关键字

包括 opt/if/ifelse/loop

3.2 组合关键字

3.2.1 box

box关键字适用于participant,比如关联方有一个大系统,但是大系统里面又有几个微服务,需要把这几个微服务都标出来。但是又要标明这三个微服务的关系,就可以使用box关键字。

box "系统" #
participant "服务A" as ServiceA
database "DB" as DB
participant "服务B" as ServiceB
end box

3.2.2 Group关键字

适用于组合会话,要是会话特别长,可分为十几个步骤,但是十几个步骤中,又大体可以分为三个部分,就可以在这三个部分里面用会话。

group XX接口 [接口名1]
cnb -> scmchannel: 授信申请校验
alt 有记录
return 上次申请记录
else 无记录
scmchannel -> cnb: 空
end
end

3.3 注释关键字

note right MCBPDdelivery:

note left MCBPDelivery

note over

note也支持markdown语法

e.g.

nore over Instance, Participation
This is a note accross serveral participants and with several lines
This is **bold**
This is //italics//
This is ""monospaced""
This is --stroked--
This is __underlined__
This is the end
end note

box boxB #aliceblue

participant "SystemB" as Axon

end box

3.4 分割关键字 ==

== Another Part ==

3.5 其他优化

3.5.1 使用副标题

有的情况,participant的描述可能会比较长,就可以用副标题的形式,突出主标题。

@startuml
participant Participant [
=Title
----
""SubTitle""
] participant Bob Participant -> Bob
@enduml

3.5.2 自动标注时序图序号

要是时序图想标注一下走到了哪个是第一步、哪个是第二步…… 就可以用以下关键字

@startuml
autonumber
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response
@enduml

3.5.3 区分同步和异步

时序图中,有活动图 -> 或者 --> 的区分。

一般约定, ->代表同步,-->代表异步

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml

3.5.4 字体颜色

所有支持的颜色可参考:[Choosing colors - PlantUML10](#Choosing colors-PlantUML)

<color: crimson>**FAILED**

4. 参考文档

1. Sequence Diagram syntax and features - PlantUml

2. 阿里云产品图标 - 阿里云产品图标| 阿里云

3. plantuml-stdlib/Azure-PlantUML: PlantUML sprites, macros, and other includes for Azure services

4. milo-minderbinder/AWS-PlantUML: PlantUML sprites, macros, and other includes for AWS components.

5. Roemer/plantuml-office: Office Icons for PlantUML

6. Changing colors and fonts - PlantUML

7. All Skin Parameters — Ashley's PlantUML Doc 0.2.01 documentation

8. bschwarz/puml-themes: This repository is used to hold themes for plantuml (www.plantuml.com) diagraming tool. Users can use these themes to give there diagrams different looks.

9. plantuml/themes at master · plantuml/plantuml

10. Choosing colors - Plantuml

11. 从60年代回到2021:美化PlantUML画图风格(附源码)_Tooooooong的博客-CSDN博客_plantuml 主题

12. PlantUML 的介绍和使用 - InfoQ 写作平台

13. qjebbs/vscode-plantuml: Rich PlantUML support for Visual Studio Code.

14. 在线运行PlantUML文件 - WebSequenceDiagrams

15. PlantUML Web Server

16. Real World PlantUML

如何优化PlantUML流程图(时序图)的更多相关文章

  1. mac版本idea使用(二)-如何安装PlantUML画时序图、类图

    在跟踪spring源码的时候,看见网上的博客好多使用了idea自带的展示类继承关系图的功能,这个地方使用了idea的diagrams-show diagram,就可以显示类的继承图,很神奇的样子,记录 ...

  2. 微信小程序登陆流程图时序图

    微信小程序登录 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系. 微信小程序登录流程时序图 说明 调用 wx.login() 获取 临时登录凭证cod ...

  3. 【hexo指南】hexo配置ER图流程图时序图插件

    偏技术的文章有时会用到各种图形,一般来说可以做好图然后截图放到文章中就好了,虽然但图片本身也很小,但存一大堆图片占用空间总觉得不是很好. mermaid mermaid官方网站 mermaid支持很多 ...

  4. 还能这么玩?用VsCode画类图、流程图、时序图、状态图...不要太爽!

    文章每周持续更新,各位的「三连」是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 软件设计中,有好几种图需要画,比如流程图.类图.组件图等,我知道大部分 ...

  5. Astah 使用 流程图、类图、时序图

    1 流程图         右键 _ create Diagrm _ add Flowchart _ New Flowchart      2 时序图         Create Diagram _ ...

  6. 软件文档写作-plantuml画用例图和时序图

    背景 当下的软件开发人员,不可避免的需要输出一些软件设计文档,作为一个软件工程专业毕业的工程师,最常用的设计工具就是UML,使用UML工具绘制一些软件相关的图,是必备技能,也是输出的技术文档中的重要组 ...

  7. PlantUML --- 使用代码快速绘制时序图、思维导图

    本篇思维导图 @startmindmap <style> mindmapDiagram { .green { BackgroundColor lightgreen } .rose { Ba ...

  8. 在Emacs中使用plantuml画UML图

    在Emacs中使用plantuml画UML图 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #83 ...

  9. 使用Astah制作UML时序图

    Astah制作UML图--详解 时序图的制作 开篇语: 本文为光荣之路原创文章,欢迎转载,但请注明出处. 做测试的难免看到开发画出各种设计图,都很羡慕,比如: 帅么,漂亮么,其实我们测试人员也可以轻松 ...

随机推荐

  1. 循序渐进搞懂 TCP 三次握手核心

    前言 本文旨在通过形象的例子和实操,把无形的.虚拟的网络转为具体的.可视化的.带领网络小白一步步的掌握 TCP 三次握手核心知识点,为后续深入学习 TCP 协议打基础. 通俗版 如下图所示,小明(客户 ...

  2. 机器学习---kmeans聚类的python实现

    """ Name: study_kmeans.py Author: KX-Lau Time: 2020/11/6 16:59 Desc: 实现kmeans聚类 " ...

  3. Ubuntu16更换flatabulous主题

    Ubuntu16更换flatabulous主题 安装unity-tweak-tool sudo apt-get install unity-tweak-tool 安装flatabulous主题 sud ...

  4. linux磁盘之回环设备

    为什么要讲回环设备,下面看下系统的采样情况 上面图有loop0,loop1等设备标记,这些是什么?看看下面fdisk -l 的结果,乱糟糟的一堆? 什么是回环设备? 上面的loop0, loop1就是 ...

  5. 【LeetCode】76. 最小覆盖子串

    76. 最小覆盖子串 知识点:字符串:滑动窗口 题目描述 给你一个字符串 s .一个字符串 t .返回 s 中涵盖 t 所有字符的最小子串.如果 s 中不存在涵盖 t 所有字符的子串,则返回空字符串 ...

  6. uTools .SRT 转 .VTT 格式转换自动化小工具

    不想用网上的转换工具,要有网,先上传,再下载,可能还要看广告.有些工具也不是很方便.打算配合uTools的自动化助手插件搞一个一键格式转换.

  7. JavaWeb学习day3-Maven&安装

    1.官网下载:https://maven.apache.org/ 2.解压下载好的压缩包 3.配置环境变量 添加如下图变量 在path变量下添加下图 4.安装完成检测 cmd输入:mvn -versi ...

  8. border 流光高光

    <template> <div>   <div class="conic"></div> <div class="c ...

  9. mmdetection 绘制PR曲线

    参考:https://github.com/xuhuasheng/mmdetection_plot_pr_curve 适用于COCO数据集 import os import mmcv import n ...

  10. 数据结构篇(3)ts 实现双向链表

    如今终于到了双向链表了,此前在Node结构中的prev指针终于派上了用场.由于双向链表多了一个前向指针,所以有些操作和单向链表比较起来反而更加的简单. class DbList extends Cir ...