Notion搭配Mermaid 使用

1、Mermaid简介

官网简介：基于JavaScript的绘图和图表工具，它呈现受markdown启发的文本定义，以动态地创建和修改图表。具有：易于使用、多平台集成可用的特点，极大提升了书写体验。

支持美人鱼文件的应用程序应使用或文件扩展名。.mermaid.mmd

官网：https://mermaidjs.github.io/
Github地址：https://github.com/knsv/mermaid
文档地址：https://mermaid.js.org/intro/n00b-gettingStarted.html
在线绘制地址：https://mermaid.live/edit#

2、简单语法介绍

• 公共定义

• 流程图
  流程图由节点（几何形状）和边缘（箭头或线条）组成。美人鱼代码定义了节点和边的制作方式，并适应不同的箭头类型、多向箭头以及与子图之间的任何链接。
  语法：

  点击查看代码

    ```
    ---
    title: Node
    ---
    flowchart LR
    	id
  

• 序列图

• 类图

• 甘特图

• 饼图
  .........

3、notion上手实践

语法：/mermaid

notion已经原生支持，并且支持实时预览，书写效果挺棒的，也增加了自身文档的丰富度，效果如下：