From c8467949d12eb977c1541a4308a97416580f8469 Mon Sep 17 00:00:00 2001 From: "rick.chan" Date: Wed, 8 May 2024 14:05:54 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E4=B8=BA=20Mermaid=20?= =?UTF-8?q?=E8=AF=AD=E6=B3=95.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: rick.chan --- .../VSCode/VSCode_Markdown_UML.md | 345 ++++++++---------- 1 file changed, 144 insertions(+), 201 deletions(-) diff --git a/Software/Applications/VSCode/VSCode_Markdown_UML.md b/Software/Applications/VSCode/VSCode_Markdown_UML.md index b9ef119..9b32f73 100644 --- a/Software/Applications/VSCode/VSCode_Markdown_UML.md +++ b/Software/Applications/VSCode/VSCode_Markdown_UML.md @@ -1,205 +1,50 @@ # VSCode+Markdown+UML +- [VSCode+Markdown+UML](#vscodemarkdownuml) + - [1. Mermaid 流程图](#1-mermaid-流程图) + - [1.1. 横向流程图](#11-横向流程图) + - [1.2. 纵向流程图](#12-纵向流程图) + - [1.3. 超大流程图样例](#13-超大流程图样例) + - [2. Mermaid 甘特图](#2-mermaid-甘特图) + - [3. Mermaid 类图](#3-mermaid-类图) + - [3.1. 语法](#31-语法) + - [3.1.1. 泛化(Generalization)](#311-泛化generalization) + - [3.1.2. 实现(Realization)](#312-实现realization) + - [3.1.3. 组合(Composition)](#313-组合composition) + - [3.1.4. 聚合(Aggregation)](#314-聚合aggregation) + - [3.1.5. 关联(Association)](#315-关联association) + - [3.1.6. 依赖(Dependency)](#316-依赖dependency) + - [4. Mermaid 时序图](#4-mermaid-时序图) + - [5. Mermaid 状态图](#5-mermaid-状态图) + - [6. Entity Relationship Diagrams](#6-entity-relationship-diagrams) + - [7. User Journey Diagram](#7-user-journey-diagram) + - [8. Pie chart diagrams](#8-pie-chart-diagrams) + - [9. Requirement Diagram](#9-requirement-diagram) + - [10. 外部参考资料](#10-外部参考资料) + + 首先 VSCode 安装 Markdown Preview Enhanced (Yiyi Wang) 插件。 然后对 Markdown 文件可使用 Ctrl+k,v 进行预览。 -## 1.流程图 - -```flow -sta=>start: 开始 -e=>end: 结束 -op=>operation: 操作（处理块） -sub=>subroutine: 子程序 -cond=>condition: 是或者不是（条件判断）? -cond2=>condition: 第二个判断（条件判断）? -io=>inputoutput: 输出 - -sta->op->cond -cond(yes)->e -cond(no)->cond2 -cond2(yes,right)->sub(left)-op -cond2(no)->io(lef)->e -``` - -### 1.1.语法 - -#### 1.1.1.关键字 - -1. start, end：表示该流程图中的开始与结束。 -2. operation：表示该流程图中的处理块。 -3. subroutine：表示该流程图中的子程序块。 -4. condition：表示该流程图中的条件判断。 -5. inputoutput：表示该流程图中的输入输出。 -6. right, left：表示该流程图中当前模块下一个箭头的指向（默认箭头指向下方）。 -7. yes, no：表示该流程图中条件判断的分支（默认yes箭头向下no箭头向右；yes与no可以和right同时使用；yes箭头向右时，no箭头向下） -8. URL：e=>点击本结束跳转:> - -#### 1.1.2.各模块之间的联系 - -基本形式： - -```blk -模块标识=>模块关键字: 模块模块名称 -``` - -连接定义： - -```blk -模块标识1->模块标识2 -模块标识1->模块标识2->模块标识3 -... ... -``` - -1. *通过模块与连接定义，可以组成一个完整的流程图。* -2. *在模块定义中，模块标识与模块名称可以自定义，模块关键字不可以自定义！* - -## 2.序列图 - -```sequence -title: 三个臭皮匠的故事 -participant 小王 -participant 小李 -participant 小异常 - -note left of 小王: 我是小王 -note over 小李: 我是小李 -note right of 小异常: 大家好！\n我是小异常 - -小王->小王: 小王想：今天要去见两个好朋友咯~ -小王->小李: 嘿，小李好久不见啊~ -小李-->>小王: 是啊 -小李->小异常: 小异常，你好啊 -小异常-->小王: 哈，小王！\n最近身体怎么样了？ -小王->>小异常: 还可以吧 -``` - -### 2.1.语法 - -#### 2.1.1.关键字 - -1. title：表示该序列图中的标题。 -2. participant：表示该序列图中的对象。 -3. note：表示该序列图中的部分说明。 - -关于 note 以下三种关键字： - -* left of：表示在当前对象的左侧。 -* right of：表示在当前对象的右侧。 -* over：表示覆盖在当前对象的上方。 - -#### 2.1.2.箭头 - -1. ->：实线实箭头 -2. –>：虚线实箭头 -3. ->>：实线虚箭头 -4. –>>：虚线虚箭头 - -#### 2.1.3.换行 - -如果当前行中的文字过多想要换行，可以使用 \n 进行转义换行，效果如以上例子。 - -## 3.Mermaid 甘特图 +## 1. Mermaid 流程图 ```mermaid -gantt -title 甘特图 -dateFormat YYYY-MM-DD -section 行1 -任务1 :a1, 2014-01-01, 30d -任务2 :after a1 , 20d -section 行2 -任务3 :2014-01-12 , 12d -任务4 : 24d +flowchart +Start[开始] +End[结束] +Operation([处理块]) +Subroutine[子程序] +Condition1{是或者不是} +Condition2{第二个判断} +Output[输出] + +Start --> Operation --> Condition1 --> |Yes|End +Condition1 --> |No|Condition2 --> |Yes|Subroutine --> Operation +Condition2 --> |No|Output --> End ``` -## 4.Mermaid 类图 - -```mermaid -classDiagram -Class01 <|-- AveryLongClass : Cool -Class03 *-- Class04 -Class05 o-- Class06 -Class07 .. Class08 -Class09 --> C2 : Where am i? -Class09 --* C3 -Class09 --|> Class07 -Class07 : equals() -Class07 : Object[] elementData -Class01 : size() -Class01 : int chimp -Class01 : int gorilla -Class08 <--> C2: Cool label -``` - -### 4.1.语法 - -#### 4.1.1.泛化(Generalization) - -继承、子类与父类 - -```mermaid -classDiagram - -A<|--B -A:+int doing -A:+Can() -B:+flying() -``` - -#### 4.1.2.实现(Realization) - -```mermaid -classDiagram - -class IFlyable{ - <> - + flying() -} -IFlyable<|..Bat -Bat:+flying() -``` - -#### 4.1.3.组合(Composition) - -```mermaid -classDiagram - -Computer *-- CPU - Computer *-- Mainboard - Computer *-- HardDisk - Computer *-- MemeryCard -``` - -#### 4.1.4.聚合(Aggregation) - -```mermaid -classDiagram - -Company o-- Empolyee0 -Company o-- Empolyee1 -``` - -#### 4.1.5.关联(Association) - -```mermaid -classDiagram - -Reader "1..*" -- "1..*" Book -Book "1..*"--> "1"Author -``` - -#### 4.1.6.依赖(Dependency) - -```mermaid -classDiagram - -Animal..>Food -``` - -## 5.Mermaid 流程图 - -### 5.1.横向流程图 +### 1.1. 横向流程图 ```mermaid flowchart LR @@ -210,7 +55,7 @@ C --> |a=2| D[结果2] F[横向流程图] ``` -### 5.2.纵向流程图 +### 1.2. 纵向流程图 ```mermaid flowchart TD @@ -224,7 +69,7 @@ subgraph F[F] end ``` -### 5.3.超大流程图样例 +### 1.3. 超大流程图样例 ```mermaid graph TB @@ -250,7 +95,105 @@ graph TB class di orange ``` -## 6.Mermaid 时序图 +## 2. Mermaid 甘特图 + +```mermaid +gantt +title 甘特图 +dateFormat YYYY-MM-DD +section 行1 +任务1 :a1, 2014-01-01, 30d +任务2 :after a1 , 20d +section 行2 +任务3 :2014-01-12 , 12d +任务4 : 24d +``` + +## 3. Mermaid 类图 + +```mermaid +classDiagram +Class01 <|-- AveryLongClass : Cool +Class03 *-- Class04 +Class05 o-- Class06 +Class07 .. Class08 +Class09 --> C2 : Where am i? +Class09 --* C3 +Class09 --|> Class07 +Class07 : equals() +Class07 : Object[] elementData +Class01 : size() +Class01 : int chimp +Class01 : int gorilla +Class08 <--> C2: Cool label +``` + +### 3.1. 语法 + +#### 3.1.1. 泛化(Generalization) + +继承、子类与父类 + +```mermaid +classDiagram + +A<|--B +A:+int doing +A:+Can() +B:+flying() +``` + +#### 3.1.2. 实现(Realization) + +```mermaid +classDiagram + +class IFlyable{ + <> + + flying() +} +IFlyable<|..Bat +Bat:+flying() +``` + +#### 3.1.3. 组合(Composition) + +```mermaid +classDiagram + +Computer *-- CPU + Computer *-- Mainboard + Computer *-- HardDisk + Computer *-- MemeryCard +``` + +#### 3.1.4. 聚合(Aggregation) + +```mermaid +classDiagram + +Company o-- Empolyee0 +Company o-- Empolyee1 +``` + +#### 3.1.5. 关联(Association) + +```mermaid +classDiagram + +Reader "1..*" -- "1..*" Book +Book "1..*"--> "1"Author +``` + +#### 3.1.6. 依赖(Dependency) + +```mermaid +classDiagram + +Animal..>Food +``` + +## 4. Mermaid 时序图 ```mermaid sequenceDiagram @@ -266,7 +209,7 @@ John->Bob: How about you? Bob-->John: Jolly good! ``` -## 7.Mermaid 状态图 +## 5. Mermaid 状态图 ```mermaid stateDiagram-v2 @@ -279,7 +222,7 @@ stateDiagram-v2 Crash --> [*] ``` -## 8.Entity Relationship Diagrams +## 6. Entity Relationship Diagrams ```mermaid erDiagram @@ -288,7 +231,7 @@ erDiagram CUSTOMER }|..|{ DELIVERY-ADDRESS : uses ``` -## 9.User Journey Diagram +## 7. User Journey Diagram ```mermaid journey @@ -302,7 +245,7 @@ journey Sit down: 5: Me ``` -## 10.Pie chart diagrams +## 8. Pie chart diagrams ```mermaid pie title Pets adopted by volunteers @@ -311,7 +254,7 @@ pie title Pets adopted by volunteers "Rats" : 15 ``` -## 11.Requirement Diagram +## 9. Requirement Diagram ```mermaid requirementDiagram @@ -330,6 +273,6 @@ element test_entity { test_entity - satisfies -> test_req ``` -## 12.外部参考资料 +## 10. 外部参考资料 1. [About Mermaid](https://mermaid-js.github.io/mermaid/#/)