简单、方便的流程图、甘特图做法——Mermaid作图教程

从思源笔记换到Obsidian后，第一个让我喜欢上的功能是mermaid作图。说实话，这点有点对不起思源笔记，这个功能思源笔记也有，只是自己之前没有发掘过，在Obsidian上使用了后发现思源笔记也有，甚至感觉效果还比Obsidian好一点，不过没有Obsidian上易用。
作为一个通用的作图方法，Mermaid作图我觉得最大的优势在于简单，方便，如果记录本身只是为了记录，没有美观等要求的情况下，Mermaid作图带来的体验非常棒，今天跟大家分享如何使用Mermaid做流程图和甘特图，为啥是这俩？对我来说，这俩是最常用的。

流程图

流程图目前来说是我在Mermaid里最常用的图，更常用的其实应该是思维导图，但是思维导图在Obsidian中可以直接通过Mind Map插件实现，让我感觉比Mermaid效果更好。
首先是怎么进入Mermaid作图，在Obsidian中是代码块，输入三个点（英文输入法下1左边按键）,然后输入mermaid，就进入了mermaid。

打开mermaid

如果是思源笔记，则有个专门的入口，输入斜杠后选择mermaid即可。

mermaid中第一行代表图表类型，流程图是flowchart TD，接下来就可以开始做流程图了。
在mermaid的流程图中，几个基础语法如下：
节点形状：
默认节点形状是方块
id1((名称))则节点形状变为圆 。
id2[(数据库)]则节点形状变为数据库。
id3([名称])则节点形状变成圆角矩形。
线型：
"--" 两个减号代表正常直线连接。
"==" 两个等号代表粗线连接。
“-.-”代表虚线连接。
“>”大于号代表箭头
流程：
A --> B 代表A指向B的一个流程
A --操作-->B 则是在A、B间箭头上添加一个操作文字
一个终点多个起点
A --> C
B --> C
一个起点多个终点
A --> B
A --> C
想怎么写就怎么写，非常顺畅。

flowchart TD
id1((AAA))
id2[(BBB)]
id3([DDD])
id1 ==> id3
id2 -.-> id3
id1 --操作-->id2

甘特图

流程图之后是甘特图，为什么是甘特图？因为甘特图在工作中很容易出彩。我个人来说，有时候领导让我提交某次活动的日程/行程安排，就会在提交行程安排的时候，顺便提交一张甘特图，相对来说就更直观，能一下子抓住眼球。
mermaid中甘特图基本语法如下：
图表类型为gantt。
在开头几行中，要明确图表内容：
dateFormat 日期格式，可以用YYYY-MM-DD代表年月日，也可以HH:mm代表小时与分。
axisFormat 坐标轴格式，格式与dateFormat不同，年月日为%Y-%m-%d，小时与分为%H:%M，需注意其大小写与dateFormat有些相反！

dateFormt格式与axisFormat 格式对比

title 图名，可以不要。
excludes weekends ,排除周末，可以不写。
如下：

gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends

接下来是具体内容了。
首先用section 名称开启一个区块，代表一个大的目标/工作内容。
接下来是具体日程安排，按照如下格式：
日程名称 : （可选项，crit，是否是重要日程）,(可选项，done/active/空白，日程完成状态),日程开始时间，日程结束/持续事件。
其中日程开始事件可以为具体时间，也可以用after 日程名称来代表在某日程之后，空白则表示紧跟上一项日程。
日程结束/持续事件则可以是具体事件，也可以是3d，2h这样的日程长度。
在具体表现上，crit标注日程在图上会有红色外框。
done标注日程为灰色，active标注日程为白色。
没有日程完成状态的crit日程为整体红色，正常日程则为蓝色。
直接来看看效果吧。

gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends

section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d Functionality added :milestone, 2014-01-25, 0d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page :20h Add another diagram to demo page :48h

个人使用小贴士：
以上为常规用法，但是如果将dataFormat设置为HH:mm，然后section 名称设置为日期，可以对多天日程进行安排。

gantt
dateFormat HH:mm
axisFormat %H:%M
section 2024-03-14
参加数字化会议: done,08:00,3h
摸鱼: done,0.5h
午休: done,2h
写会议材料: crit,done,3h
section 2024-03-15
修改会议材料: 08:30,3h
午休: 2h
摸鱼: 3h

今天的分享就到这里啦，其实mermaid作图还有非常多的应用，流程图与甘特图也还有非常多的语法，但是我觉得mermaid最大的特点应该是简单、方便，语法过多，更加繁复、美观的图，反倒是失去了mermaid对我来说最大的优点。适合自己的才是最好的。

作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～