用写代码的方式画图-试下PlantUML吧 | 京东云技术团队

news2024/11/19 4:31:13

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 将目光聚焦到画图本身,用户只需要根据规范去写逻辑代码就可以生成比较好看且整洁的图表,简单高效。大家不必刻意去记它的语法,在使用的过程中去查阅文档参考,很快就可以上手。

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

作者:京东物流 高世雄

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/554278.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023年企业降低云支出的小方法汇总

据悉&#xff0c;2023年全球云基础设施服务支出全年将增长23%&#xff0c;也就是说云支出会持续增长。所以企业有效降低云支出是刻不容缓的。这里就给大家汇总了一些企业降低云支出的小方法&#xff0c;希望有用。 2023年企业降低云支出的小方法汇总 1、寻找价格折扣 提前计…

计算机图形学 | 实验十一:阴影计算

计算机图形学 | 实验十一&#xff1a;阴影计算 计算机图形学 | 实验十一&#xff1a;阴影计算帧缓冲创建一个帧缓冲纹理附件渲染缓冲对象附件总结 阴影映射算法思想深度贴图渲染阴影抗锯齿 assimp库结果 华中科技大学《计算机图形学》课程 MOOC地址&#xff1a;计算机图形学&a…

分布式ID解决方案(一)数据库号段方式

一、前言 在一些简单系统中&#xff0c;我们可以直接使用数据库ID自增方式来标识和保存数据&#xff0c;但是随着系统的逐渐复杂&#xff0c;数据量的日益增多&#xff0c;我们可能需要对数据表、数据库实现分库分表。单纯的使用数据库的ID自增无法满足业务场景了&#xff0c;所…

Seata 的可观测实践

作者&#xff1a;察溯 Seata 简介 Seata 的前身是阿里巴巴集团内大规模使用保证分布式事务一致性的中间件&#xff0c;Seata 是其开源产品&#xff0c;由社区维护。在介绍 Seata 前&#xff0c;先与大家讨论下我们业务发展过程中经常遇到的一些问题场景。 业务场景 我们业务…

数据规模缩小 200 倍!指令微调高效指导大模型学习

夕小瑶科技说 原创 作者 | 智商掉了一地、Python 最近大型语言模型&#xff08;LLMs&#xff09;的指令微调备受研究人员的关注&#xff0c;因为它可以开发 LLM 遵循指令的潜力&#xff0c;使其更加符合特定的任务需求。虽然指令微调&#xff08;Instruction Tuning&#xff…

JavaEE-HTTPS的加密流程

目录 对称加密非对称加密证书的引入 对称加密 对称加密就是用同一个密钥把明文进行加密变成密文,也能把密文解密为明文. 理想状态下: 引入对称加密之后, 即使数据被截获, 由于黑客不知道密钥是啥, 因此就无法进行解密, 也就不知道请求的真实内容是啥了. 但同一时刻服务器服务…

数据库规范与SQL调优

数据库设计规范章节&#xff0c;依旧以《阿里巴巴Java开发手册》为原型进行修正和完善。 MySQL规约 (一) 建表规约 (二) 索引规约 (三) SQL规约 (四) ORM规约 (一) 建表规约 1. 【强制】 表达是与否概念的字段&#xff0c;必须使用is_xxx的方式命名&#xff0c;数据类型是…

Windows修改为Mac的字体方法

一: 首先下载字体文件和修改器 Mac字体修改 https://www.aliyundrive.com/s/KKvcRNYkP5p 提取码: 6d3p 点击链接保存&#xff0c;或者复制本段内容&#xff0c;打开「阿里云盘」APP &#xff0c;无需下载极速在线查看&#xff0c;视频原画倍速播放。 二: 设置并修改字体 1:…

服务(第二十八篇)rsync

配置rsync源服务器&#xff1a; #建立/etc/rsyncd.conf 配置文件 vim /etc/rsyncd.conf #添加以下配置项 uid root gid root use chroot yes #禁锢在源目录 address 192.168.80.10 …

浅谈管网抢维修效率对产销差率的影响

1 背景 多年来&#xff0c;漏损治理工作一直围绕检漏、分区计量或压力管理等相关话题&#xff0c;却忽视了抢维修速度与质量对漏损治理成效的影响。实际上&#xff0c;不管是DMA分区计量&#xff0c;还是检漏&#xff0c;最终还是要通过抢维修来修复漏点达到控制漏损的目的。尽…

Vue 3中利用UseStorage轻松实现本地存储功能,释放数据持久化的力量

✅创作者&#xff1a;陈书予 &#x1f389;个人主页&#xff1a;陈书予的个人主页 &#x1f341;陈书予的个人社区&#xff0c;欢迎你的加入: 陈书予的社区 &#x1f31f;专栏地址: 三十天精通 Vue 3 文章目录 一、介绍1.1 什么是本地存储1.2 Vue 3中的UseStorage插件简介 二、…

第18章_MySQL8其它新特性

第18章_MySQL8其它新特性 1. MySQL8新特性概述 MySQL从5.7版本直接跳跃发布了8.0版本&#xff0c;可见这是一个令人兴奋的里程碑版本。MySQL 8版本在功能上做了显著的改进与增强&#xff0c;开发者对MySQL的源代码进行了重构&#xff0c;最突出的一点是多MySQL Optimizer优化器…

MySQL-1-SQL语句的分类、MySQL命令、SQL查询语句

一、SQL语句的分类&#xff08;任何一条sql语句以分号结尾&#xff1b;SQL语句不区分大小写&#xff09; DQL&#xff08;数据查询语言&#xff09;&#xff1a;查询语句&#xff0c;凡是select都是DQL。 DML&#xff08;数据操作语言&#xff09;&#xff1a;insert、delete、…

Midjourney 介绍-AI绘画工具

《Midjourney》是一款2022年3月面世的AI绘画工具&#xff0c;创始人是David Holz。 它一款基于浏览器的在线应用程序&#xff0c;因此你无需安装任何软件&#xff0c;只需在浏览器中访问MidJourney的官方网站即可开始使用。 只要输入想到的文字&#xff0c;就能通过人工智能产出…

一文带你了解MySQL之基于成本的优化

前言 本文章收录在MySQL性能优化原理实战专栏&#xff0c;点击此处查看更多优质内容。 目录 一、什么是成本二、单表查询的成本2.1 准备数据2.2 基于成本的优化步骤2.3 基于索引统计数据的成本计算 三、连接查询的成本2.1 准备数据2.2 Condition filtering介绍2.3 多表连接的成…

『MySQL 实战 45 讲』16 - “order by” 是怎么工作的

“order by” 是怎么工作的 首先创建一个表 CREATE TABLE t ( id int(11) NOT NULL, city varchar(16) NOT NULL, name varchar(16) NOT NULL, age int(11) NOT NULL, addr varchar(128) DEFAULT NULL, PRIMARY KEY (id), KEY city (city) ) ENGINEInnoDB;全字段排序 在 cit…

正确甄别API、REST API、RESTful API和Web Service之间的异同

看到API你会想起什么&#xff1f;是接口、第三方调用、还是API文档&#xff1f;初看你可能会觉得这太熟悉了&#xff0c;这不是系统开发日常系列吗&#xff1f;但你仔细想一想&#xff0c;你会发现API的概念在你脑海里是如此的模糊。如何你通过搜索引擎检索API&#xff0c;你会…

目标检测数据预处理——部件截图,按一定比例进行外扩

本片是截图的篇的升级版本&#xff0c;简单版本的截图请参考根据目标框外扩一定比例进行截图&#xff08;连带标签&#xff09;。 对目标框&#xff08;类别名称&#xff09;进行分类&#xff0c;将同一类的目标框进行截图并分类保存在不同的文件夹中。 在本篇当中&#xff0c;…

Vue3中响应式Reactive的独特之处:它在哪些场景下胜出Ref?

✅创作者&#xff1a;陈书予 &#x1f389;个人主页&#xff1a;陈书予的个人主页 &#x1f341;陈书予的个人社区&#xff0c;欢迎你的加入: 陈书予的社区 &#x1f31f;专栏地址: 三十天精通 Vue 3 文章目录 一、Vue 3中响应式Reactive的独特之处1.1 引言1.2 Vue 3中的响应式…

算法leetcode|51. N 皇后(rust重拳出击)

文章目录 51. N 皇后&#xff1a;样例 1&#xff1a;样例 2&#xff1a;提示&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;go&#xff1a;c&#xff1a;python&#xff1a;java&#xff1a; 51. N 皇后&#xff1a; 按照国际象棋的规则&#xff0c;皇后可以…