如何使用makedown(.md)做流程图

2022-07-11 09:02:44 阅读：143 来源： 互联网

标签：md 流程图 -- -. 样例 two makedown mermaidgraph ###

转：https://blog.csdn.net/weddell/article/details/122390672

1. 使用VSCode, 首先安装 Markdown preview Enhenced

2. 创建一个.md结尾的文件

3. 样例:

样例一 : 基本图形和线型

## 样例1
```mermaid
graph LR
A[方形]
B(圆角)
C{条件a}
D[结果1]
E[结果2]
F((圆形))
G[方形]
X[结果3]

A --实线--> B
B -.虚线.-> A
B --长直线----> G
B --> C
C ==> |粗实线| D
C -.无箭头虚线.- E
C --无箭头实线--- X
B --> F
```

样例2: 扩展图形和线形

## 样例2
```mermaid
flowchart LR
H([体育场形])
I[(圆柱形)]
J[[子程序形]]
K{{六角形}}
L[/平行四边形/]
M[\反向平行四边形\]
N[/梯形\]
O[\反向梯形/]
H <--双向--> I
J x--取消--x K
L o--圆点连接--o M
N --变形--> O
```

样例3: 线性图

### 线型图
```mermaid
graph LR
emperor((朱八八))-.子.->朱五四-.子.->朱四九-.子.->朱百六

朱雄英--长子-->朱标--长子-->emperor
emperor2((朱允炆))--次子-->朱标
朱樉--次子-->emperor
朱棡--三子-->emperor
emperor3((朱棣))--四子-->emperor
emperor4((朱高炽))--长子-->emperor3
```

样例4: 饼形图

### 饼形图
```mermaid
pie
title 为什么总是宅在家里？
"喜欢宅" : 15
"天气太热或太冷" : 20
"穷" : 50
```

样例5: 流程图

### 流程图
```mermaid
graph LR
A[Start] --> B{Is it?};
B -- Yes --> C[OK];
C --> D[Rethink];
D --> B;
B -- No ----> E[End];
```

样例6: 多重链

### 多重链
```mermaid
graph
a --> b & c--> d

A & B--> C & D

X --> M
X --> N
Y --> M
Y --> N
```

样例7: 子图

### 子图
```mermaid
flowchart TB

c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
```

样例8: 注释

### 注释
```mermaid
graph LR
%%这是一条注释，在渲染图中不可见
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```

————————————————
版权声明：本文为CSDN博主「weddell」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weddell/article/details/122390672

标签：md,流程图,--,-.,样例,two,makedown,mermaidgraph,###
来源： https://www.cnblogs.com/gui021/p/16465289.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

如何使用makedown(.md)做流程图