1
综述
如果我们想在自己的收支block中插入一个饼图
或者想在读书笔记中写一个人物关系图、故事框架图
按照一般的方法
对于无法嵌入到notion中的图表
或许只能截图到notion中
并且后续的更改无法做到同步
notion官推展示了嵌入的一些饼图、流程图、甘特图的样式图
是通过在code块中实现的
我去翻了一下所需要用到的是mermaid
它的核心是一个基于 JS 的解析库
这意味着我们可以把 Mermaid 文本直接嵌入网页中
也就是说能在notion中直接看到渲染后的图表了
后续的内容修改也十分方便
最主要的是它对非计算机行业的人也很友好
只要通过 ->> 和冒号这种简单的文本标记
就能把各种关系和方向清晰的表达出来
并迅速渲染出你想要的图表
目前Mermaid 主要可支持的图表类型有
流图 （Flow）
序列图 （Sequence）
甘特图（Gantt）
类图（Class）
状态迁移图（State）
饼图（Pie）
和实体关系图
我整理了一些关于mermaid的使用教程
并做成这个视频，主要介绍如何在notion中使用它
有不足和错误请大佬指出
本次主要介绍两种图表类型
饼图（Pie）和甘特图（Gantt）
饼图
最开始要做的是插入一个code块
并将语言（Language）第一栏改为Mermaid
另外说一下code视图只显示代码
Preview只显示编辑好的图表
Split则是上半部分显示代码 下半部分显示图表
可以边修改边查看效果
然后开始写入代码
在第一行写入pie关键字，代表要开始使用饼图作图
如果你的图有标题，可以在后面输入title以及你的标题
接下来的每行，在“”（双引号）中写入分区名
也就是类别名 类别名后加上：（冒号）以及你的数据
以及想要显示的数据，最多可以支持两位小数
图表上的数据以所占百分比显示
如果你还是不太懂，可以复制我提供的模板的代码
甘特图
接下来试试甘特图
首先第一行写上gantt的关键字 代表要开始使用甘特图作图
第二行选择日期格式，其他日期格式有
DD-MM-YYYY（日-月-年）、YYYY（年）等
接下来可选择性地写标题：title加要显示的标题
然后开始键入要显示的任务项目
先说一下格式
每一项任务的描述格式均为：
任务名称: 是否关键(crit/缺省), 状态(done/active/缺省), 任务代号(代号/缺省), 开始时间(YYYY-MM-DD/after 其他代号/缺省), 结束时间(YYYY-MM-DD/持续时长/缺省)我们以《武林外传》里小郭被山贼追杀的那段剧情来做示例
第一次是美丽不打折，所以任务名称就是 美丽不打折杀小郭
是否关键：美丽不打折对于几位高手略逊一筹，所以这里不填，代表它不重要
如果填了crit，任务项目会变全红色（状态缺省）
或者边框变红（状态有值）
状态：这一栏我们可以随便填一个done，代表已完成
如果填active的话，则代表进行中
不填则代表未开始
任务代号则是为了代码编写方便
可以给很长的任务名称起一个简化代号
我们给美丽不打折杀小郭这一任务名加一个代号：sha1
开始时间的格式可以按照第二行的日期格式
也可以写after 其他代号
结束时间则除了写日期外，还可以写持续时长
比如持续一天就可以写为1d
这样一个简易甘特图就制作完成了
https://loee.xyz/2021/07/20/markdown-使用-mermaid-绘制图表/
2
上一期视频简单介绍了饼图和甘特图的插入
其实mermaid不仅可以展现在notion中
其他markdown编辑器都可以使用
这期视频来学习如何插入流程图
这是一种我们在工作和学习中常用的一种图表
图标方向
首先来看图表方向
它的语法是这样子的
只要在“方向描述”的位置写入你想显示的方向
接下来的图表将会按照这个方向编辑
一共有四种方向
分别是TB（从上到下）
BT（从下到上）
LR（从左到右）
RL（从右到左）
了解了四种方向后
你就可以编写出简单的流程图了
如果我们要做一个四大名著的体系图
首先插入code块，选择mermaid
第一步选择方向，选择从左到右
最简单的连接符是三个短横线
将他们按照各自的关系连接起来
以上就是最简单的一个流程图
但是如果你需要让自己的流程图更好看一些
你就需要看一下接下来的教程
节点定义
有了方向，第二部分就是节点定义
所谓节点定义，也就是你要插入的文本块
如果文本块较多
为了指示方便，可以给每个文本块标记id
比如id1、id2、id3这种标记方式
文本块边框的调整
如果不添加任何括号，则默认文本块的边框是矩形外框
也可以用一对方括号[ ]来括住文本内容
一对圆括号( )会出现圆角矩形外框
两对圆括号(())会出现圆形外框
一个大于号>加一个右方括号会出现旗帜外框
它是朝左边开口的
一对花括号{}可以出现菱形外框
如果文字包含标点符号，需要用双引号包裹起来。
如果文字需要换行，则在换行处加入<br>
各个节点之间的连线样式
单线连接各个文本块时，用两个短横线表示
如果需要添加尾部箭头
则在两个短横线后添加一个>大于号
不需要添加尾部箭头的话
需要在两个短横线后添加第三个短横线
图中前两个是添加了尾部箭头的
后两个没有尾部箭头
这是粗线的表达形式
粗线是两个等于号==
需要箭头在两个等于号后面加>大于号
不需要就加=等于号
虚线则是用短横线加点加短横线来表示
与前面不一样的是
如果不需要箭头则什么都不用添加
需要箭头还是需要在后方添加一个大于号>
如果需要在线上加一些标记
两个短横线加文字加两个短横线来表示单线加上文字
==text== 表示粗线加文字
-.text.- 虚线加文字
子图表
第一行写subgraph 空一格标注子图表的名称
第二行开始写子图表中的详细内容
别忘记最后要写end代表子图表结束
举个例子，我们用一本书第一章的结构来表示
首先建一个流程图
第一章下一级别是第一节
给第一节作一个子图表
标题叫做详细内容
首先第一节包括第一段和第二段
第一段又细分了三行
在写完之后不要忘记添加end
表示子图表编写结束
