From bd4381b537a43a37f6751ab57b3874e31e5a40f8 Mon Sep 17 00:00:00 2001
From: "chen.yang" <chen.yang@yuzhen-iot.com>
Date: Tue, 3 Aug 2021 11:03:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20VSCode+Markdown+UML.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: chen.yang <chen.yang@yuzhen-iot.com>
---
 .../VSCode/VSCode_Markdown_UML.md             | 171 ++++++++++++++++++
 1 file changed, 171 insertions(+)
 create mode 100644 Software/Applications/VSCode/VSCode_Markdown_UML.md

diff --git a/Software/Applications/VSCode/VSCode_Markdown_UML.md b/Software/Applications/VSCode/VSCode_Markdown_UML.md
new file mode 100644
index 0000000..0819b21
--- /dev/null
+++ b/Software/Applications/VSCode/VSCode_Markdown_UML.md
@@ -0,0 +1,171 @@
+# VSCode+Markdown+UML
+
+首先 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 甘特图
+
+```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
+```
+
+## 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
+```
+
+## 5.Mermaid 横向流程图
+
+```mermaid
+graph LR
+A[方形] --> B(圆角)
+B --> C{条件a}
+C --> |a=1| D[结果1]
+C --> |a=2| D[结果2]
+F[横向流程图]
+```
+
+## 6.Mermaid 纵向流程图
+
+```mermaid
+graph TD
+A[方形] --> B(圆角)
+B --> C{条件a}
+C --> D[结果1]
+C --> E[结果2]
+F[竖向流程图]
+```
+
+## 7.Mermaid 时序图
+
+```mermaid
+sequenceDiagram
+participant Alice
+participant Bob
+Alice->John:Hello John, how are you?
+loop Healthcheck
+　　John->John:Fight against hypochondria
+end
+Note right of John:Rational thoughts <br/>prevail...
+John-->Alice:Great!
+John->Bob: How about you?
+Bob-->John: Jolly good!
+```