用写代码的方式画图-试下PlantUML吧

代码,方式,画图,plantuml · 浏览次数 : 132

小编点评

## C4 PlantUML 图形制作 C4 PlantUML 是一个开源项目,可以用于软件模型图制作。它基于 C4 图示元素,可以形成各种图表,包括: * **容器图 (Container diagrams)** * **组件图 (Component diagrams)** * **代码图 (Code diagrams)** **C4 图示元素的类型:** * 人 * 软件系统 * 容器 *组件 *关系 **C4 图示元素的使用场景:** * 将软件系统和容器映射到图表中 * 将组件和关系映射到图表中 * 将代码和关系映射到图表中 **C4 PlantUML 的优点:** * 易于使用 * 可靠 * 可扩展 * 可以生成多种图表 **C4 PlantUML 的使用教程:** * 官方文档 * C4 PlantUML 项目主页 * C4 PlantUML 示例 **C4 PlantUML 的示例:** * 容器图 (Container diagrams) * 组件图 (Component diagrams) * 代码图 (Code diagrams)

正文

1 序言

所谓一图胜千言,大家平日在工作中编写文档时,往往都需要画各种图来表达中心思想,比如流程图、时序图、UML 图,很多人选择使用 Axure 、PrecessOn、Diagrams(darw.io)、XMind、Visio、yEd、Lucidchart、Astah 等软件来画图,这些软件功能丰富可定制化强,但是有时候会让人局限在软件提供的素材中,陷入鼠标拖动绘制的泥潭,无形中浪费了宝贵时间;另一方面出于安全合规考虑,在线绘图类型的软件也存在数据隐私风险。

在此为大家推荐一个专注于“画图”本身的工具 PlantUML,通过写代码的方式完成满足各种需求场景的画图工作,将人的精力集中到思想的表达与传递,避免无谓的图形页面样式修改调整,进而提升工作效率。

2 工具介绍

PlantUML 是一个可以快速编写 UML 图的开源组件(https://github.com/plantuml/plantuml ), 始于2009 年,支持时序图、用例图、类图、对象图、活动图等多种 UML 图,也支持 JSON 数据、YAML 数据、网络图、线框图形界面、架构图、甘特图、思维导图图示等。PlantUML 采用 GPL 协议发布,在公司内部仅作为工具,不分发不修改的前提下软件可以正常使用。

相较与其他工具的鼠标拖拽绘图方式,PlantUML 的图不是“画”出来的,而是“写”出来的。PlantUML 同时支持多种主题,本地安装即可渲染出图形,样式丰富可定制化,而且文本格式也便于保存到 git 实现历史记录 diff。最重要的是学习成本很低。

3 画图效果

下面展示使用PlantUML 绘制的各种类型图例。

3.1 UML类图

3.2 活动图

3.3 流程图

3.4 时序图

3.5 脑图

4 各种主题

PlantUML 内置了 30 多种主题,可以通过 help themes 命令查看内置主题列表。

@startuml
help themes
@enduml




在文件开头可以通过指令 !theme 来指定需要的主题名称。

@startuml 
!theme mars
title 这是图的主题
header 页眉内容
footer 页脚内容
Alice -> Bob: 认证请求
Bob -> Bob: 认证处理
Bob -> Alice: 认证接受
@enduml




5 使用准备

PlantUML 支持各类常用开发软件,比如 Eclipse、VS code、IntelliJ 系列软件等,官网上也支持实时编辑;同时也支持命令行方式生成图片。

5.1 VS code

安装插件:

搜索安装最新插件,然后编辑 .puml 文件即可实时渲染出图:

5.2 IntelliJ IDEA

安装插件:

搜索安装最新插件,然后编辑 .puml 文件即可实时渲染出图:

5.3 Eclipse

安装插件:

搜索安装最新插件,然后编辑 .puml 文件即可实时渲染出图:

5.4 命令行

从官网下载最新版 jar 包,然后执行如下命令:

# 解析 111.puml 文件并生成 png 图片
java -jar plantuml.jar 111.puml




5.5 在线编辑

本地渲染即可满足使用要求,但是官网也支持在线模式。

6 语法简介

官网上(https://plantuml.com/zh/) 提供了丰富的 demo 可供参考,基本满足了日常的画图需求;顶部点击导航栏可以查看各种图的帮助文档,左侧导航栏提供了组件的特色设置项。

6.1 时序图

可以使用关键字定义 UML 元素,如:actor(角色)、boundary(边界)、control(控制)、entity(实体)、database(数据库)、collections(集合)、queue(队列),使用 as关键字重命名参与者。

支持使用关键字 autonumber 用于自动对消息编号,title 关键字用于为页面添加标题。页面可以使用 header 和 footer 显示页眉和页脚。

使用这些关键词来组合消息:alt/else、opt、loop、par、break、critical、group, 后面紧跟着消息内容,关键词 end 用来结束分组。分组是可以嵌套使用的。

6.2 用例图

package 定义一个包,as 定义对应别名,usecase 定义用例,箭头定义关系。

6.3 类图

使用 class 定义类,默认会自动将属性和方法分割开,也可以使用分隔符 --..==__. 分隔符中也可以添加文字。

6.4 部署图

node 标识节点,file 标识文件,cloud 定义云,效果如下:

7 标准库

官方标准库提供了一系列的图例扩展功能,遵循 “C标准库约定”,使用命令:stdlib 即可查看当前版本组件支持的标准库。

基于这些标准库,可以创建丰富类型的图表,包括但不限于架构图、AWS 部署图、Azure 库等等。

8 C4模型与C4PlantUML

8.1 C4 模型

为什么我们需要架构图呢?这是因为整个产品不只是开发人员使用的,从开发,测试,架构师,项目经理,产品经理,UI 交互设计师,用户,这么多的人员,需要一种方式能够让团队的每个人脑子里的架构可视化出来,形成统一的理解,这就是架构图。

C4 模型一种架构设计的方法论,忽略不在同一个抽象层级的细节,从而可以更好的表达和可视化。是软件系统建模的图形表示技巧。C4 模型会用到一些现有的建模技巧,例如统一建模语言(UML)及 ER 模型(ERD),会将系统结构化分解,分解为容器(container)和组件(component)。

可以类比地图,地图分 4 个级别,国家,省,市,街道;C4 模型也分 4 个层级,依其阶层关系分类:

1.统上下文图(Context diagrams),第一层的图,说明系统、和其使用者以及其他系统的关系。

2.容器图(Container diagrams),第二层的图,将系统分解为彼此相关的容器(container)。容器可以是应用程序或是资料存储。

3.组件图(Component diagrams),第三层的图,将容器分别为彼此相关的组件,也说明组件和其他组件(或是其他系统)的关系。

4.代码图(Code diagrams),第四层的图,提供架构元素的设计细节,可以对应到程式码。在此层级的 C4 模型会用到目前已有的标示方式,例如统一建模语言、ER 模型或是集成开发环境产生的示意图。

C4 模型的第一层到第三层,用到五种基础的图示元素:人、软件系统、容器、组件和关系。此技术没有规定元素的布局、形状、颜色或是风格。C4 模型建议以嵌套框为基础的简单图表,方便互动式的协作绘图。C4 模型也鼓励良好的建模实务,例如在每一个图都加上标题以及图例,以及清楚的标示,以方便目标读者的理解。

8.2 C4PlantUML

基于开源项目 C4-PlantUML 可以实现软件模型图制作。同时官方标准库里也包括了这个组件。

@startuml "enterprise"
'!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
'!include C:/repo/C4-PlantUML/C4_Container.puml
!include <C4/C4_Container>

title 网银系统容器图

Person(customer, 客户, "银行客户有自己的私人银行账号")
 
System_Boundary(c1, "网银") {
    Container(web_app, "Web 应用", "Java, Spring MVC", "传递静态内容和网银SPA")
    Container(spa, "单页应用", "JavaScript, Angular", "通过浏览器对用户提供所有的网银功能")
    Container(mobile_app, "手机应用", "C#, Xamarin", "通过手机设备提供有限的网银功能")
    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")




效果如下:

9 小结

PlantUML 使用格式良好且可读的代码来呈现图表,相比于其他工具,PlantUML 将目光聚焦到画图本身,用户只需要根据规范去写逻辑代码就可以生成比较好看且整洁的图表,简单高效。大家不必刻意去记它的语法,在使用的过程中去查阅文档参考,很快就可以上手。

最后,感谢你的阅读,如果这篇文章让你有所收获,也欢迎你将它分享给更多的人。

作者:京东物流 高世雄

内容来源:京东云开发者社区

与用写代码的方式画图-试下PlantUML吧相似的内容:

用写代码的方式画图-试下PlantUML吧

为大家推荐一个专注于“画图”本身的工具 PlantUML,通过写代码的方式完成满足各种需求场景的画图工作,将人的精力集中到思想的表达与传递,避免无谓的图形页面样式修改调整,进而提升工作效率

next.js app目录 i18n国际化简单实现

最近在用next写一个多语言的项目,找了好久没找到简单实现的教程,实践起来感觉都比较复杂,最后终于是在官方文档找到了,结合网上找到的代码demo,终于实现了,在这里简单总结一下。 此教程适用于比较简单的项目实现,如果你是刚入门next,并且不想用太复杂的方式去实现一个多语言项目,那么这个教程就挺适合

python自产调试工具pdb的使用

python自产调试工具pdb的使用 介绍 调试打印在写代码的时候不可避免 项目越大,调试可能花的时间会越多 print调试可能是最早用的,一段时间内你都会习惯这种方式 一旦成了老鸟,你应该会去用IDE的debugger,功能非常强大,效率就比print上了一个台阶 当然python像其他语言一样,

Airtest图像识别测试工具原理解读&最佳实践

Airtest是一个跨平台的、基于图像识别的UI自动化测试框架,适用于游戏和App,支持平台有Windows、Android和iOS。Airtest框架基于一种图形脚本语言Sikuli,引用该框架后,不再需要一行行的写代码,通过截取按钮或输入框的图片,用图片组成测试场景,这种方式学习成本低,简单易上手。

Python 搭建 FastAPI 项目

一般网上的文章都是以脚本的方式写Demor的,没找到自己想要的那种项目结构型的示例(类似Java SpringBoot 创建 Model,通过 pom 进行关联配置的那种) 看了一些源码,再结合自己的想法,建了一个简单的示例, 用 Python 做接口服务的项目搭建,仅供参考 代码结构说明 VipQ

[转帖]SystemStap、BCC、bpftrace

https://plantegg.github.io/2019/09/16/SystemStap/ Linux 4.4+ 支持 eBPF。基于 eBPF 可以将任何内核函数调用转换成可带任何 数据的用户空间事件。bcc 作为一个更上层的工具使这个过程更加方便。内核探测 代码用 C 写,数据处理代码用

判断整数和复数的奇技淫巧

记得大一学Python的时候,有一个题目是判断一个数是否是复数。当时觉得比较复杂不好写,就琢磨了一个偷懒的好办法,用异常处理的手段便可以大大程度帮助你简短代码(偷懒)。以下是判断整数和复数的两段小代码: 相信看到这里,你也有所顿悟,能拓展出更多有意思的方法~

Linux的访问权限详解

题目 解读访问权限 rw-r--r--分别代表什么东西 r:代表可读 w:可写 e:可执行 方便起见进行拆分 rw- 代表文件所属用户的权限 r-- 代表同组用户的权限 r-- 代表其他用户的权限 同时我们可以用2进制来表示: r:4 w:2 e:1 也即是3位二进制数则可以表示 chmod 命令

用python用户注册和短信验证码逻辑实现案例

一.写代码前分析(逻辑分析OK了才可以顺利成章的敲代码): A、用户发送请求 1、注册账号(用户名不能重复)--按照需求进行判断 2、短信验证码(有效期5分钟)--对短信验证码进行保存 B、用户注册、短信验证用不同得函数封装实现 d_user={} #存放用户名和密码的数据字典 verificati

【.NET深呼吸】用代码写WPF控件模板

这一次咱们来探究一下怎么用纯代码写 WPF 模板。模板有个共同基类 FrameworkTemplate,数据模板、控件模板等是从此类派生的,因此,该类已定义了一些通用成员。 用代码构建模板,重要的成员是 VisualTree 属性,它的类型是 FrameworkElementFactory。可见,模