0
点赞
收藏
分享

微信扫一扫

Markdown绘图mermaid实用教程


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

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

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

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

1. mermaid 定义

Markdown绘图mermaid实用教程_官网

2. 流程图

  • 语法格式如下:

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

Markdown绘图mermaid实用教程_官网_02

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


Markdown绘图mermaid实用教程_流程图_03


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



Markdown绘图mermaid实用教程_html_04


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

旧连线 --文本--> 也会不同


Markdown绘图mermaid实用教程_html_05


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


Markdown绘图mermaid实用教程_流程图_06

Markdown绘图mermaid实用教程_html_07

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

%%这是一条注释,在渲染图中不可见
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


Markdown绘图mermaid实用教程_Markdown_08


举报

相关推荐

0 条评论