背景

在平常的学习工作生活中，我们都离不开画流程图、时序图、大耳朵图图等等(之前实习的时候领导让我在做一个需求之前画流程图给他们看，恰巧上课学的画图的一些规则我全都忘了，然后瞎选图形就直接往上面塞字😭，虽然是完成任务了，但后来还是觉得应该把这些规则记起来)。

通过流程图和时序图，可以让我们更好的梳理知识点、步骤，也能更好的向别人展示自己的思考逻辑，同样还能…

行了，不吹了，反正就是你毕业论文、毕业设计必定需要用到的。

虽然画图的工具有一堆，什么draw.io、processon、xmind…但是用的时候有很多不方便的地方，例如

• 修改维护麻烦

不久前在画流程图的时候，由于流程比较复杂，很多分支都是画着画着才想起来卧槽这里还要加一个判断，然后再画一下又想起来那里也特么还要再加个条件，如果说流程简单那还好，复杂一点的话，需要删掉很多箭头，还要调整一大堆的顺序

• 调整麻烦

还有一个问题就是，图形拖出来的时候大小都是固定的

像这种情况得你一个一个手动的把它拉大，你拉大还没问题，关键是特么有其他线连着这个框的时候，你一放大，其他线和框都会变形或者被遮挡。

总之，经历过之后觉得效率真的有点低。后面在看别人博客的时候无意看到一个大佬叫另外一个大佬要学会使用plantUML，当时不知道是啥，于是

好家伙，这不刚好是我需要的东东吗！

ok，下面进入正题～

ps：别被吓到了，并不是程序员专用的，其他职业照常用，只不过前期门槛稍微有丢丢高，但是用多了记住了关键字熟练后，芜湖起飞🛫️

plantUML

首先，直接说下plantUML和其他绘图软件最大的不同就是其他软件需要一个一个拖图形，而它只需要像写小说一样写出来就好了🐂🍺

流程图

条件判断

@startuml
start

if (关注Johopig？) then(yes)
    :那就好那就好～;
else (no)
    :快关注啊！;
endif

stop
@enduml

时序图

@startuml
title 时序图

box 第一部分 #BFEFFF
participant Alice
participant Bob
end box

box 第二部分 #FFBBBB
participant Canny
end box

== 鉴权阶段 ==

Alice -> Bob: 请求
activate Alice
activate Bob
Bob -> Alice: 应答

== 数据上传 ==

Alice -> Bob: 上传数据
activate Alice #DeepSkyBlue
Bob --> Alice: 返回
deactivate Alice
deactivate Bob

note left: 这是显示在左边的备注

Bob --> Canny: 转交数据
deactivate Alice
... 不超过 5 秒钟 ...
Canny --> Bob: 状态返回
note right: 这是显示在右边的备注

Bob -> Alice: 状态返回

== 状态显示 ==

Alice -> Alice: 给自己发消息

@enduml

外观

如果觉得类似上面两张的图形外观不好看，可以引入外部的样式。

• 手绘风格

• c4模型的风格（下面会讲到）

特别是c4模型的样式感觉更加现代一点。。。

引入外部样式的方法在下面C4模型会讲到

文档链接

其实这个plantUML只要你记住它的关键字的话就很方便了，所以才说前期的学习成本会比较高，但是你记熟悉之后，效率会提升很多

还有更多的关键字什么的在下面这个链接查就好了～

➡️https://plantuml.com/zh

C4模型与C4PlantUML

概念

C4模型一种架构设计的方法论，忽略不在同一个抽象层级的细节，从而可以更好的表达和可视化。

可以类比地图，地图分4个级别，国家，省，市，街道；

而C4模型也分4个层级：

• Context系统上下文
• Container容器
• Component组件
• Code代码

加上3种补充视图，即

• 系统全景图
• 动态图
• 部署图

即可完整的描述一个项目的软件架构

• 为什么我们需要架构图呢？

这是因为整个产品不只是开发人员使用的，从开发，测试，架构师，项目经理，产品经理，UI交互设计师，用户，这么多的人员，能够让团队的每个人脑子里的架构可视化出来，形成统一的理解

• 为什么需要C4模型呢？

同样，如果架构图没有一个标准，五花八门的，那这样就违反了上面概念中说到的抽象化了，所以必须定下一个统一的通用的标准

以下使用到的语法都是基于plantUML！！

布局

布局说明	语法
从上到下	LAYOUT_TOP_DOWN
从左到右	LAYOUT_LEFT_RIGHT
自由布局	LAYOUT_WITH_LEGEND
素描布局	LAYOUT_AS_SKETCH

Context上下文

元素名称	函数
角色	Person
外部角色	Person_Ext
关注的软件系统	System
外部软件系统	System_Ext
系统数据库	SystemDb
系统外部数据库	SystemDb_Ext
系统虚框	System_Boundry
企业虚框	Enterprise_Boundry

Container容器

元素名称	函数
容器	Container
容器数据库	ContainerDb
容器虚框	Container_Boundry

Component组件

元素名称	函数
组件	Component
组件数据库	ComponentDb

Code代码

即通用的，元素如下：

元素名称	函数
虚框	Boundry
从上到下关系	Rel
反向关系	Rel_Back
从上到下关系	Rel_U
从下到上关系	Rel_D
从左到右关系	Rel_L
从右到左关系	Rel_R

示例

@startuml "enterprise"
!include ./c4-puml/C4puml/C4_Component.puml
LAYOUT_TOP_DOWN
LAYOUT_WITH_LEGEND()
title 网银系统容器图Person(customer, 客户, "银行客户有自己的私人银行账号")
System_Boundary(c1, "网银") {
    Container(web_app, "Web 应用", "Go, Java, Spring MVC", "传递静态内容和网银SPA")
    Container(spa, "单页应用", "JavaScript, Angular", "通过浏览器对用户提供所有的网银功能")
    Container(mobile_app, "手机应用", "ios, android", "通过手机设备提供有限的网银功能")
    ContainerDb(database, "数据库", "SQL 数据库", "存储用户的注册信息，随机认证密码，访问日志等")
    Container(backend_api, "API应用", "Java, Docker容器", "通过API提供网银功能")
}
System_Ext(email_system, "邮件系统", "网络软件交换系统")
System_Ext(banking_system, "Mainframe银行系统", "存储所有的核心客户，账号，事务银行信息")
Rel(customer, web_app, "使用", "HTTPS")
Rel(customer, spa, "使用", "HTTPS")
Rel(customer, mobile_app, "使用")
Rel_Neighbor(web_app, spa, "传输")
Rel(spa, backend_api, "使用", "异步, JSON/HTTPS")
Rel(mobile_app, backend_api, "使用", "异步, JSON/HTTPS")
Rel_Back_Neighbor(database, backend_api, "读写", "同步, JDBC")
Rel_Back(customer, email_system, "发送邮件到")
Rel_Back(email_system, backend_api, "发送邮件", SMTP")
Rel_Neighbor(backend_api, banking_system, "使用", "同步/异步, XML/HTTPS")
@enduml

C4PlantUML

它是C4Model和PlantUML两个东西的合体，提供了一种简单的方法来描述和沟通软件架构。

plantuml被创造用来允许你绘制UML图，使用简单和人类容易阅读的文本描述，因为它没有阻止你绘制反常的图，它只是一个绘图工具而不是一个建模工具；他是使用最多的文本绘图工具，被wiki,论坛，文本编辑器和IDE强烈支持，可以使用不同的编程语言或者文档来生成；

C4模型对软件架构来说是一个抽象第一的绘图方式。基于抽象，可以反映出软件架构师和开发者是如何思考和构建软件的。少量的抽象和绘图类型是的C4模型很容易学习和使用；C4代表着context,containers,components，code;这一系列水平层级的图，你可以使用它来从不同的尺度向不同的听众描述你的软件架构。

引入样式

无论是plantUML还是C4PlantUML的样式，直接在头部引入就好了，上面也有示例，可以往上翻翻看看

@startuml
!include 文件的路径/文件名.puml
@enduml

引入后直接使用plantUML的语法自动就会显示相应的图案

引入的样式文件地址由于有些需要翻墙，有些不知道为什么github仓库不能clone下来，所以我直接下载了放到自己的服务器上了，需要的朋友可以自行下载～

➡️https://lujiahaoo.cn/file/uml/

写在最后

其实上面的很多语法关键字我都记得不是很熟，都是在用到的时候才会去看文档和百度搜等等，不过相信经常使用的话就会越来越熟了～