mermaid使用指南+notion使用实例-持续更新中

最近一个月了吧，发现Notion插入图片的功能坏了，直接paste会404，本地上传也不行。电脑本地版和手机端都插不了图片，很头疼。解决方法也简单，用图床，放链接。

付费版我用的七牛，结合PicGo，在notion中是ok的。

免费版可以用b站的笔记。。就是写一个笔记，公开，然后复制图片，插入到notion。

不过我梳理了一下我要插入的图，大部分是流程图、思维导图之类只需要大概说明一些结构和顺序、方便记忆的、工程相关的图，所以还是决定用mermaid，直接写代码。

mermaid是一个基于JS的图表绘制工具，通过解析类Markdown的文本语法来实现图表的创建和动态修改。目前notion中是支持mermaid的，直接输入/mermaid即可插入。

---

文档：
Mermaid User Guide | Mermaid
http://mermaid.js.org/intro/getting-started.html
喜欢中文版的：
关于 Mermaid | Mermaid 中文网
https://mermaid.nodejs.cn/intro/

---

基础语法

参考：
MarkDown绘图mermaid流程graph - 简书
https://www.jianshu.com/p/598b121bdbef

绘图方向

TB 从上到下，BT 从下到上，RL 从右到左，LR 从左到右

节点形状

需要注意text两侧的写法。。不同的node是不一样的。

连线形状

连线上如果带注释的话，需要这样写：

如果是1-N或者N-1，那么使用&

子图

mermaid允许图的嵌套，不过node的名字必须全局唯一。格式是subgraph 名称 + 内容若干行 + end

注释

%%开头，单开一行。

链接

点击Mermaid，就可以跳转到对应链接。链接需要用引号包裹。

例子

下面会持续更新我用到的功能，涉及的技巧会附在后面。不过mermaid真的很简单，大部分时候copy一下就解决问题了。

基础绘图

先看效果。（图来自《极简学理财（吕白，2021）》，我从图书馆借的，废话很多，有用的有几句，不是很建议hhh但是这个图不错）

对应的代码：

---
title: 省钱+存钱tips
---
graph LR省钱+存钱 --> 立即能削减的支出立即能削减的支出 --> 断舍离立即能削减的支出 --> 用高级欲望覆盖低级欲望立即能削减的支出 --> 将金钱与生命挂钩省钱+存钱 --> 必须要花的钱必须要花的钱 --> 定好预算必须要花的钱 --> 找对冲和替代消费必须要花的钱 --> 购置二手必须要花的钱 --> 优化金钱使用方式必须要花的钱 --> A[去掉#quot;寄生虫#quot;账单]必须要花的钱 --> 经常花的钱经常花的钱 --> 会员体系经常花的钱 --> 打折时适量囤货

需要注意的是，当需要在某个node中输入特殊符号的时候，需要用 A[] 这种格式，A表示文本框，[]里需要使用转义字符。双引号就是#quot; 其他可以参考这里：
【MarkDown】转义字符 - hitrjj - 博客园
https://www.cnblogs.com/Tom-Ren/p/10234956.html
Markdown 转义字符语法 | Markdown 官方教程
https://markdown.com.cn/basic-syntax/escaping-characters.html