在Markdown中使用Mermaid来绘制流程图

1.流程图定义与节点名称

定义代码:

flowchart LR
    A[Start] --> B

注意:在使用的时候一定要将该部分的内容包含到代码块中

演示效果:

Start
Go

2.流程图的方向

所以一般是从左到右,从上到下

TOP BOTTOM LEFT RIGHT

分为4种

  • TD /TB (TOP TO BOTTOM)
  • BT
  • LR
  • RL

演示TB,代码如下:


flowchart TB
    A --> B

效果如下:

A
B

其他方向的流程图类同


3.节点形状

默认的节点形状是长方形,也可以设置为其他形状

演示代码:


flowchart LR

    A(圆角矩形) -.-B([椭圆形]) -.- C((圆形))
    
    E[[subroutine]] -.- F>非对称形状] -.- G{菱形} -.- H{{六角形}}
    
    I[/平行四边形/] -.- J[\平行四边形\] -.- K[\上梯形/] -.- L[/下梯形\]

演示效果:

圆角矩形
椭圆形
圆形
subroutine
非对称形状
菱形
六角形
平行四边形
平行四边形
上梯形
下梯形

4.节点连接线

连接线类型表示符号加长表示
箭头–>—>
直线----
虚线-.--…-
加粗箭头==>===>
加粗直线======
虚线箭头-.->-…->

注意: 节点连接线的标识符最起码是三个以上,1个解析不出来的,2个解析器认为是文字,3个-表示的是箭头直线,当-的个数越多,连接线的长度就会越长!

当要在箭头上写文字的时候,可以先要连接线类型写好,两个标识符,再写你想要的文字,再将连接线的类型写完整,如同--你好哇-->,-.王摇摆.->

演示代码:


flowchart LR
A1 --箭头和文本-->  B1 -->|箭头和文本| C1 --> D1

A2 ==加粗直线箭头==> B2 ==> C2

A3 --无箭头直线--- B3 ---|无箭头直线| C3 ==无箭头的粗直线=== D3 

A4 -.虚线.-B4 -.- C4 --> D4 

演示效果:

箭头和文本
箭头和文本
加粗直线箭头
无箭头直线
无箭头直线
无箭头的粗直线
虚线
虚线箭头
A1
B1
C1
D1
A2
B2
C2
A3
B3
C3
D3
A4
B4
C4
D4

5.多节点连接

5.1 一对多

演示代码:(常规版本)


flowchart LR
    A --> B
    A --> C
    
    B --> D
    C --> D

演示代码:(简化版本)


flowchart LR
    A --> B & C --> D

演示效果:

A
B
C
D

5.2 多对多

演示代码:(简化版本)


flowchart TD
    A & B ==> C & D 

演示效果:

A
B
C
D

基于以上知识基本上流程图就完全可以用代码来实现了

一个简单的实例:

假的
开始
是真的吗?
结束
C
再考虑一下

代码:

flowchart TD

    A[开始] --> B[是真的吗?]
    B --假的--> E[结束]
    B ----> C 
    C --> D[再考虑一下]
    D --> B

6.其他类型的箭头

类型表示方法
箭头–>
黑圆–o
黑×–x

演示代码:


flowchart LR
    A --> B
    
    B --x C
    
    C --o D

演示效果:

A
B
C
D

注意,箭头是可以双向的,不过要注意,箭头还是3个标识符起步,少了是不行的

效果如下:

A
B
C
D
A1
B1

7.特殊字符

7.1 如何表示三种括号?

因为在mermaid中大小中三种括号用于表示流程图的形状了
要单独使用他们的话,要进行转义使用
使用方法:正常编写,然后使用双引号""括起来即可

演示代码:


flowchart LR
    A["[Test]"] --> B


演示效果:

[Test]
B

7.2 如何表示引号?

使用HTML中的引号标识符即可#quot;

演示代码:


flowchart LR
    A["来个引号#quot;"] --> B

演示效果:

flowchart LR
    A["来个引号#quot;"] --> B

7.3 表示美元符号

演示代码:


flowchart LR
    A["美元符号#36;"] --> B

演示效果:

美元符号$
B

ENDING

演示代码:


flowchart LR
    A["#128512;"] 

演示效果:

😀

在学会了Markdown之后再使用mermaid,简直是起飞,把画图的过程可以当做写代码一样,很舒服,这种感觉很好,继续学习吧。
2022年07月07日10:25:02

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王摇摆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值