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. 嘿嘿
转换为思维导图
<完>