0%

如何在Markdown中画流程图

Posted on In

如何在 Markdown 中画流程图呢？当然是用mermaid了，mermaid 支持三种图形的绘制, 分别是流程图, 时序图和甘特图, 本篇文章只介绍了 mermaid 中流程图在 markdown 的使用(现在简书的 markdown 还不支持 mermaid，我本地使用的是MWeb)。

如何在 markdown 中使用 mermaid

1.png
流程图方向有下面几个值

  • TB 从上到下
  • BT 从下到上
  • RL 从右到左
  • LR 从左到右
  • TD 同 TB #####示例
    从上到下
1
mermaid
2
graph TD
3
   A --> B

效果：22.png

从左到右

1
graph LR
2
   A --> B

效果：3.png

基本图形

  • id + [文字描述]矩形
  • id + (文字描述)圆角矩形
  • id + >文字描述]不对称的矩形
  • id + {文字描述}菱形
  • id + ((文字描述))圆形
示例
1
mermaid
2
graph TD
3
    id[带文本的矩形]
4
    id4(带文本的圆角矩形)
5
    id3>带文本的不对称的矩形]
6
    id1{带文本的菱形}
7
    id2((带文本的圆形))

效果：4

节点之间的连接

  • 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 并在中间加上文字描述
示例
1
mermaid
2
graph LR
3
    A[A] --> B[B]
4
    A1[A] --- B1[B]
5
    A4[A] -.- B4[B]
6
    A5[A] -.-> B5[B]
7
    A7[A] ==> B7[B]
8
    A2[A] -- 描述 --- B2[B]
9
    A3[A] -- 描述 --> B3[B]
10
    A6[A] -. 描述 .-> B6[B]
11
    A8[A] == 描述 ==> B8[B]

效果：6

子流程图

格式

1
subgraph title
2
    graph definition
3
end

#####示例

1
mermaid
2
graph TB
3
    c1-->a2
4
    subgraph one
5
    a1-->a2
6
    end
7
    subgraph two
8
    b1-->b2
9
    end
10
    subgraph three
11
    c1-->c2
12
    end

效果：7

自定义样式

语法：style id 具体样式 #####示例

1
mermaid
2
graph LR
3
    id1(Start)-->id2(Stop)
4
    style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5
5
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5

效果：9

demo

绘制一个流程图,找出 A、 B、 C 三个数中最大的一个数。 #####写法

1
mermaid
2
graph LR
3
    start[开始] --> input[输入A,B,C]
4
    input --> conditionA{A是否大于B}
5
    conditionA -- YES --> conditionC{A是否大于C}
6
    conditionA -- NO --> conditionB{B是否大于C}
7
    conditionC -- YES --> printA[输出A]
8
    conditionC -- NO --> printC[输出C]
9
    conditionB -- YES --> printB[输出B]
10
    conditionB -- NO --> printC[输出C]
11
    printA --> stop[结束]
12
    printC --> stop
13
    printB --> stop

效果：99