统一为 Mermaid 语法.

Signed-off-by: rick.chan <cy@sina.com>
2024-05-08 14:05:54 +08:00 · 2024-05-08 14:05:54 +08:00 · c8467949d1
parent 0f330a25a8
commit c8467949d1
1 changed files with 144 additions and 201 deletions
--- 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=>点击本结束跳转:><http://https://segmentfault.com/blog/ingood>
-
-#### 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{
-  <<interface>>
-  + 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{
+  <<interface>>
+  + 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/#/)