VSCODE 系列(六)使用Plantuml插件制作UML类图


前言

软件设计中,有好几种图需要画,比如流程图、类图、组件图等,我知道大部分人画流程图一般都会用微软的visio绘制,visio画图有个不好的地方是需要时刻去调整线条和边框已达到简洁美观,今天我给大家介绍一款程序员画图神器PlantUML!
PlantUML是一种功能非常强大的UML描述语言。本文将介绍如何在VSCODE中安装和类图的绘制。

下载和安装

要想在vscode上作uml图,则必然是需要安装plantuml语言的插件,在安装插件里搜索栏里搜索plantuml安装如下所示
在这里插入图片描述只安装plantuml还不行,因为想要把uml图显示出来,还必须要有绘图插件才行,这里就需要graphviz插件,安装如下
在这里插入图片描述 这两个插件安装好之后,就可以在vscode上通过plantuml语言作uml图,ALT+D可把plantuml语言以图形形式更新展现出来。

支持文件格式

.wsd, .pu, .puml, .plantuml, .iuml

支持绘制类型

  • 时序图
  • 用例图
  • 类图
  • 活动图 (旧版语法在此处)
  • 组件图
  • 状态图
  • 对象图
  • 部署图
  • 定时图

同时还支持以下非UML图:

  • 线框图形界面
  • 架构图
  • 规范和描述语言 (SDL)
  • Ditaa diagram
  • 甘特图
  • MindMap diagram
  • 以 AsciiMath 或 JLaTeXMath 符号的数学公式

本文主要介绍程序员开发中类图的绘制。

导出

ctrl+shift+p打开首选项
输入:PlantUML:导出当前图表;选择导出格式png;导出即可。

语法

语法简单明了,查看以下官方教程

申报要素

@startuml
abstract        abstract
abstract class  "abstract class"
annotation      annotation
circle          circle
()              circle_short_form
class           class
diamond         diamond
<>              diamond_short_form
entity          entity
enum            enum
interface       interface
protocol        protocol
struct          struct
@enduml

在这里插入图片描述

UML类图关系

类图关系 符号
依赖 <…或…>
单向关联 <–
双向关联 –或<–>
聚合 o–
组合 *–
泛化/继承 <|–
实现 <|…

类图关系使用戳这里**PlantUml实现类图**和PlantUML 快速入门(一) 绘制 UML 类图

@startuml
Class01 ..> Class02 :  依赖
Class03 --> Class04 :  单向关联
Class05 <--> Class06 :  双向关联
Class07 o-- Class08 :  聚合
Class09 *-- Class010 :  组合
Class10 <|-- Class11 : 泛化/继承
Class12 ..|> Class13 :  实现
@enduml

在这里插入图片描述

参考例子

@startuml
动物 ..> 空气 : 依赖
动物 ..> 水
鸟 --|> 动物 : 继承
大雁 ..|> 飞翔 : 实现接口
大雁 --|> 鸟
大雁 "n" --o "1" 雁群 : 聚合
鸭 --|> 鸟
唐老鸭 -- 鸭
翅膀 --* 鸟 : 组合 >
企鹅 --> 气候 : 单向关联
企鹅 --|> 鸟

class 动物 {
    
    
    - {
    
    static}有生命
    # 重量
    + 年龄
    + {
    
    abstract}新陈代谢(空气 水)
    + 繁殖()
    + 繁殖(变量1)
}

note right: 动物的注释

note left of 动物::重量
    动物的重量的注释
end note

note left of 动物::"繁殖()"
    同名方法的注释
end note

note right of 动物::"繁殖(变量1)"
    同名方法的注释
end note

class 空气

class 水

class 鸟 {
    
    
    + 翅膀
    + 下蛋()
}

class 翅膀 {
    
    

}

interface 飞翔 {
    
    
    + 飞()
}

class 大雁 {
    
    
    + 下蛋()
    + 飞翔()
}

note top of 大雁
    大雁的注释
end note

class 雁群 {
    
    
    + V型飞行()
    + 一型飞行()
}

class 鸭 {
    
    
    + 下蛋()
}

class 唐老鸭 {
    
    
    - 讲话()
    # 走路()
}

class 企鹅 {
    
    
    + 下蛋()
}

enum 气候 {
    
    
}

note as N1
    这是一个注释,可以像Markdown一样贴图和
    HTML一样<u>下划线</u>
end note
@enduml

在这里插入图片描述

扫描二维码关注公众号,回复: 14666056 查看本文章

参考

官方教程
PlantUml实现类图
PlantUML 快速入门(一) 绘制 UML 类图
liml-miku

猜你喜欢

转载自blog.csdn.net/qq_26849933/article/details/128294067
今日推荐