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 類之間的關系 類之間的關系通過下面的符号定義 : Type Symbol Drawing 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 定義可通路性 一旦你定義了域或者方法，你可以定義 相應條目的可通路性質。 Character Icon for field Icon for method Visibility - 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/