Mermaid的基本使用

Mermaid的基本使用

Mermaid简介

Mermaid这个单词是美人鱼的意思,不过在这里是指一个受Markdown的“文本定义”所启发的一款开源js库,它可以用类似于写Markdown的方式来画流程图、状态图、时序图、甘特图,并使用js进行本地渲染,广泛集成于许多Markdown编辑器中。

Mermaid被提名并赢得了js开源奖(2019)类别“最另人兴奋的技术应用”。
美人鱼的主要目的是帮助文档跟上开发进度,这是Mermaid官方文档

怎样让Markdown解析你的mermaid脚本?

如下图所示,在markdown里用三个反引号开始(并在旁边写上mermaid),然后用三个反引号结束(其实就是代码块标记),然后在这两对三反引号里写marmaid语句,即可让markdown编辑器识别到这是mermaid
-w544

当然,其本质是需要一个class="mermaid"的div标签对,只不过上述写法markdown编辑器会把它解析为class="mermaid"的div标签对。

流程图

这是流程图官方文档

流程图基本语法

如下所示,用graph关键字表示这是“流程图”,后面跟着是”方向关键字“,然后换行缩进,就可以开始写具体语句了

graph 方向关键字
    其它语句

方向关键字

方向关键字用两个字母表示,如下表所示(其中从上到下有两种写法)

方向关键字 英文原意 中文解释
TB Top Bottom 从上到下
BT Bottom Top 从下到上
LR Left Right 从左到右
RL Right Left 从右到左
TD Top Down 从上到下

从上到下

graph TD
    开始 --> 结束

从下到上

graph BT
    开始 --> 结束

从左到右

graph LR
    开始 --> 结束

从右到左

graph RL
    开始 --> 结束

流程图节点形状

直角矩形: 方括号表示直角矩形,id只是一个标记,不一定要写成id,可以写成任意字母,比如aa、bb、abc等等,中括号表示直角矩形

graph LR
    id[直角矩形节点]

默认直角矩形: 当然不写id和方括号,直接写节点内文本,默认也是直角矩形,但实际使用一般不会这么用,因为这样写,一方面不能换行、不能有空格,另一方面也需要id来标记指向其它节点

graph LR
    默认直角矩形节点

圆角矩形: 圆括号表示圆角矩形

graph LR
    id(圆角矩形节点)

子程序: 双方括号表示子程序(部分库不支持,比如本博客所用的库就不支持)

graph LR
    id[[子程序节点]]

-w225


圆柱形: 方括号里面套圆括号表示圆柱形节点(一般表示数据库,部分不支持,比如本博客所用的库就不支持)

graph LR
    id[(圆柱形数据库节点)]

-w90


圆形: 双圆括号表示圆形节点

graph LR
    id((圆柱形数据库节点))

右向旗帜: 左大于号+右方括号,表示右向旗帜状节点

graph LR
    id>右向旗帜状节点]

菱形: 花括号表示菱形节点,一般用于条件判断

graph LR
    id{菱形节点}

六角矩形: 双花括号表示六角矩形(本博客所用库不支持)

graph LR
    id1{{This is the text in the box}}

-w231


平行四边形: 方括号里套双斜杠,表示平行四边形(本博客所用库不支持)

graph TD
    id1[/This is the text in the box/]

-w240


反向平行四边形: 方括号里套双反斜杠,表示反向平行四边形(本博客所用库不支持)

graph TD
    id1[\This is the text in the box\]

-w224


正梯形: 方括号内套正反斜杠,表示正梯形

graph TD
    A[/Christmas\]

-w125


反梯形: 方括号内套反正斜杠,表示反梯形

graph TD
    A[\Christmas/]

-w138


节点内换行: 节点内文字换行用html的换行标记<br>

graph LR
    id[节点里面<br>文本换行]

节点内显示关键字符号: 要把各种关键字符号作为文字显示在节点内(如在节点内显示圆括号、方括号、花括号及其它的,如大于号,正反斜杠等等),只需要加双引号就行

graph LR
    id["(圆括号)<br>[方括号]<br>{花括号}<br>/正斜杠/<br>\反斜杠\<br>/正反斜杠\<br>\反正斜杠/<br>>大于号"]

节点间的连线

带箭头连线

graph LR
    A-->B

无箭头连线

graph LR
    A---B

带文字无箭头连线
写法一:

graph LR
    A--This is the text---B

写法二:

graph LR
    A---|This is the text|B

带文字箭头连线
写法一:

graph LR
    A--text-->B

写法二:

graph LR
    A-->|text|B

带箭头虚线连线

graph LR
   A-.->B;

带文字箭头虚线连线

graph LR
   A-.这是文字.->B;

无箭头粗线
无箭头细线的横杠换成等号

graph LR
   A===B;

带箭头粗线
带箭头细线的横杠换成等号

graph LR
   A==>B;

带文字箭头粗线

graph LR
   A==文字==>B;

链式连线
部分库不支持这种写法,比如本博客所用的库就不支持

graph LR
    A--文字-->B--文字-->C--文字-->D

本博客所用的库要用这种写法

graph LR
    A--文字-->B
    B--文字-->C
    C--文字-->D

“&”符号的应用
这种图

graph TB
    A --> C
    A --> D
    B --> C
    B --> D

可以用“&”符号简写成,但是本博客所用库不支持这种写法

graph TB
    A&B-->C&D

还有比如这种

graph LR
    A --> B
    A --> C
    B --> D
    C --> D

可以简写成这种,它的意思是,a连接到b和c,b和c都连接到d,不过本博客所用库不支持

graph LR
   a-->b&c-->d

综合应用示例

更多使用方式请看官方文档

序列图

序列图官方文档
-w410

类图

类图官方文档
-w357

状态图

状态图官方文档
-w223

实体关系图

实体关系图官方文档
-w338

用户旅行图

用户旅行图官方文档
-w707

甘特(Gant)图

甘特图官方文档
-w758

饼状图

饼状图官方文档
-w468


参考:
Mermaid官方文档
基于Mermaid的时序图、流程图和甘特图

打赏
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x

扫码在手机查看
iPhone请用自带相机扫
安卓用UC/QQ浏览器扫

Mermaid的基本使用