279 lines
5.3 KiB
Markdown
279 lines
5.3 KiB
Markdown
# 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. Mermaid 流程图
|
||
|
||
```mermaid
|
||
flowchart
|
||
Start[开始]
|
||
End[结束]
|
||
Operation([处理块])
|
||
Subroutine[子程序]
|
||
Condition1{是或者不是}
|
||
Condition2{第二个判断}
|
||
Output[输出]
|
||
|
||
Start --> Operation --> Condition1 --> |Yes|End
|
||
Condition1 --> |No|Condition2 --> |Yes|Subroutine --> Operation
|
||
Condition2 --> |No|Output --> End
|
||
```
|
||
|
||
### 1.1. 横向流程图
|
||
|
||
```mermaid
|
||
flowchart LR
|
||
A[方形] --> B(圆角)
|
||
B --> C{条件a}
|
||
C --> |a=1| D[结果1]
|
||
C --> |a=2| D[结果2]
|
||
F[横向流程图]
|
||
```
|
||
|
||
### 1.2. 纵向流程图
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
A[方形] --> B(圆角)
|
||
B --> C{条件a}
|
||
C --> D[结果1]
|
||
C --> E[结果2]
|
||
subgraph F[F]
|
||
direction TB
|
||
G[纵向流程图]
|
||
end
|
||
```
|
||
|
||
### 1.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
|
||
```
|
||
|
||
## 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
|
||
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!
|
||
```
|
||
|
||
## 5. Mermaid 状态图
|
||
|
||
```mermaid
|
||
stateDiagram-v2
|
||
[*] --> Still
|
||
Still --> [*]
|
||
|
||
Still --> Moving
|
||
Moving --> Still
|
||
Moving --> Crash
|
||
Crash --> [*]
|
||
```
|
||
|
||
## 6. Entity Relationship Diagrams
|
||
|
||
```mermaid
|
||
erDiagram
|
||
CUSTOMER ||--o{ ORDER : places
|
||
ORDER ||--|{ LINE-ITEM : contains
|
||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||
```
|
||
|
||
## 7. 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
|
||
```
|
||
|
||
## 8. Pie chart diagrams
|
||
|
||
```mermaid
|
||
pie title Pets adopted by volunteers
|
||
"Dogs" : 386
|
||
"Cats" : 85
|
||
"Rats" : 15
|
||
```
|
||
|
||
## 9. 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
|
||
```
|
||
|
||
## 10. 外部参考资料
|
||
|
||
1. [About Mermaid](https://mermaid-js.github.io/mermaid/#/)
|