VSCode绘制UML类图

Posted Techblog of HaoWANG

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VSCode绘制UML类图相关的知识,希望对你有一定的参考价值。

目录

1. 简介

1.1 PlantUML

1.2 安装PlantUML

1.3 支持的文件格式

2. 绘制UML类图

类之间的关系​​​​

关系上的标签​​​​

添加方法​​​​

定义可访问性

3. 测试

3.1 例子

3.2 预览

3.3 如何导出


1. 简介

软件设计中,有好几种图需要画,比如流程图、类图、组件图等,我知道大部分人画流程图一般都会用微软的visio绘制,visio画图有个不好的地方是需要时刻去调整线条和边框已达到简洁美观,今天我给大家介绍一款程序员画图神器PlantUML!

1.1 PlantUML

PlantUML是一个开源项目,支持快速绘制:

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

同时还支持以下非UML图:

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

通过简单直观的语言来定义这些示意图,与MarkDown有相似的作用,这两种语言一个主要面向文本渲染一个主要用于图形绘制。
 

1.2 安装PlantUML

安装

  • 安装graphviz-2.38.msi
  • 安装2个vscode插件:

PlantUML、Graphviz Preview

 如图所示,安装即可。

1.3 支持的文件格式

Supported Formats

  1. *.wsd,
  2.  *.pu,
  3.  *.puml,
  4.  *.plantuml
  5. *.iuml

2. 绘制UML类图

 

元素声明

 

 

@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

@enduml

类之间的关系

 

类之间的关系通过下面的符号定义 :

 

TypeSymbolDrawing
Extension(扩展)<|--
Composition(组合)*--
Aggregation(聚合)o--

 

 

 

 

 

 

 

 

 

 

 

使用.. 来代替 -- 可以得到点 线.

 

 

在这些规则下,也可以绘制下列图形

 


 

@startuml
Class01 <|-- Class02
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 -- Class10
@enduml

 


@startuml
Class11 <|.. Class12
Class13 --> Class14
Class15 ..> Class16
Class17 ..|> Class18
Class19 <--* Class20
@enduml

 

 


 
@startuml
Class21 #-- Class22
Class23 x-- Class24
Class25 }-- Class26
Class27 +-- Class28
Class29 ^-- Class30
@enduml

关系上的标签

 

 

在关系之间使用标签来说明时, 使用 :后接 标签文字。

 

对元素的说明,你可以在每一边使用 "" 来说明.

 

 

@startuml

Class01 "1" *-- "many" Class02 : contains

Class03 o-- Class04 : aggregation

Class05 --> "1" Class06

@enduml

 

 

 

在标签的开始或结束位置添加< 或 >以表明是哪个对象作用到哪个对象上。

 

 

 

@startuml
class Car

Driver - Car : drives >
Car *- Wheel : have 4 >
Car -- Person : < owns

@enduml

 

添加方法

 

为了声明字段(对象属性)或者方法,你可以使用 后接字段名或方法名。

 

系统检查是否有括号来判断是方法还是字段。

 

 

@startuml
Object <|-- ArrayList

Object : equals()
ArrayList : Object[] elementData
ArrayList : size()

@enduml

 

 

 

也可以使用{} 把字段或者方法括起来

 

注意,这种语法对于类型/名字的顺序是非常灵活的。

 

 


@startuml
class Dummy {
  String data
  void methods()
}

class Flight {
   flightNumber : Integer
   departureTime : Date
}
@enduml

 


你可以(显式地)使用 {field} 和 {method} 修饰符来覆盖解析器的对于字段和方法的默认行为

 

 

@startuml
class Dummy {
  {field} A field (despite parentheses)
  {method} Some method
}

@enduml

 


定义可访问性

 

一旦你定义了域或者方法,你可以定义 相应条目的可访问性质。

 

CharacterIcon for fieldIcon for methodVisibility
-private
#protected
~ package private
+ public

 

 

Edit online
@startuml

class Dummy {
 -field1
 #field2
 ~method1()
 +method2()
}

@enduml

 


 

你可以采用以下命令停用这些特性 skinparam classAttributeIconSize 0 :

 

@startuml
skinparam classAttributeIconSize 0
class Dummy {
 -field1
 #field2
 ~method1()
 +method2()
}

@enduml

 


3. 测试

3.1 例子

如 新建文件xx.puml

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml

3.2 预览

快捷键:Alt+D

 

如遇到Java报错,请安装java并配置路径

文件格式
.wsd, .pu, .puml, .plantuml, .iuml

 

3.3 如何导出


F1/ctrl+shift+p;

PlantUML:导出当前图表;

选择导出格式png;

导出即可。

参考: 

1. https://plantuml.com/zh/class-diagram

2. https://www.freesion.com/article/1112413542/

以上是关于VSCode绘制UML类图的主要内容,如果未能解决你的问题,请参考以下文章

LaTeX绘制UML类图备忘

一键将项目代码绘制成 UML 类图

利用IDEA一键把整个项目代码绘制成UML类图!

IDEA这个功能真强大!一键把整个项目代码绘制成UML类图...

IDEA中一个被低估的功能,一键把项目代码绘制成UML类图

Python自动绘制UML类图函数调用图(Call Graph)