概述

什么是Mermaid?

  • Mermaid是一种基于Javascript的绘图工具，使用类似于Markdown的语法，使用户可以方便快捷地通过代码创建图表
  • 项目地址：https://github.com/mermaid-js/mermaid

怎么使用Mermaid?

  • 使用特定的Mermaid渲染器
  • 使用集成了Mermaid渲染功能的Markdown编辑器，如Joplin、Typora，使用时，需要将代码块的语言选择为Mermaid

Mermaid能绘制哪些图？

  • 饼状图：使用 pie 关键词，具体用法后文将详细介绍
  • 流程图：使用 graph 关键词，具体用法后文将详细介绍
  • 序列图：使用 sequenceDiagram 关键词
  • 甘特图：使用 gantt 关键词
  • 类图：使用 classDiagram 关键词
  • 状态图：使用 stateDiagram 关键词
  • 用户旅程图：使用 journey 关键词

实例

document.write(“graph LR\nemperor((朱八八))-.子.->father(朱五四)-.子.->朱百六\n\n朱雄英–长子–>朱标–长子–>emperor\n朱樉–次子–>emperor\n朱棡–三子–>emperor\nemperor3((朱棣))–四子–>emperor\nemperor4((朱高炽))–长子–>emperor3\n\n”);

以上是概述，下面详细介绍饼状图和流程图的语法。其他图的语法可访问上文给出的项目地址，自行学习。（记得挂梯子）

饼状图

  • 在线渲染器：Online FlowChart & Diagrams Editor
  • 语法
    1. 从 pie 关键词开始图表
    2. 然后使用 title 关键词及其在字符串中的值，为饼图赋予标题（可选）
    3. 数据部分
    • 在 ” ” 内写上分区名
    • 分区名后使用 : 作为分隔符
    • 分隔符后写上数值，最多支持2位小数 —— 数据以百分比的形式展示
      • 实例
document.write(“pie\n title:为什么总是宒在家里?\n \”喜欢宒\”: 15\n \”天气太热或太冷\”: 20\n \”穷\”:500\n\n”);

流程图

  • 在线渲染器：Online FlowChart & Diagrams Editor

实例

document.write(“graph LR\n A[Start] –> B{Is it?};\n B — Yes –> C[OK];\n C –> D[Rethink];\n D –> B;\n B — No –>E[End];\n\n”);

方向：用于开头，声明流程图的方向。
– graph或graph TB或graph TD：从上往下
– graph BT：从下往上
– graph LR：从左往右
– graph RL：从右往左

结点
– 无名字的结点：直接写内容，此时结点边框为方形；节点内容不支持空格
– 有名字的结点：节点名后书写内容，内容左右有特定符号，结点边框由符号决定；节点内容可以有空格

下面的实例中，没有为graph指定方向，因此默认是从上往下的。但是由于各个结点之前没有箭头，所以他们都处于同一排。id1-id6是节点名，可随意定义。
document.write(“graph\n 默认方形\n id1[方形]\n id2(圆边矩形)\n id3([体育场形])\n id4[[子程序形]]\n id5[(圆柱形)]\n id6((圆形))\n”);
document.write(“graph\n id1{菱形}\n id2{{六角形}}\n id3[/平行四边形/]\n id4[\\反向平行四边形\\]\n id5[/梯形\\]\n id6[\\反向梯形/]\n”);

连线样式
– 实线箭头：分为无文本箭头和有文本箭头，有文本箭头有2种书写格式

document.write(“graph LR\na–>b–文本1–>c–>|文本2|d\n”);
  • 粗实线箭头：分为无文本箭头和有文本箭头
document.write(“graph LR\na==>b==文本==>c\n”);
  • 虚线箭头：分为无文本箭头和有文本箭头
document.write(“graph LR\na-.->b-.文本.->c\n”);
  • 无箭头线：即以上三种连线去掉箭头后的形式
document.write(“graph LR\na—b\nb–文本1!—c\nc—|文本2|d\nd===e\ne==文本3===f\nf-.-g\ng-.文本.-h\n”);
  • 其他连线：需要将graph关键字改为flowchart，除了新增加的连线形式外，上面三种线的渲染效果也会不同
document.write(“flowchart LR\n A o–o B\n B <–> C\n C x–x D\n 旧连线 –文本–> 也会不同\n”);
  • 延长连线：增加相应字符即可，如下图中的B到E，连线中增加了一个-。字符可多次添加。
document.write(“graph LR\n A[Start] –> B{Is it?};\n B –>|Yes| C[OK];\n C –> D[Rethink];\n D –> B;\n B —>|No| E[End];\n”);
  • 连线形式
    1、直链
document.write(“graph LR\n A –text–> B –text2–> C\n”);

2、多重链：可以使用 & 字符，或单个描述

“`mermaid
graph
a –> b & c –> d
A & B –> C & D
X –> M
X –> N
Y –> M
Y –> N

<pre><code class="line-numbers">3、其他
– 子图：需要将 `graph` 关键词改为 `flowchart`，在代码段的开始加入 `subgraph`,尾部加入 `end`
“`mermaid
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

  • 注释：在行首加入%%即可。
document.write(“graph LR\n%%这是一条注释，在渲染图中不可见\n A[Hard edge] –> |Link text|B(Round edge)\n B –> C{Decision}\n C –> |one|D[Result one]\n C –> |two|E[Result two]\n”);