作者
ZeroDoCom
分类
计算机 Compute
更新时间
Jan 20, 2023 12:01 PM
外部参考数
1
内部问题链接数
0
背景
notion中缺乏绘图的工具,而使用嵌入网页的方式嵌入第三方网页来实现,又会使得过程繁琐,维护成本高。
方案
思路
notion支持了Mermaid.js的预览,通过Mermaid的语法能够绘制一些常见的图,比如流程图,思维导图等。
问题
参考 可以看到,原生的Mermaid语法主要面向绘图的,可读性略差。不过如果单纯是绘制思维导图,少许做些优化即可。mermaid.js - Diagram Types
实践
以本文的目录为例
- 如何使用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还没有支持,相信后续对于思维导图的绘制也会更简单。