背景

notion中缺乏绘图的工具，而使用嵌入网页的方式嵌入第三方网页来实现，又会使得过程繁琐，维护成本高。

方案

思路

notion支持了Mermaid.js的预览，通过Mermaid的语法能够绘制一些常见的图，比如流程图，思维导图等。

问题

参考

mermaid.js - Diagram Types

可以看到，原生的Mermaid语法主要面向绘图的，可读性略差。不过如果单纯是绘制思维导图，少许做些优化即可。

实践

以本文的目录为例

- 如何使用Notion绘制思维导图
  - 背景
  - 方案
    - 思路
    - 问题
    - 案例
  - 反思

在mermaid中的每个节点都必须有名称，我们以常见的目录名编号1.1.1为名进行

1[如何使用Notion绘制思维导图]
  1.1[背景]
  1.2[方案]
    1.2.1[思路]
    1.2.2[问题]
    1.2.3[案例]
  1.3[反思]

然后在这些节点下面增加几个节点间的连接即可。

graph LR
1[如何使用Notion绘制思维导图]
  1.1[背景]
  1.2[方案]
    1.2.1[思路]
    1.2.2[问题]
    1.2.3[案例]
  1.3[反思]
1 --- 1.1
1 --- 1.2
1.2 --- 1.2.1
1.2 --- 1.2.2
1.2 --- 1.2.3
1 --- 1.3

最终效果如下图所示：

graph LR
1[如何使用Notion绘制思维导图]
  1.1[背景]
  1.2[方案]
    1.2.1[思路]
    1.2.2[问题]
    1.2.3[案例]
  1.3[反思]

1 --- 1.1
1 --- 1.2
1.2 --- 1.2.1
1.2 --- 1.2.2
1.2 --- 1.2.3
1 --- 1.3

反思

有时候功能过于强大的绘图工具，反而会让我们迷失。其实我们可能只要简单清晰的结构，来帮助我们说清楚问题即可。

另外在mermaid.js中已经有了mindmap这个专门用于思维导图的绘图，但当前Notion还没有支持，相信后续对于思维导图的绘制也会更简单。

如何使用Notion绘制思维导图？How to draw a mind map in Notion?

背景

方案

思路

问题

实践

反思