Markdown绘图mermaid实用教程

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码。

点击进入官网
点击进入Github 项目地址

1. mermaid 定义

2. 流程图

• 语法格式如下:

  graph LR; # 其中LR指的是方向
  	A --> B # 不同的箭头表示
  

a. 方向和箭头含义

用词 graph x;	含义	箭头	含义
TB	从上到下	>	添加尾部箭头
BT	从下到上	-	不添加尾部箭头
RL	从左到右	--	单线
LR	从右到左	--text--	单线加文字
		==	粗线
		==text==	粗线加文字
		-.-	虚线
		-.text.-	虚线加文字

b. 节点含义

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

c. 示例

graph LR;
	A>"Ubuntu<br>(Linux)"] -.soft.-> C{
    TV}
	B["MAC"] ==> D((ARM64))
	D--> C
	A --> B

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

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

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

• 多重链

graph LR
   a --> b & c--> d
   
   A & B--> C & D
   
    X --> M
    X --> N
    Y --> M
    Y --> N

• 注释 %%这是一条注释，在渲染图中不可见
• 子图

%%这是一条注释，在渲染图中不可见
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2