如何在Markdown中画流程图

如何在Markdown中画流程图

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

如何在markdown中使用mermaid
    mermaid
         graph 流程图方向
        流程图的内容

流程图方向有下面几个值

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

从上到下

mermaid
graph TD
   A --> B

效果:

graph TD A --> B

从左到右

graph LR
   A --> B

效果:

graph LR A --> B
基本图形
  • id + [文字描述]矩形
  • id + (文字描述)圆角矩形
  • id + >文字描述]不对称的矩形
  • id + {文字描述}菱形
  • id + ((文字描述))圆形
示例
mermaid
graph TD
    id[带文本的矩形]
    id4(带文本的圆角矩形)
    id3>带文本的不对称的矩形]
    id1{带文本的菱形}
    id2((带文本的圆形))

效果:

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并在中间加上文字描述
示例
mermaid
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]

效果:

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]
子流程图

格式

subgraph title
    graph definition
end
示例
mermaid
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

效果:

graph TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end
自定义样式

语法:style id 具体样式

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

效果:

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

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

写法
mermaid
graph LR
    start[开始] --> input[输入A,B,C]
    input --> conditionA{A是否大于B}
    conditionA -- YES --> conditionC{A是否大于C}
    conditionA -- NO --> conditionB{B是否大于C}
    conditionC -- YES --> printA[输出A]
    conditionC -- NO --> printC[输出C]
    conditionB -- YES --> printB[输出B]
    conditionB -- NO --> printC[输出C]
    printA --> stop[结束]
    printC --> stop
    printB --> stop

效果:

graph LR start[开始] --> input[输入A,B,C] input --> conditionA{A是否大于B} conditionA -- YES --> conditionC{A是否大于C} conditionA -- NO --> conditionB{B是否大于C} conditionC -- YES --> printA[输出A] conditionC -- NO --> printC[输出C] conditionB -- YES --> printB[输出B] conditionB -- NO --> printC[输出C] printA --> stop[结束] printC --> stop printB --> stop
博客
32132
07-14 362
07-12 294
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值