mermaid
[ˈmɜː(r)ˌmeɪd]
美人鱼
读音是“莫美德”
- 不丑，还挺好看
- 没有开始、结束的套路代码，只有图类型名称
在线编辑：https://mermaid-js.github.io/mermaid-live-editor
Mermaid 本质是一种标记语言，借由一个解析库 将文本 「翻译渲染」成「图画」。
虽然通过一个纯文本编辑器，例如：写字板，我们可以撰写 Mermaid 文本，但显然不能指望这样就可以「渲染」出「绘图」来。这和 Markdown 的原理是一样的，渲染需要专门的编辑器。 好消息是，Mermaid 已经被很多 Markdown 编辑器直接或间接支持。 也就是说直接用现有的 Markdown 编辑器就可以上手一试了，几乎没有额外负担。
这里是部分支持 Mermaid 的编辑器
-
印象笔记 Markdown 笔记
-
有道云笔记（未实测，希望大家补充纠正）
-
Typora （火箭君推荐）
-
MWeb（未实测，希望大家补充纠正）
-
VSCode + Mermaid 插件
-
Atom + Mermaid 插件
-
MermaidJS 官方网页版 编辑器
需要注意的是，由于 Mermaid 本身还在发展，并非所有特性都能被所有 Markdown 编辑器支持。不过，常见的流图编辑模式已经比较成熟，大多被支持。至于具体渲染效果如何，我们还是要以编辑器的实际输出为准。
流程图
flow chart 流程图
-
类型名称参数：graph
-
方向：TD，top、down，即从上到下，有四种：LR、RL，TB、BT
-
节点：A[Start]。A指代节点名称，中括号里为节点内容，大括号是菱形，中括号是长方形。
-
箭头：最少两个短横线，短横线的数量代表长度。
-
注释：用2个竖线之间的内容为注释，后加空格和节点名称分开。
-
每句结束是分号
graph LR
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
D --> B;
B ---->|No| E[End];
方向
有四种：
LR： left right，从左到右
RL：right left
TB：top bottom，从上到下，也可以是TD：top down
BT：bottom top
序列图
sequence diagram
序列图；时序图
-
类型名称参数：sequenceDiagram
-
参与者：participant John
-
注释：冒号后内容
-
箭头：实线箭头
->>，虚线箭头-->>,
sequenceDiagram
participant John
participant Alice
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
甘特图
-
gantt：类型名称参数
-
title：标题
-
dateFormat：时间日期格式
-
section：部分
-
A task :a1, 2014-01-01, 30d：冒号前内容，冒号后：指代名称，开始时间，持续时间
| 关键字 | head含义 |
|---|---|
| title | 标题 |
| dateFormat | 日期格式 |
| section | 模块 |
| Completed | 已经完成 |
| Active | 当前正在进行 |
| Future | 后续待处理 |
| crit | 关键阶段 |
| 日期缺失 | 默认从上一项完成后 |
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2021-06-01, 30d
Another task :after a1 , 20d
section 无人船
第一阶段 :2021-06-07 , 82d
第二阶段 : 24d
大的例子
gantt
dateFormat YYYY-MM-DD
title 甘特图示例
section 开始阶段
完成任务 :done, des1, 2014-01-06,2014-01-08
激活任务 :active, des2, 2014-01-09, 3d
未来的任务 : des3, after des2, 5d
未来的任务2 : des4, after des3, 5d
section 紧急任务
在关键线完成任务 :crit, done, 2014-01-06,24h
实现解析器和JSON :crit, done, after des1, 2d
为解析器创建测试 :crit, active, 3d
关键线的未来任务 :crit, 5d
为渲染器创建测试 :2d
添加到 mermaid :1d
section 文档
描述甘特语法 :active, a1, after des1, 3d
将甘特图添加到演示页面 :after a1 , 20h
向演示页面添加另一个图表 :doc1, after a1 , 48h
section 最后阶段
描述甘特语法 :after doc1, 3d
将甘特图添加到演示页面 : 20h
向演示页面添加另一个图表 : 48h
饼状图
-
pie：类型名称参数
-
title：标题
-
数据不是百分比，原始数据计算得出百分比
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
"钠" : 10
节点形状
长方形节点
长方形，中括号
graph LR
id[长方形节点];
圆角节点
长方形圆角，小括号
graph LR
id(圆角节点);
圆形节点
圆节点(The form of a circle)
双小括号
graph LR
id((圆形节点));
非对称节点
非对称节点(asymetric shape)
只有一半中括号
graph LR
id>非对称节点]
菱形节点
菱形节点(rhombus)
大括号
graph LR
id{菱形节点}
连接线
节点间的连接线有多种形状，而且可以在连接线中加入标签。
箭头形连接
graph LR;
A-->B;
开放连接
graph LR
A --- B
标签连接
graph LR
A -- This is the label text --- B;
箭头标签连接
graph LR
A-- text -->B
虚线连接
(dotted link,点连线)
graph LR
A-.->B
A-.-.B
标签虚线
graph LR
A-.text.->B
粗实线
graph LR
A==>B
A===B
标签粗线
graph LR
A==text==>B
A==text===B
序列图
sequenceDiagram
participant John
participant Alice
Alice-xJohn:Hello John,how are you?
John-->>Alice:Great!
顺序
参与者(participant)的顺序
participant
别名
as
participant Alice as 张三
箭头
消息的语法：实线或者虚线的使用：
[Actor][Arrow][Actor]:Message text
Arrow的六种样式：
-
->：实线
-
-->：虚线
-
->>：实线箭头
-
-->>：虚线箭头
-
-x：实线箭头×
-
--x：虚线箭头×
sequenceDiagram
Alice->John: Hello John, how are you ?
John-->Alice:Great!
Alice->>John: dont borther me !
John-->>Alice:Great!
Alice-xJohn: wait!
John--xAlice: Ok!
便签
给序列图增加便签：
具体规则：
[right of | left of | over][Actor]:Text
sequenceDiagram
participant A
Note left of A: 标签内容
跨越两个Actor的便签：
sequenceDiagram
Alice->>John:Hello John, how are you?
Note over Alice,John:一个典型互动
循环
在序列图中，也可以使用循环，具体规则如下：
Loop text
... statements...
end
示例
sequenceDiagram
Alice->>John: Hello!
loop 每次重复
John->>Alice:Great!
end
选择
在序列图中选择的表达。规则如下：
alt Describing text
...statements...
else
...statements...
end
或者使用opt(推荐在没有else的情况下使用)
opt Describing text
...statements...
end
示例
sequenceDiagram
participant Alice as 张三
participant Bob as 李四
Alice->>Bob: Hello, how are you?
alt 生病了
Bob->>Alice:很糟糕
else 健康的
Bob->>Alice:清新如雏菊
end
opt 额外回复
Bob->>Alice:感谢问候
end