增加 VSCode+Markdown+UML.
Signed-off-by: chen.yang <chen.yang@yuzhen-iot.com>
This commit is contained in:
parent
b95660b70e
commit
bd4381b537
|
@ -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!
|
||||||
|
```
|
Loading…
Reference in New Issue