Markdown与思维导图的碰撞结合

第一次接触Markdown,还是在几年之前。

当时简书刚刚出来,它简洁的版面很讨自己喜欢,于是便注册了一个账号,开始在上面写文章。

简书一开始就支持富文本编辑器和Markdown编辑器。对于当时的自己而言,Markdown还是个从来没有听说过的东西,看了简书官方的推荐文档,觉得很不错,至少对于自己写文章来说,是提高了便利性。

要知道,在这之前,使用富文本编辑器,要么一遍写文章一些调整样式、要么写完文章然后调整样式。调整样式的过程,虽然简单,但是繁琐,大把的时间浪费在文章样式排版的调整上,简直不能忍。虽然不能忍,但也无可奈何,直到遇见Markdown。

Markdown的劣势是显而易见的。

首先,Markdown作为HTML的子集,自身支持的文本结构有限。

其次,Markdown自身没有对标签进行样式渲染的能力,需要依赖于第三方的解析和渲染,这就导致各家对Markdown语法的样式渲染得不一样。

这些劣势招致了很多追求功能强大和自由度的使用者的不满意,在他们眼中,Markdown无异于一个残废。

正所谓,汝之蜜糖,吾之砒霜。

对于轻量级的网络写作者而言,Markdown的这些劣势,恰恰是其优势,恰恰是使用Markdown的理由。

这些轻量级的网络写作者,所需要文章的样式没有那么多,不需要各种花里胡哨的东西填充到文章之中,Markdown就保证了其简洁性。

基于Markdown语法和对于文本结构的简洁性,其也保证了第三方的渲染服务千差万别,但是核心的文本结构和全局样式是统一的,不用担心自己的排版与最终呈现的结果会有差异。

也是因为这样的原因,我在网络上的文章写作逐步转移到了Markdown。

再来说说思维导图

思维导图在刚刚兴起的时候,被各种介绍思维方法、效率提升的文章传得神乎其神。我一看,这不就是咱们从小接触的列大纲,一二三吗,把思想的核心点、关键点全局性地罗列起来。感情大多数人都张口就来,提笔就写,没有全局性地考虑过结构和顺序,思维导图也成了一个高效的思维工具。

吐槽归吐槽,思维导图对于梳理事物的结构还是很有帮助的。

州的先生在写文章或者开发新项目的时候,也会用思维导图列出整个文章或项目的结构框架、结构框架下的子框架,然后细化到具体的内容。这样,再对其转换为实际的结构,比如文章标题、子标题、子内容主题等;比如、一个爬虫项目、请求模块、数据解析模块、数据存储模块,不同的模块之下又拆分不同的子模块,最后只需要把相应的代码填充到其中即可。

对于思维导图工具,客户端上一般使用XMind。

Web端的话,百度脑图也是比较好用的。

一般在思维导图制作完成之后,会直接保存下来或者保存为图片,以分享给别人。这种形式对于独立的思维导图来说,是没有任何问题的。但是在一些场景下,需要把思维导图插入到文章之中,怎么办呢?

可以以图片的形式插入,但是如果思维导图层级过多,一个体验不好的地方是其排版会有偏差,要不然图片被限制在一个宽高、要不然图片占用了大量的版面,而且以图片方式插入的思维导图还丧失了伸缩子节点的功能,造成的体验很是不好。

以Markdown的方式来绘制思维导图,无疑是一个解决方案。目前互联网上也有很多支持将Markdown语法渲染为思维导图的组件,比如百度脑图的核心组件——kityminder。

又比如另一个开源组件——markmap:

综合权衡和考虑,最终选择了markmap-lib这个组件作为渲染Markdown为思维导图的前端组件。

markmap支持直接将Markdown语法内容按照标题到内容的顺序渲染为SVG格式的思维导图。并且渲染出来的思维导图可缩放、可点击展开收起子节点,同时样式也很美观:

在确定好前端渲染组件之后,为了能够让其能够更好地与Markdown配合,州的先生选择了使用Markdown的块代码+自定义的语言名称作为在Markdown中绘制思维导图的语法,如下代码所示:

```mindmap
# 主题
## 主题1
### 子节点1
## 主题2
```

这样,我们就可以在写Markdown的时候通过添加块代码的方式来快速绘制思维导图,如下图所示:

这可能是州的先生目前为止,最为满意的在Markdown中绘制思维导图的方式了。如果需要细致地体验,可以下载安装MrDoc,点击新建文档进行测试体验。

源码地址为:[1]GitHub:https://github.com/zmister2016/MrDoc
[2]Gitee:https://gitee.com/zmister/MrDoc/

猜你也喜欢

发表评论

电子邮件地址不会被公开。