背景
一直以来,我都偏爱文本编辑器,原因有二:
- 一是因为鼠标操作慢(买不起鼠标😂);
- 二是因为文本编辑快,不会产生冗余的不确定信息(比如人为操作带来的样式、位置信息),且存储方便。
所以我几乎从来没有用过脑图之类的工具,偶尔有需求也不过是用 Markdown 列个提纲。
但是当内容复杂到一定程度时,大脑内存不够用,就会理不清楚了,Markdown 的折叠可以部分解决这个问题,但是不得不承认脑图作为一个可视化工具是非常直观的。
Markmap
于是,我想实现一个 Markdown 转脑图的工具。
起先我是想找个现成的工具,于是发现了 markmap 这个大神器。它的实现原理是这样的:
- 先用 Remarkable 做 Markdown 的解析
- 然后基于 d3 做可视化
- 再结合一些 JavaScript 代码,实现网页交互,可以折叠和展开节点
这个实现思路和我预想的一致,所以基本就选用它了。而且它内置了一个 colorful
的配置,可以将节点按分支展示成不同的颜色,这个功能我很喜欢。
Vim 插件
基于 markmap 强大的能力,再结合我日常使用的 Vim,就有了这个插件:https://github.com/gera2ld/coc-markmap
为了 Markdown 的渲染以及交互,JavaScript 自然是最好的选择,所以我选择了基于 coc.nvim 来实现这个插件。
coc.nvim 已经提供了非常友好的 API,那剩下的事情就简单了:
- 获取当前 buffer 内容
- 解析 Markdown,生成 mindmap 数据
- 填充数据到模板,生成最终的脑图 HTML
就这样一气呵成,就可以在浏览器中开心地整理思路了。
快去这里点个 Star 吧。