天下事有难易乎?为之,则难者亦易矣;不为,则易者亦难矣。

神器 Markmap !!

itzoo 529次浏览 0个评论

点击“终码一生”,关注,置顶公众号

每日技术干货,第一时间送达!



1

前言


Markdown 的好处是专注码字的同时还能兼顾排版,不用像 word 那样文本加个粗都需要移动下鼠标,体验非常好。


它的缺点就是可视化能力很弱,这就降低了信息的传播效率,毕竟人对于图像化内容的接收程度要强于文本。


可视化表达方面,思维导图就很不错。它作为一种图象化工具,通过层级式发散式地组织主题,帮助我们更好的记忆、学习和思考。


但在过去,这两类工具是各自独立的,也就是你写完 Markdown 文本,想要可视化地传达一些重点给读者,就需要重新录入下思维导图,因此比较繁琐,这也是我不怎么用思维导图的原因。


最近发现一款很好用的工具,可以很好的解决上边的问题,在此分享给大家。




2

工具介绍


这款工具叫markmap


markmap 可以将 Markdown 语法的文本通过思维导图的方式进行可视化。以下是官网截图,markmap 这个名字来自 markdown 的前半部分 和 mindmap 的后半部分,slogan 是 Visualize your Markdown with mindmaps 。




3

工具使用


在线版


如果你不想安装任何东西,那可以直接浏览器(建议 chrome 浏览器)上访问 https://markmap.js.org/repl 即可仿照官网模板进行转换,如下图。左边录入 Markdown 文本,右边会实时展示出思维导图。



Markdown 语法中的链接,加粗,删除线,斜体,单行代码,代码块,数学公式,转换成思维导图都有相应的视图效果。而且支持下载生成动态化的 html 文件以及 svg 文件。


动态化效果如下图,可以折叠和打开。



离线版


如果你想拥有更好的使用体验,并且希望在断网的情况下也能够使用,那我推荐你下面这种方案。


vscode 使用插件


在 Visual Studio Code 上安装 markmap 插件,如下图。



编辑 Markdown 文本,文件名以 .mm.md 结尾即可使用,并且可以点击右下角「export」按钮导出动态的 html 文件。


vscode 使用界面



语法格式


# markmap

## Links

<https://markmap.js.org/>
[GitHub](https://github.com/gera2ld/markmap)

## Related

[coc-markmap](https://github.com/gera2ld/coc-markmap)
[gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)

## Features

links
**inline** ~~text~~ *styles*
multiline
  text
`inline code`
-
    
```js
    console.log('code block');
    ```
- Katex - $x = {-b pm sqrt{b^2-4ac} over 2a}$


就是 Markdown 语法换了种表现形式,# 表示一级标题,##表示二级标题。### 表示三级标题



导出思维图














大道至简,是宇宙万物发展之规律,是中华文化之精髓,是中华道家哲学,是大道理极其简单,简单到一两句话就能说明白。所谓“真传一句话,假传万卷书”。“万物之始,大道至简,衍化至繁”出自老子的《道德经》。大道至简,不仅被哲学流派道家、儒家等所重视,也是人生在世的生活境界。


脑图,在一些特定场合,对于思路的呈现很有帮助。

因为日常的文档,主要是使用 Markdown 的文本格式书就,这个时候会比较尴尬了:需要用专门的脑图工具,重新整理一遍;因为并非 整理思路,这个时候,就显得特别浪费时间。


MarkRemap 在这个时候就派上了用途。它能直接将 Markdown 转为脑图,不同 Markdown App 的解析结果可能不完全一样,MarkRemap 也可以直接将 HTML 文档转为脑图。



写作

一般来说,能转成脑图结构的,我们能想象到 Markdown 大概写作的格式是这样的:


## 节点 1

– list item

– list item

    – sub list item

## 节点 2

– list item again

MarkRemak 实际上对格式的宽容度很高,即使不使用 列表 的语法,也会视情况,分割出子节点,如果认为不合适分节点出去的,会作为当前节点的备注,鼠标悬浮时候显示:


## 节点 1

> 这是引用

这里内容比较多,是其它的


## 节点 2

– 采用 list

– list item2


## 节点 3

子节点 3.1

子节点 3.2


在 MarkRemap 中,我们基本不用管最终渲染效果,只要专注于内容本身就可以了。如果唯一需要注意的是,节点自动着色 的功能,MarkRemap 在渲染一个节点的时候,默认是无背景色的,假设这个节点的文本是 空格+@@ 结尾的,就会有一个节点自动着色的逻辑,实际效果不错。


导出成 HTML 文件很有用

MarkRemap 可以将整个脑图导出为 PNG 图片,但更有用的是导出为 HTML 文件。

HTML 几乎是万能的格式,而且导出的文件,没有依赖外部的静态资源,如此一来:


通过 iCoud Drive 或者 Dropbox 云端方式的同步,导出的脑图在 iPad 上也可以直接进行操作。

如果有自己网站,将 HTML 文件直接放在网站上就能访问了,比如 https://scomper.me/members-map.html

进一步扩展

MarkRemap 的绘制引擎使用的是 D3.js,并且是在 markmap 这个库上重新定制的。


这意味着,拿到最终导出的 HTML,我们还可以按照自己的需要重新控制节点上的一些默认交互。

比如下面这段代码,插入到 HTML 页面的末尾,可以默认将所有的 2 级节点收起来。


<script>d3.selectAll(‘.markmap-node’).each(function(d){if(d.children&&d.children.length&&d.depth==2){when_click_dom(d)}})</script>


关于 MarkRemap 的由来

MarkRemap 是由 MarkEditor Pro 版 (SSPAI Store) 中的 Markdown to MindMap 插件独立而来的,它是免费的 App 。

在 ME 的插件中,其表现会和 MarkEditor 更契合,也提供了黑暗模式的对应,但 MarkEditor 中并不需要 HTML to MindMap,这个是专门为 MarkRemap 设计的。


MarkEditor 的很多功能,都依赖于一些 License 友好的第三方基础 package。MarkEditor 希望能以恰当的方式回馈于这个生态本身。


在网页中导出 .html 格式和 .svg 格式



在 VS Code 内导出 .html 格式



看完有没有感觉很方便?好了,赶快去试试吧!


引用链接

[1] markmap: https://markmap.js.org/

[2] markmap 插件: https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode


PS:防止找不到本篇文章,可以收藏点赞,方便翻阅查找哦。 


往期推荐



几款实用的内网穿透工具,推荐!

SpringBoot 太重,试试Vert.x!

更快更强!微软公布 VS Code Java 2022 年路线图…

SpringBoot 那些自带 Buff 的工具类,你用过几个?

MySQL 的 varchar 水真的太深了!!

比 Xshell 还好用的 SSH 客户端神器,MobaXterm 太爱了!



ITZOO版权所有丨如未注明 , 均为原创丨转载请注明来自IT乐园 ->神器 Markmap !!
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址