From ac615c8d8b1421c445e3bcad51ccddbf968a60ad Mon Sep 17 00:00:00 2001
From: "chen.yang" <chen.yang@yuzhen-iot.com>
Date: Wed, 11 Aug 2021 09:30:58 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=20Mermaid=20=E5=9B=BE.?=
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             | 100 +++++++++++++++++-
 1 file changed, 96 insertions(+), 4 deletions(-)

diff --git a/Software/Applications/VSCode/VSCode_Markdown_UML.md b/Software/Applications/VSCode/VSCode_Markdown_UML.md
index 9a5b30f..b9ef119 100644
--- a/Software/Applications/VSCode/VSCode_Markdown_UML.md
+++ b/Software/Applications/VSCode/VSCode_Markdown_UML.md
@@ -197,7 +197,9 @@ classDiagram
 Animal..>Food
 ```
 
-## 5.Mermaid 横向流程图
+## 5.Mermaid 流程图
+
+### 5.1.横向流程图
 
 ```mermaid
 flowchart LR
@@ -208,7 +210,7 @@ C --> |a=2| D[结果2]
 F[横向流程图]
 ```
 
-## 6.Mermaid 纵向流程图
+### 5.2.纵向流程图
 
 ```mermaid
 flowchart TD
@@ -222,7 +224,33 @@ subgraph F[F]
 end
 ```
 
-## 7.Mermaid 时序图
+### 5.3.超大流程图样例
+
+```mermaid
+graph TB
+    sq[Square shape] --> ci((Circle shape))
+
+    subgraph A
+        od>Odd shape]-- Two line<br/>edge comment --> ro
+        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
+        di==>ro2(Rounded square shape)
+    end
+
+    %% Notice that no text in shape are added here instead that is appended further down
+    e --> od3>Really long text with linebreak<br>in an Odd shape]
+
+    %% Comments after double percent signs
+    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
+
+    cyr[Cyrillic]-->cyr2((Circle shape Начало));
+
+     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
+     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
+     class sq,e green
+     class di orange
+```
+
+## 6.Mermaid 时序图
 
 ```mermaid
 sequenceDiagram
@@ -238,6 +266,70 @@ John->Bob: How about you?
 Bob-->John: Jolly good!
 ```
 
-## 8.外部参考资料
+## 7.Mermaid 状态图
+
+```mermaid
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+```
+
+## 8.Entity Relationship Diagrams
+
+```mermaid
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+```
+
+## 9.User Journey Diagram
+
+```mermaid
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+```
+
+## 10.Pie chart diagrams
+
+```mermaid
+pie title Pets adopted by volunteers
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+```
+
+## 11.Requirement Diagram
+
+```mermaid
+requirementDiagram
+
+requirement test_req {
+  id: 1
+  text: the test text.
+  risk: high
+  verifymethod: test
+}
+
+element test_entity {
+  type: simulation
+}
+
+test_entity - satisfies -> test_req
+```
+
+## 12.外部参考资料
 
 1. [About Mermaid](https://mermaid-js.github.io/mermaid/#/)