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. 嘿嘿
轉換爲思維導圖
<完>
