Markdown 与思维导图的相互转换
作者：毕小烦
思维导图重在逻辑梳理和推演，Markdown 重在简化写作的排版，若能将两者优点结合，那可真是太好了。
比如，
先使用思维导图梳理写作思路，再使用 Markdown 丰富细节，或者将已完成的 Markdown 文章导出为思维导图，重新理清逻辑。
具体该怎么做呢？
1. 思维导图转换为 Markdown
思维导图转换为 Markdown 比较简单，通过软件导出即可。
假如你使用的思维导图软件是 XMind 2020（XMind Zen），导出 Markdown 的步骤是：
菜单栏：文件 → 导出 → Markdown
用法比较简单，这里就不演示了。
2. Markdown 转换为思维导图
markmap-lib 是一个将 Markdown 转换为思维导图的工具，更准确的说是将 Markdown 转换为可视化、可交互的 HTML 格式的思维导图。
markmap-lib 提供了命令行（markmap）和在线（https://markmap.js.org/repl）两种使用方式。
基本信息
| 工具名称 | markmap-lib |
|---|---|
| 当前版本 | 0.5.1 |
| 开发语言 | JavaScript |
| 适用平台 | macOS、Linux、Windows |
| 开源地址 | https://github.com/gera2ld/markmap-lib |
环境准备
安装 markmap-lib
# 方法 1
$ yarn global add markmap-lib
# 方法 2
$ npm i markmap-lib -g
安装完成后查看版本
$ markmap -V
0.5.1
快速开始
STEP 1. 准备一个 Markdown 文件
假设有一个 Markdown 文件，名为 example.md，内容如下：
# 毕小烦
## 基本信息
- 年龄：保密
- 性别：男
### 联系方式
* [博客](https://blog.csdn.net/wirelessqa)
* [微博](https://weibo.com/wirelessqa)
* 微信公众号请搜索：毕小烦
## 出版作品
- [了不起的 Markdown](https://item.jd.com/12669274.html)
- 精通 AndroidStudio
## 兴趣爱好
- *啤酒*
- **咖啡**
- **跑步**
---
- 看书
- 写作
STEP 2. 使用 Markmap 将 Markdown 转换为思维导图
不添加任何选项，直接转换：
markmap example.md
转换成功后，会在 example.md 的同级目录生成一个 example.html 文件，HTML 文件会自动打开。
如下图所示：
这个 HTML 文件是可交互的，你可以：
- 缩放文件
- 拖动文件
- 收起和展开节点
使用指南
命令行的更多用法
用法：
markmap [选项] <Markdown文件>
选项：
-V,--version：查看版本号-o, --output<输出的HTML文件名>：指定输出的文件名--no-open：转换完成后不打开 HTML 文件
例如：
- 指定输出的 HTML 文件名
$ markmap example.md -o test.html
- 转换完成后不打开 HTML 文件
$ markmap example.md --no-open
在线使用 Markmap
如果你不想安装命令，也可以在线使用。
操作步骤：
-
打开在线地址：https://markmap.js.org/repl
-
左边输入 Markdown 标记，右边可实时渲染
如下图所示：
- 编辑完成后，在编辑器的右下角可选择下载 SVG 格式的矢量图或可交互的 HTML 文件。
支持的 Markdown 语法
从前面的例子你应该看出来了，markmap-lib 支持了一些必要的 Markdown 语法。
比如：
- Markdown 标题的层级对应思维导图的层级
- 文本格式支持粗体、斜体、链接
- 也可使用列表（有序和无序）组织思维导图的层级
实例演示
Markdown（使用列表组织层次）：
- 使用列表组织层级
- 1.无序列表
- 呵呵
- 吼吼
- 2.有序列表
1. 哈哈
2. 嘿嘿
转换为思维导图
<完>
