使用vscode写UML图

news2024/11/13 10:57:08

文章目录

    • 环境配置
    • 关键字
      • 多图
      • 注释
      • Title
      • 多行title
      • 图注
      • 头部或尾部添加注释
      • 多行header/footer
      • 放大率
      • 类图
      • 接口
      • 抽象类
      • 枚举
    • 类型关系
      • 泛化关系,箭头指向父类
      • 实现关系,箭头指向接口
      • 依赖关系,箭头指向被依赖关系
      • 关联关系,指向被拥有者可以双向
      • 聚合,菱形指向整体
      • 组合,菱形指向整体
      • 综合应用
    • 成员关系
      • 成员变量、成员方法
      • 成员可见性
      • 抽象方法
      • 静态方法
      • 泛型
      • 包图
      • 包图中的声明顺序
    • 备注
      • 常见备注
      • 指定目标类备注
      • 为类关系进行备注
      • 给备注加名字
      • 多行备注

环境配置

安装插件
使用vscode写UML类图,需要使用一个插件PlantUML,直接在vscode的拓展库搜索对应的插件即可。
云端渲染
如下,在插件中的配置中配置对应的参数就可以实现云端渲染,实现云端渲染的时候需要一个服务器,这里使用的服务器是官方服务器,可以显示的前提是要有网。想要在本地渲染或者想要其他渲染服务器,可以百度。
在这里插入图片描述

关键字

多图

要注意的是,一组的@startuml/@enduml只能对应一张png,如果一个文件有多组,则生成png文件会自动添加数字后缀,此外也可以在@startuml后面直接指定文件名

@startuml foo
class Foo
@enduml
@startuml bar
class Bar
@enduml
@startuml baz
class Baz
@enduml

注释

单引号后面跟随的内容是注释

@startuml no-scale
' 这是注释
Hello <|-- World
@enduml

Title

title 后跟标题

@startuml
title Hello Title
Hello <|-- World
@enduml

在这里插入图片描述

多行title

title 与 end title 之间的输入可以换行

@startuml
' 标题
title 
test title
ti
end title

' 函数,方法
hello <|-- Word
@enduml

在这里插入图片描述

图注

caption之后跟的内容显示为图注,可以用来标注一幅图

@startuml
' 标题
title 
test title
ti
end title
caption Picture 1

' 函数,方法
hello <|-- Word
@enduml


在这里插入图片描述

头部或尾部添加注释

header footer可以在头部和尾部追加注释。 默认 header 右对齐, footer 居中对齐。如果想要改变它本身的对齐方式,可以在关键字前面加上left或者right,如left header Hello

@startuml
' 标题
title 
test title
ti
end title
caption Picture 1

' 函数,方法
header Hello
footer World
hello <|-- World
@enduml


在这里插入图片描述

多行header/footer

跟 title 一样, header … end header , footer … end footer

@startuml
header
Hello
Header
end header
Hello <|-- World
footer
World
Footer
end footer
@enduml

放大率

scale 可以为UML设置防大率

@startuml no-scale
Hello <|-- World
@enduml
@startuml scale-1.5
scale 1.5
Hello <|-- World
@enduml
@startuml scale-0.5
scale 0.5
Hello <|-- World
@enduml

在这里插入图片描述

类图

用class来指定类

@startuml
class Hello
class World
@enduml

在这里插入图片描述

接口

用interface 指定接口

@startuml
interface Hello
interface World
@enduml

在这里插入图片描述

抽象类

abstract class 指定抽象类

@startuml
abstract class Hello
@enduml

在这里插入图片描述

枚举

enum 指定枚举, { … } 定义枚举值

@startuml
enum HelloWorld {
    ONE
    TWO
    THREE
}
@enduml

在这里插入图片描述

类型关系

UML中类型之间有六大关系:

  • 泛化(Generalization)
  • 实现(Realization)
  • 关联(Association)
  • 聚合(Aggregation)
  • 组合(Composition)
  • 依赖(Dependency)

泛化关系,箭头指向父类

泛化关系就是类的继承关系,用<|- - 或者- -|> 指定继承关系,java中对应的关键字是extends

@startuml
Child--|>Parent
Parent2<|--Child2
@enduml

在这里插入图片描述

实现关系,箭头指向接口

用…|> , <|… , 圆点表示虚线表示,实现关系是对接口的实现,对应于java中的关键字是implements

@startuml
Child--|>Parent
Parent2<|--Child2

interface Flyable
class Plane
Flyable <|.. Plane
@enduml

在这里插入图片描述

依赖关系,箭头指向被依赖关系

依赖关系体现的是类与类之间的一种联结关系,比如说我要借书,那么就要去图书馆,借书的方法要依赖于图书馆。如下代码展示:


package demo03;
 
public class main {
    public static void main(String[] args) {
        Book bo = new Book();
        bo.book();
    }
}
//属于依赖者
class Book {
    public void book() {
        Library lib = new Library();
        lib.library();
        System.out.println("从图书馆借走一本书");
    }
}
//属于被依赖者
class Library {
    public void library() {
        System.out.println("这是一个图书馆");
    }

@startuml
Book..>Library
@enduml

在这里插入图片描述

关联关系,指向被拥有者可以双向

关联关系,表示”拥有”。 相比依赖关系的临时性和单向性,关联关系具有长期性、平等性(可双向),所以关联表示的关系比依赖更强。比如现实生活中的夫妻, 师生等关系。长期存在并且是相互的关系。 此外关联可以表示一对一,一对多,多对一,多对多等各种关系。双向关联可以省略箭头。

@startuml
Address <-- Husband
Husband <--> Wife
Husband2 -- Wife2
@enduml

在这里插入图片描述

聚合,菱形指向整体

聚合关系相对于组合弱一些,整体与部分是可分离的。 比如部门与员工,部门有许多员工,员工离职了部门仍然存在,不受影响。反之部门解散了,员工可以去其他部门(整体与部分可分离)

@startuml
Department o-- Employee
@enduml

o 表示空心菱形

在这里插入图片描述

组合,菱形指向整体

组合关系中,整体与部分是不可分离的,整体与部分的生命周期保持一致,少了对方自己的存在无意义。例如人体是有四肢组成的,四肢不能脱离人体存在,人体少了四肢也难言完整

@startuml
Body "1" *-- "2" Arm
Body "1" *-- "2" Leg
@enduml

* 表示实心菱形

同时也看到了一对多时的数字表示方法,双引号" 包裹,放在线段与Class之间。 多对多也同样。
在这里插入图片描述

综合应用

@startuml
interface One
interface Two
interface Three extends Two
interface Four
class Five implements One,Three
class Six extends Five implements Four{
    field:string
    method():void
}
@enduml

在这里插入图片描述

成员关系

成员变量、成员方法

class定义后跟大括号,声明成员,然后按照 变量名:类型 的顺序声明,类型后置。方法和成员的顺序上可以混在一起,最终成图是,会自动分为两组。

@startuml
class Hello{
    one:string
    three(param1:string,param2:int):boolean
    two:int
    four(List<string> param):int
}
@enduml

在这里插入图片描述

成员可见性

在这里插入图片描述

案例说明:

@startuml
class Hello {
    - privateField: int
    # protectedField: int
    ~ packagePrivateField: int
    + publicField: int
    - privateMethod(): void
    # protectedMethod(): void
    ~ packagePrivateMethod(): void
    + publicMethod(): void
}
@enduml

在这里插入图片描述
通过 skinparam classAttributeIconSize 0 关闭图形化符号

@startuml
skinparam classAttributeIconSize 0
class Hello {
    - privateField: int
    # protectedField: int
    ~ packagePrivateField: int
    + publicField: int
    - privateMethod(): void
    # protectedMethod(): void
    ~ packagePrivateMethod(): void
    + publicMethod(): void
}
@enduml

在这里插入图片描述

抽象方法

成员前面加 {abstract} 标记位抽象成员

@startuml
class Hello {
    {abstract} one: int
    {abstract} two(): int
}
@enduml

静态方法

添加 {static} 表示静态方法

@startuml
class Hello {
    {static} ONE: int
    {static} two(): int
}
@enduml

泛型

类名后跟<泛型>

@startuml
class Hello<H>
class World<W> 
@enduml

包图

package {…} 中可以写类 UML 图

@startuml
package one.two {
    class Hello
}
package three.four {
    World -- Hello
}
@enduml

在这里插入图片描述

包图中的声明顺序

包图的顺序很重要,以下面的例子感受:

@startuml
package three.four {
    World -- Hello
}
package one.two {
    class Hello
}
@enduml

在这里插入图片描述

@startuml
package one.two {
    class Hello
}
package three.four {
    World -- Hello
}

@enduml

在这里插入图片描述

备注

常见备注

使用 note <top|bottom|left|right>: <备注> 为 UML 图添加备注, 备注内容可以是 Creole 语法

@startuml
class Fizz
note left: fizz
class Buzz
note right: buzz
class Foo
note top: foo
class Bar
note bottom: bar
@enduml

在这里插入图片描述

指定目标类备注

@startuml
Fizz -- Buzz
note left of Fizz: fizz
note right of Buzz: buzz
@enduml

在这里插入图片描述

为类关系进行备注

note on link: <备注> 可以在类图的关系中添加备注

@startuml
Fizz -- Buzz
note on link: fizz-buzz
note left: buzz
@enduml

在这里插入图片描述

给备注加名字

note “<备注>” as <名字>用来给备注设置名字,有了名字后,可以通过名字将一个备注关联到多个Class

@startuml
note "Hello World" as n1
Hello -- n1
World .. n1
note "Fizz Buzz" as n2
@enduml

在这里插入图片描述

多行备注

end note 用来结束多行的备注

@startuml
class Hello
note left
Hello
World
end note
Fizz -- Buzz
note on link
Fizz
Buzz
end note
note left of Fizz
fizz
buzz
end note
note as n1
Foo
Bar
end note
@enduml

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

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

相关文章

QML控件--DelayButton

文章目录 一、控件基本信息二、控件使用三、属性四、信号 一、控件基本信息 Import Statement&#xff1a;import QtQuick.Controls 2.14 Since&#xff1a;Qt 5.9 Inherits&#xff1a;AbstractButton 二、控件使用 DelayButton是一个延时按钮&#xff0c;需要长按才能触发&…

WPF教程(二)--Application WPF程序启动方式

1.Application介绍 WPF与WinForm一样有一个 Application对象来进行一些全局的行为和操作&#xff0c;并且每个 Domain &#xff08;应用程序域&#xff09;中仅且只有一个 Application 实例存在。和 WinForm 不同的是WPF Application默认由两部分组成 : App.xaml 和 App.xaml.…

SpringBoot单元测试断言 assertions

断言 断言&#xff08;assertions&#xff09;是测试方法中的核心部分&#xff0c;用来对测试需要满足的条件进行验证。这些断言方法都是 org.junit.jupiter.api.Assertions 的静态方法。JUnit 5 内置的断言可以分成如下几个类别&#xff1a; 1、简单断言 2、数组断言 通过 …

类型转换-空间配置器

文章目录 类型转换C语言的类型转换隐式类型转换&#xff1a;强制类型的转换&#xff1a;C类型转换缺点 C强制类型转换static_castreinterpret_castconst_castdynamic_cast explicit 空间配置器(STL专用内存池)SGI-STL空间配置器实现原理一级空间配置器二级空间配置器内存池SGI-…

stm32启动过程(以F1为例)

文章目录 STM32启动模式STM32启动过程&#xff08;以内部flash启动为例&#xff09;启动文件功能启动文件常用汇编指令及说明 STM32启动模式 M3/M4/M7等内核复位后&#xff0c;做的第一件事&#xff1a; 从地址 0x0000 0000 处取出 堆栈指针 MSP 的初始值&#xff0c;该值为栈…

接踵而至,昆仑万维天工大语言模型发布

目录 天工大语言模型对标GPT3.5对话能力多模态应用同行对比后言 天工大语言模型 国产ChatGPT再次迎来新成员&#xff0c;4月17日下午&#xff0c;昆仑万维正式发布千亿级大语言模型“天工”&#xff0c;同时宣布即日起启动邀请测试&#xff0c;并注册了chatgpt.cn作为域名。天…

认真复习c语言1

最近好好写总结了&#xff08;不能在偷懒了&#xff09;&#xff1a;这一次绝对认真&#xff0c;写总结写了三个多小时&#xff0c;学了一个小时左右TAT&#xff1b; 今天来复习一下c语言的多文件操作&#xff1a; 经过我这几天的摸索&#xff0c;我算是明白了&#xff1a; …

Typora (windows/MacOs版) 你未曾见过的Markdown编辑器

简介 Typora的设计理念非常人性化&#xff0c;与传统编辑器相比&#xff0c;更注重用户的视觉效果和阅读体验。它的编辑界面非常简洁&#xff0c;用户可以就近编辑&#xff0c;随时查看效果&#xff0c;避免频繁地转换预览模式&#xff0c;提高了工作效率和灵活性。 此外&…

d2l解码编码器与seq2seq

seq2seq难死了&#xff0c;卡了好久&#xff0c;好不容易有些头绪了。。。 目录 1.编码器与解码器 1.1原理 1.2实现 2.seq2seq 2.1构造编码器 2.2构造解码器 repeat与cat探索 总结nn.rnn\GRU\LSTM输入输出 看一下解码器的输出 2.3损失计算 2.4训练 2.5预测 2.6预…

【C++】多态---上( 概念、条件及性质)

来前言&#xff1a; 我们之前提到过&#xff0c;C是一门面向对象的语言&#xff0c;它有三大特性——封装、继承、多态。 封装和继承我们已经详细学习过了&#xff0c;本章将进入多态的学习。 目录 &#xff08;一&#xff09;多态的概念 &#xff08;二&#xff09;多态的定…

Vector - CAPL - Panel面板_02

Button 功能&#xff1a;触发指定的操作 说明&#xff1a;Button 是一个控件&#xff0c;使用它可以触发指定的操作。 适用场景&#xff1a; 1、按下启动按钮会使电机启动。 2、启动锁定开关时&#xff0c;所有车门都会自动锁定。 3、启动TestModule测试模块、回放模块等 设…

单机部署MongoDB

文章目录 一、Windows 环境1.1 安装1.2 启动和连接1.3 Compass 图形化客户端 二、Linux 环境2.1 安装2.2 启动和连接 提示&#xff1a;以下是本篇文章正文内容&#xff0c;MongoDB 系列学习将会持续更新 一、Windows 环境 1.1 安装 ①下载安装包&#xff0c;官方下载地址&am…

OldWang带你了解MySQL(七)

文章目录&#x1f525;多表查询&#x1f525;SQL92标准中的查询&#x1f525;非等值连接&#x1f525;自连接&#x1f525;SQL99标准中的查询&#x1f525;SQL99中的自然连接(NATURAL JOIN)&#x1f525;SQL99中的内连接(INNER JOIN)&#x1f525;外连接查询(OUTER JOIN)&#…

行业那么多,为什么计算机领域这么火?

行业那么多&#xff0c;为什么计算机领域这么火&#xff1f;计算机领域火已经不是一天两天了&#xff0c;从开始的进入互联网时代、到“互联网”、再到大数据、人工智能时代、数字化经济……计算机技术从行业内部的自我发展逐渐渗透到各行各业&#xff0c;甚至成为社会整体经济…

NLP深度网络中self.embedding(x)词嵌入后降维方法

在自然语言处理中的循环神经网络中&#xff0c;经常使用torch定义类&#xff0c;self.embedding(x&#xff09;中&#xff0c;x是输入&#xff0c;介绍self.embedding(x&#xff09;返回结果&#xff0c;以及结果的形状&#xff0c;并解释这个形状 在自然语言处理中的循环神经网…

P4158 [SCOI2009]粉刷匠(分组背包问题+前缀和优化)

[TOC](P4158 [SCOI2009]粉刷匠(分组背包问题)) 一、问题 [SCOI2009]粉刷匠 题目描述 windy有 N 条木板需要被粉刷。 每条木板被分为 M 个格子。 每个格子要被刷成红色或蓝色。 windy每次粉刷&#xff0c;只能选择一条木板上一段连续的格子&#xff0c;然后涂上一种颜色。 …

Spring Cloud Gateway: 网关

文章目录 网关Hello world路由: Route谓词: Predicate过滤器: FilterGateway实现限流: RequestRateLimiter过滤器使用Gateway实现服务降级 自定义全局过滤器GateWay中执行流程 网关 API网关就是实现了前端项目和服务端项目之间的统一入口 Nginx实现的是用户和前端项目之间调用…

【Linux】环境变量相关笔记

文章目录 echo $PATHexport和环境变量相关的命令main(int argc,char* argv[],char *env[])三个参数介绍getenv()通过系统调用获取su与su - 的区别&#xff1a;exportsource 和 .优先级 echo $PATH 是用来查环境变量的 export 从下面的图片当中可以看到&#xff0c;的确是将文…

ubuntu 20.04设置开机自启动脚本

1 建立开机启动服务 在 路径下 /lib/systemd/system/rc-local.service 的 rc-local.service 的脚本&#xff0c;内容规定了 rc.local 的启动顺序和行为 这行代码规定了这个service在开机启动时所执行的命令是&#xff1a;/etc/rc.local start。即运行 /etc/rc.local 脚本。不过…

《面试1v1》HashMap

没有人比中国人更懂 HashMap 我是 javapub&#xff0c;一名 Markdown 程序员从&#x1f468;‍&#x1f4bb;&#xff0c;八股文种子选手。 面试官&#xff1a;HashMap 是Java程序员用得最频繁的集合之一,可以给我简单介绍一下它的内部实现机制吗? 候选人&#xff1a; Hash…