Quarto文档中使用Mermaid实现思维导图

Quarto
Mermaid
作者

陈琼

发布日期

2023年10月23日

思维导图是我们组织想法的常用工具,能够实现这种功能的工具有很多,比如说XMind、Gitmind、MindMaster、MindNote等。而在Quarto里,我们可以使用Mermaid工具实现思维导图,从而输出到网页、word、PDF等。

今天我把学习在Quarto中使用Meimaid绘制思维导图的过程记录如下。如果在此之前你还没有了解过Quarto的话,请查看这篇文章,论文写作效率神器:Quarto出版系统,先了解一下Quarto。

首先,浏览一下Mermaid的官方网站,mermaid除了可以绘制思维导图之外还可以绘制流程图、饼图、关系图等,是一个很方便的工具。

之后,在quarto文档中插入mermaid的代码块,即可开始思维导图的绘制。

基本语法

在mermaid中,思维导图以mindmap关键字开头,然后另起一行缩进空格写思维导图的根节点,然后另起一行,在根节点的基础上再缩进空格写第二级节点,相同级别的节点需要缩进相同的空格数。再往下添加节点的话,依据同样的准则即可。

具体写法和实现效果可以参考下面的代码。

```{mermaid}
mindmap
  质量控制
    可比性
      发病时间定义
      疾病编码
    完整性
      M:I
      发病率
      死亡率
      年龄别率
    有效性
      MV\%
    时效性
```
mindmap
  质量控制
    可比性
      发病时间定义
      疾病编码
    完整性
      M:I
      发病率
      死亡率
      年龄别率
    有效性
      MV\%
    时效性

控制节点图形

mermaid目前的语法可以让我们通过不同的括号语句控制节点的图形,比如通过方括号对[长方形]显示长方形,通过(圆角长方形)显示圆角长方形,具体可参考下面的代码。

```{mermaid}
mindmap
  形状
    默认形状
    [长方形]
    (圆角长方形)
    ((圆形))
    ))爆炸形状((
    )云朵形状(
    {{六角形}}
```
mindmap
  形状
    默认形状
    [长方形]
    (圆角长方形)
    ((圆形))
    ))爆炸形状((
    )云朵形状(
    {{六角形}}

添加图标

CSS类调整格式

Mermaid在绘制思维导图的时候,可以通过三个冒号 ::: 后面跟着以空格分割的多个CSS类名称。

比如,我们在CSS文件里定义了一个CSS类

.important{
  font-size: 3em;
  font-weight: bold;
}

.red{
  text-color: darkred;
}

我们在上面的CSS文件里定义了两个CSS类,名称分别为 important 和 red , 那么我们就可以在下面的mermaid语句引用该类来自定义节点的显示效果。

使用方法是:在适用的节点下面一行,与该节点缩进相同的单位,然后使用三个冒号跟着以空格分隔的CSS类名即可。

markdown文本

Mermaid支持markdown文本的特征, 比如可以在文字前后使用**表示加粗等,*表示斜体。