当前位置: 代码迷 >> 综合 >> Typora:mermaid语法流程图绘制方法
  详细解决方案

Typora:mermaid语法流程图绘制方法

热度:50   发布时间:2023-11-30 10:35:44.0

方向:

graph或graph TB或graph TD:从上往下
graph BT:从下往上
graph LR:从左往右
graph RL:从右往左

结点:

无名字的结点:直接写内容,此时结点边框为方形;节点内容不支持空格
有名字的结点:节点名后书写内容,内容左右有特定符号,结点边框由符号决定;节点内容可以有空格

形状

    默认方形id1[方形]id2(圆边矩形)id3([体育场形])id4[[子程序形]]id5[(圆柱形)]id6((圆形))id1{菱形}id2{
   {六角形}}id3[/平行四边形/]id4[\反向平行四边形\]id5[/梯形\]id6[\反向梯形/]
默认方形
方形
圆边矩形
体育场形
子程序形
圆柱形
圆形
菱形
六角形
平行四边形
反向平行四边形
梯形
反向梯形

箭头
实线箭头:分为无文本箭头和有文本箭头,有文本箭头有2种书写格式

	a-->b--文本1-->c-->|文本2|d
文本1
文本2
a
b
c
d

? 粗实线箭头:分为无文本箭头和有文本箭头

a==>b==文本==>c
文本
a
b
c

? 虚线箭头:分为无文本箭头和有文本箭头

a-.->b-.文本.->c
文本
a
b
c

? 无箭头线:即以上三种连线去掉箭头后的形式

a---b
b--文本1!---c
c---|文本2|d
d===e
e==文本3===f
f-.-g
g-.文本.-h
文本1!
文本2
文本3
文本
a
b
c
d
e
f
g
h

? 其他连线:需要将graph关键字改为flowchart,除了新增加的连线形式外,上面三种线的渲染效果也会不同

A o--o B
B <--> C
C x--x D
A
B
C
D

?

? 延长连线:增加相应字符即可,如下图中的B到E,连线中增加了一个-。字符可多次添加。

A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B --->|No| E[End];
Yes
No
Start
Is it?
OK
Rethink
End

? 多重链:使用&字符,或者单个描述

 a --> b & c--> d  A & B--> C & DX --> MX --> NY --> MY --> N
a
b
c
d
A
B
C
D
X
M
N
Y

子图:需要将graph关键字改为flowchart,在代码段的开始加入subgraph,尾部加入end

flowchart TBc1-->a2subgraph onea1-->a2endsubgraph twob1-->b2endsubgraph threec1-->c2endone --> twothree --> twotwo --> c2
three
one
c2
c1
two
b2
b1
a2
a1

注释:在行首加入%%即可