简介

Mermaid 是一种基于JavaScript的绘图工具，可用于画流程图、状态图、时序图、甘特图等。它使用 JS 进行本地渲染，被广泛集成于许多 Markdown 编辑器（如Typora）中。

Mermaid内绘制的图有：

图形	标记
饼状图	`pie`
流程图	`graph`
序列图	`sequenceDiagram`
类图	`classDiagram`
状态图	`stateDiagram`
用户旅程图	`journey`

饼状图

第一行使用pie标记
- showData可在图例后方显示具体的数值（笔者使用版本暂不支持）
使用title关键字赋予饼状图标题(可选)
数据部分语法为"分区名": 数值
- 数值最多支持两位小数
- 会使用百分比标注实际占比

示例：

pie %% showData 在图例后方显示具体的数值，笔者使用版本暂不支持
    title 喜欢生么动物
    "猫" : 20
    "狗" : 20
    "鸟" : 10

效果：

流程图

第一行使用graph进行标记，使用BT、LR、RL标记布局方向
- TB或TD：从上至下（默认）
- BT ：从下至上
- LR：从左至右
- RL：从右至左

节点

直接写内容，默认为矩形，内容不支持空格。

使用 名称 + 括号包裹的内容 格式，形状有括号决定，内容支持空格

括号	形状
[]	矩形
()	圆角矩形
([])	运动场形
[[]]	子程序形
[()]	圆柱形
(())	圆形
{}	菱形
{{}}	六边形
[//]	平行四边形
[\]	反向平行四边形
[/]	梯形
[/]	倒梯形
补充，下方未进行演示
>]	非对称形
((()))	双层圆形

效果图如下：

连接线

标记	样式
-->	无文本箭头
--文本--> 或 -->	文本	有文本箭头
==>	无文本粗箭头
==文本==> 或 ==>	文本	有文本粗箭头
-.->	无文本虚线箭头
-.文本.-> 或 -.->	文本	有文本虚线箭头

可以去掉箭头>标记，形成无箭头连接线
可以通过使用----、-...-可以将连接线的延长
其他箭头，需要修改关键字为flowchart，原来的连接线渲染效果也会发生变化。

标记样式
o--o 双向圆箭头
<--> 双向箭头
x--x 双向星形箭头

--o, --x也是可以支持的

标记	样式
o--o	双向圆箭头
<-->	双向箭头
x--x	双向星形箭头

示例：

graph LR
    A([Start]) --> B{True or False?}
    B==False==>C[Ok]
    C-.->D{{Retry}}
    D-->B
    C--True-->E([End])

补充

&标记，用来间隔多个节点，简化描述。
```
flowchart 
    a --> b & c --> d
```

子图

需要使用flowchart标记

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

注释

在行首加入%%即可，用法和C语言中的//一样
特殊字符语法

可以通过引号包裹特殊字符，如id1["This is the (text) in the box"]

转义

 flowchart LR
        A["A double quote:#quot;"] -->B["A dec char:#9829;"]

点击交互 click

flowchart LR
    A[<u>百度<u>] %% 跳转到百度
    %% B[调用js] 笔者使用版本暂不支持
    %% 使用时页面必须必须有对应js方法，否则不会成功
    
    click A "http://www.baidu.com"
    %% 可以使用 _self _blank _parent _top 调整，默认为_self
    %% click B call callback() "Tooltip for a callback"

样式和类

可以通过style关键字调整节点的样式，具体可以通过标题跳转到说明文档查看。

样式也可通过类进行管理。

Typora使用之mermaid

简介

饼状图

流程图

待续。。。