Markdown 学习笔记(三) - Mermaid 绘图

回到文章目录

Mermaid是一个开源项目，目前已经包含了众多种类的绘图。Markdown 将其引入到代码块中，你可以使用它在代码块中进行简单的绘图。Mermaid 目前仅被少数编辑器支持，你可能需要在编辑器设置中手动打开相关设置，其中包括 Typora。

本文只介绍其中的 flowchart、gantt、pie 。如果还有其他需要请访问 Mermaid 官网 获取更加详细的指南。

不同版本Mermaid略有差异，这里以V8.8为例。

花絮 - 不要高估 Mermaid

有一段时间，我实际上非常痴迷于 Mermaid 的强大，并不断地向周围的人分享它。实际上，Mermaid 确实有其便捷之处，但是绝不能说其强大，当你需要画一幅略大的图时，Mermaid 就无能为力。

比如有一次我试图帮 ACMer 队友画一幅简单的二分图，用来理解匈牙利算法。但 Mermaid 始终无法将二分图的两个点集对齐，二分图长得非常难看。

比如上学期的 C++ 课设上，课设报告需要提交流程图和类图，我试图用 Mermaid 完成类图但画出的图太过凌乱，试图画出流程图但是代码太长把自己都看晕了。

Mermaid 擅长并只限于解决一个问题：你的笔记中需要嵌入一个简单的图，Mermaid 可以为你生成最标准的图形。但注意！这只限于一个简单的图。

flowchart

全局参数

$$\begin{array}{} 无 & Auto & 自动 \\ TB(TD) & Top~to~Botton & 自上而下布局 \\ BT & Botton~to~Top & 自下而上布局 \\ LR & Left~to~Right & 自左向右布局 \\ RL & Right~to~Left & 自右向左布局 \\ \end{array}$$

• 代码
• 预览

``` mermaid
flowchart TD;
    开始-->结束;
```

节点

• 节点具有三个基本属性：标识，文本（名称），样式（形状）。模式为：标识?文本?。
• 标识为节点在代码中的唯一标识，是mermaid中的变量名。
• 节点可以设置复杂的Style类，此处不作介绍。
• ?决定样式，详见下表：

• 代码
• 预览

``` mermaid
flowchart TD;
    id1[矩形];
    id2(圆角矩形);
    id3([圆边矩形]);
    id4[[双边矩形]];
```
``` mermaid
flowchart TD;
    id1>旗帜];
    id2{{尖角矩形}};
    id3[/梯形1/];
    id4[\梯形2\];
    id5[/梯形3\];
    id6[\梯形4/];
```
``` mermaid
flowchart TD;
    id1{菱形};
    id2((圆形));
    id3[(圆柱体)];
```

连线

线条和标注

• 连线具有三个基本属性：起点与终点，形状，标注。
• 形状可大致分为四个属性：
  • 长度
  • 实线 / 虚线 / 粗线
  • 箭头 / 圆点 / 叉叉 / None
  • 箭头个数：1 / 2

• 代码
• 预览

``` mermaid
flowchart LR;
    11---12===13-......-14;  // 符号越长，线越长
    21---|实线|22===|粗线|23--------|长实线|24;  // 标注
    31---32-->33<-->34;
    41-.-42.->43<.->44;
    51---52--o53o--o54;
    61---62--x63x--x64;
```

简化表达

• 使用&可以简化部分表达。

• 使用&时两边必须留有空格。

• 代码
• 预览

``` mermaid
flowchart TD;
    11-->12 & 13-->14 & 15 & 16;
    21-->22; 21-->23; 22-->24; 22-->25; 22-->26; 23-->24; 23-->25; 23-->26;
```

子图

描述嵌套图时，节点属于其第一次出现于的子图，节点未出现于其子图则其属于父图。

• 代码
• 预览

``` mermaid
flowchart TB;
    subgraph one;
        a1-->a2;
    end;
    subgraph two;
        b1-->b2;
    end;
    subgraph three;
        c1-->c2;
    end;
    c1-->a2;
    one --> two;
    three --> two;
    two --> c2;
```

应用

数据结构中的树

• 代码
• 预览

``` mermaid
flowchart TD;
    1((1)); 2((2)); 3((3)); 4((4)); 5((5));
    1-->2;
    1-->3;
    2-->4;
    2-->5;
```

数据结构中的图

• 代码
• 预览

``` mermaid
flowchart LR;
    1((1)); 2((2)); 3((3)); 4((4));
    0((0))-->|11|1; 
    1-->|10|2;
    1-->|53|3;
    2-->|31|3;
    0-->|27|2;
    4-->|98|2;
    4-->|12|1;
    3-->|62|4;
```

包含关系图

• 代码
• 预览

``` mermaid
flowchart TD
    subgraph JDK
        subgraph JRE
            subgraph JVM
            end
            subgraph 核心类库
            end
        end
        subgraph 开发工具
        end
    end
```

流程图

• 代码
• 预览

``` mermaid
flowchart
    1((开始))-->2[提交订单]-->3{确认订单}-->|Yes|4[发货通知]-->5((结束))
    3-->|No|2
```

gantt

全局参数

总览

• 标题：title An Example of Gantt Chart（可选）。
• 代码日期格式：dateFormat YYYY-MM-DD（默认）。
• 坐标日期格式：axisFormat %Y-%m-%d（默认）。
• 休息日：excludes weekends，周末休息。
• 坐标间隔：tickInterval，V8.8不可用。

• 代码
• 预览

``` mermaid
gantt
    title An Example of Gantt Chart
    dateFormat YYYY-MM-DD
    axisFormat %Y-%m-%d
    excludes weekends
    section 1
        taskA: active, taskA, 2023-01-01, 14d
        taskB: taskB, after taskA, 7d
```

标题

title An Example of Gantt Chart

代码日期格式

dateFormat YYYY-MM-DD

• 对于补零格式，必须严格符合位数；对于去零格式，保留前导零依然可以被识别，但总场宽不得大于补零格式。
• 对于英文拼写，不区分大小写。
• 对于序数格式，不区分st，nd，rd，th。
• 对于X，小数可以为0~3位。

$$\begin{array}{} 输入 & 示例 & 描述 & 取值 \\ YYYY-MM-DD & 2023-01-26 & 四位年份，二位月份，二位日期 & {^{0000}_{9999}}~~{^{01}_{12}}~~{^{01}_{31}} \\ YY-M-D & 23-1-26 & 二位年份，月份，日期 & {^{00}_{99}}~~{^{~1}_{12}}~~{^{~1}_{31}} \\ YYYY-MMMM-Do & 2023-January-26th & 年份，全拼月份，序数日期 & {^{0000}_{9999}}~~{^{January}_{December}}~~{^{~1st}_{31st}} \\ YY-MMM-Do & 23-Jan-26th & 年份，简拼月份，序数日期 & {^{00}_{99}}~~{^{Jan}_{Dec}}~~{^{~1st}_{31st}} \\ DDD & 26 & yearday & {^{~~0}_{366}} \\ DDDD & 026 & yearday & {^{000}_{366}} \\ \\ HH:mm:ss & 21:33:09 & 二位24时，二位分，二位秒 & {^{00}_{24}}~~{^{00}_{59}}~~{^{00}_{59}} \\ H:m:s & 21:33:9 & 24时，分，秒 & {^{~0}_{24}}~~{^{~0}_{59}}~~{^{~0}_{59}} \\ hh:mm:ss~~a & 09:33:09~~pm & 二位12时，二位分，二位秒，am/pm & {^{00}_{12}}~~{^{00}_{59}}~~{^{00}_{59}} \\ h:m:s & 21:33:9 & 12时，分，秒 & {^{~0}_{12}}~~{^{~0}_{59}}~~{^{~0}_{59}} \\ S~~SS~~SSS & 4~~37~~371 & 分秒，厘秒，毫秒 & {^{0}_{9}}~~{^{~0}_{99}}~~{^{~~0}_{999}} \\ \\ Z(ZZ) & +08~Or~+0800~Or~+08:00 & UTC~时区 & {^{-1200}_{+1200}} \\ X~~x & 1674739989.371~~1674739989371 & Unix~时间戳，Unix~时间戳(毫秒) & {^{0.000}_{~~~\infty}}~~{~^{0}_{\infty}} \\ \end{array}$$

更多请参考原文：Moment.js

坐标日期格式

axisFormat %Y-%m-%d

注意：坐标日期格式与代码日期格式标准不统一。

• 所有格式默认为补零格式。如%m。
• 添加-转为去零格式。如%-m。
• 添加_转为补空格式。如%_m。

描述	输入	示例	解释
Date and time	%$Y-$%$m-$%$d~$%$H:$ %$M:$ %$S$	$2023-01-26~~21:33:09$
Date and time	%$y-$%-$m-$%-$d~~$%-$I:$ %-$M:$ %-$S~~$%$p$	$23-1-26~~9:33:9~~PM$
Date and time	%$x~~$%$X$	$1/26/2023~~9:33:09~~AM$
About week	%$a~~$%$A~~$%$w~~$%$U~~$%$W$	$Thu~~Thursday~~4~~4~~4$	${^{\%U~以周日始的当年过去的周数}_{\%W以周一始的当年过去的周数}}$
Others about month	%$b~~$%$B$	$Jan~~January$
Microsecond	%$L$	$371$	$\%L~毫秒$
UTC time zone	%$Z$	$+0800$
Unix timestamp	%$s~~$%$Q$	$1674739989~~1674739989371$

更多请参考原文：D3-Time-Format

休息日

$$\begin{array}{} 日期 & 2023-01-26 & YYYY-MM-DD~格式 \\ 周 & Monday~\rightarrow~Sunday \\ 周末 & Weekends & 没有~Weekday \\ \end{array}$$

事务

• 甘特图由事务构成，事务可以由section分组。
• 事务主要由五个元素构成：文本（名称），样式，标识，起始时间，持续时间。
• 标识为事务在代码中的唯一标识，是mermaid中的变量名，可缺省并匿名。
• 持续时间的单位包含：d-day，w-week，h-hour，m-minute，s-second。
• section至下一个section的范围内皆属于上一个section分组。

• 模板
• 代码
• 预览

section 组名
    文本:		样式1,...		标识,		起始时间，		持续时间
    文本:		样式1,...		持续时间

``` mermaid
gantt
    title Another Gantt Chart
    section section 1
        task A:		active,		task_a,		2023-01-01,		1d
        task B:		active,		1d
```

起始时间

• 起始时间含两种模式：绝对时间，相对时间。
• 绝对时间：需满足dateFormat的时间格式。
• 相对时间：置于一或多事务之后。例如：after task_a，after task_a task_b。如为多事务，将置于最迟结束事务之后你

样式

• 基本样式主要有五类：空（未标记），done（完成事务），active（进行事务），crit（重要事务），milestone（里程碑）
• done，active相互冲突。
• milestone样式将同时使文本变为斜体。
• 更多进阶样式涉及CSS前置知识，不作介绍。

• 代码
• 预览

``` mermaid
gantt
    title Yet Another Gantt Chart
    section section 1
        task A:							done,			task_a,		2023-01-01,			3d
        task B:                            done,			task_b,		after task_a,		2d
        An important task:                done,crit,		task_c,		2023-01-02,			1d
        task D:                            active, crit,	task_d,		after task_c,		3d
        Finish the first part of work:    milestone,		mile_a,		after task_b task_c,
    section section 2
        task E:                                            task_e,		after mile_a,		7d
        task F:                                            task_f,		after mile_a,		1d
        task G:                            crit,			task_g,		after task_f,		8h
        task H:                                            task_h,		after task_g,		5d
        Victory is around the corner:    milestone,crit,	mile_b,		after task_e task_h,
    section final section
        final task:                                        task_z,		after mile_b,		12h
        Finished:                        milestone,		mile_z,		after task_z,
```

pie

全局参数

• 标题：title An Example of Pie Chart（可选）。

• 显示数据：showData，V8.8不可用。

条目

条目由两部分构成：文本，数值。注意：文本必须包含双引号"。

• 模板
• 代码
• 预览

"文本": 数值

``` mermaid
pie
    title An Example of Pie Chart
    "website users":	1376
    "desktop users":	391
    "app users":		4967
```