现在位置: 首页 / 实用技巧 / content / 正文

Joplin 使用教程 —— Mermaid 详解

这篇文章是 Joplin使用教程 系列 0 篇文章中的第 [part not set] 篇

Joplin使用教程

概述

什么是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");