rick.chan
parent
0f330a25a8
commit
c8467949d1
|
|
@ -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/#/)
|
||||
|
|
|
|||
Loading…
Reference in New Issue