Joplin 使用教程 —— Mermaid 详解

概述

什么是 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 关键词

实例

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

饼状图

• 在线渲染器：Online FlowChart & Diagrams Editor
• 语法
  1. 从 pie 关键词开始图表
  2. 然后使用 title 关键词及其在字符串中的值，为饼图赋予标题（可选）
  3. 数据部分
  • 在 ” ” 内写上分区名
  • 分区名后使用 : 作为分隔符
  • 分隔符后写上数值，最多支持 2 位小数 —— 数据以百分比的形式展示
    • 实例

流程图

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

实例

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

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

下面的实例中，没有为 graph 指定方向，因此默认是从上往下的。但是由于各个结点之前没有箭头，所以他们都处于同一排。id1-id6 是节点名，可随意定义。

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

• 粗实线箭头：分为无文本箭头和有文本箭头

• 虚线箭头：分为无文本箭头和有文本箭头

• 无箭头线：即以上三种连线去掉箭头后的形式

• 其他连线：需要将 graph 关键字改为 flowchart，除了新增加的连线形式外，上面三种线的渲染效果也会不同

• 延长连线：增加相应字符即可，如下图中的 B 到 E，连线中增加了一个-。字符可多次添加。

• 连线形式
  1、直链

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

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

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

• 注释：在行首加入%%即可。