Markdown绘图mermaid实用教程

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

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

​​点击进入官网​​​​点​​

​​击进入Github 项目地址​​

1. mermaid 定义

2. 流程图

• 语法格式如下:

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

a. 方向和箭头含义

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

flowchart LR
    A o--o B
    B <--> C
    C x--x D
    
    旧连线 --文本--> 也会不同

• 延长连线：
  增加相应字符即可，如下图中的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