markdown 使用mermaid语法画流程图

MarkDown画流程图

MarkDown支持mermaid语法，可以用MarkDown画流程图！

效果图

graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D

链接

长方形

圆

圆角长方形

菱形

graph LR
rect["[]表示正方形"] -->roundedRect("()表示圆角矩形")
roundedRect --> condition{"{}表示菱形"}
condition -->|"||用来在线条间插入文字"| result1["再来个[]"]
condition -->|"||用来在线条间插入文字"| result2["再来个[]"]

||用来在线条间插入文字

||用来在线条间插入文字

[]表示正方形

()表示圆角矩形

{}表示菱形

再来个[]

再来个[]

流程图方向

流程图方向有下面几个值

• TB 从上到下
• BT 从下到上
• RL 从右到左
• LR 从左到右
• TD 同TB

graph TB
从上到下-->B

从上到下

B

graph LR
从左到右-->B

从左到右

B

graph BT
从下到上-->B

从下到上

B

graph RL
从右到左-->B

从右到左

B

基本图形

• id + [文字描述]矩形
• id + (文字描述)圆角矩形
• id + >文字描述]不对称的矩形
• id + {文字描述}菱形
• id + ((文字描述))圆形

graph TD
    id[带文本的矩形]
    id4(带文本的圆角矩形)
    id3>带文本的不对称的矩形]
    id1{带文本的菱形}
    id2((带文本的圆形))

带文本的矩形

带文本的圆角矩形

带文本的不对称的矩形

带文本的菱形

带文本的圆形

节点之间的连接

• A --> B A带箭头指向B
• A — B A不带箭头指向B
• A -.- B A用虚线指向B
• A -.-> B A用带箭头的虚线指向B
• A ==> B A用加粗的箭头指向B
• A – 描述 — B A不带箭头指向B并在中间加上文字描述
• A – 描述 --> B A带箭头指向B并在中间加上文字描述
• A -. 描述 .-> B A用带箭头的虚线指向B并在中间加上文字描述
• A == 描述 ==> B A用加粗的箭头指向B并在中间加上文字描述

graph LR
    A[A] --> B[B] 
    A1[A] --- B1[B] 
    A4[A] -.- B4[B] 
    A5[A] -.-> B5[B] 
    A7[A] ==> B7[B] 
    A2[A] -- 描述 --- B2[B] 
    A3[A] -- 描述 --> B3[B] 
    A6[A] -. 描述 .-> B6[B] 
    A8[A] == 描述 ==> B8[B]

描述

描述

描述

描述

A

B

A

B

A

B

A

B

A

B

A

B

A

B

A

B

A

B

参考:https://www.jianshu.com/p/b421cc723da5