补充 Mermaid 图.

Signed-off-by: chen.yang <chen.yang@yuzhen-iot.com>
This commit is contained in:
chen.yang 2021-08-11 09:30:58 +08:00
parent b7ac1276d5
commit ac615c8d8b
1 changed files with 96 additions and 4 deletions

View File

@ -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/#/)