神器Markmap！！！

系统管理员 2022-12-26 14:27 132阅读 0赞

公众号关注 “五分钟学算法”

设为 “星标”，带你挖掘更多开发神器！

![format_png][]

前言

相信很多程序员朋友都有在用 **Markdown** 吧，我是大三找实习工作的时候接触到的，简历就是用 Markdown 写的。

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

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

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

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

不过最近我发现一款很好用的工具，可以很好的解决上边的问题，在此分享给大家。以下是本文的重点内容对应的思维导图，就是用这款工具生成的。

![null][] 本文重点

## 工具介绍 ##

这款工具叫 markmap\[1\]。

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

![null][null 1] 官网页面

## 工具使用 ##

### 在线版 ###

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

![null][null 2] 使用页面

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

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

![null][null 3] 动态效果

### 离线版 ###

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

在 Visual Studio Code 上安装 markmap 插件\[2\]，如下图。

![null][null 4] vscode 使用插件

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

![null][null 5] vscode 使用界面

这款工具简单又好用吧，如果对你有用的话，记得给我点个“在看”，顺便分享给身边的朋友，感谢！

--------------------

引用链接

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

[format_png]: /images/20221120/3f897b21a1ec46919be50011f054bc60.png
[null]: /images/20221120/d23d31c94f5c4e60be681dc289036024.png
[null 1]: /images/20221120/fce3e9ba1815412c85a10e9d8ce5c7e2.png
[null 2]: /images/20221120/589b875f931849f4b9c5fe5b0a13dab6.png
[null 3]: /images/20221120/62f7c872793c4dceaefbf3b6708e4b8d.png
[null 4]: /images/20221120/abc3d43dae0946819d685332b35461d2.png
[null 5]: /images/20221120/3e73d5545d54426e8c522c360c626ad2.png