双剑合璧:Markdown 与思维导图的相互转换

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 文件

例如:

  1. 指定输出的 HTML 文件名
$ markmap example.md -o test.html
  1. 转换完成后不打开 HTML 文件
$ markmap example.md --no-open

在线使用 Markmap

如果你不想安装命令,也可以在线使用。

操作步骤:

  1. 打开在线地址:https://markmap.js.org/repl

  2. 左边输入 Markdown 标记,右边可实时渲染

    如下图所示:

在这里插入图片描述

  1. 编辑完成后,在编辑器的右下角可选择下载 SVG 格式的矢量图或可交互的 HTML 文件。

支持的 Markdown 语法

从前面的例子你应该看出来了,markmap-lib 支持了一些必要的 Markdown 语法。

比如:

  • Markdown 标题的层级对应思维导图的层级
  • 文本格式支持粗体、斜体、链接
  • 也可使用列表(有序和无序)组织思维导图的层级
实例演示

Markdown(使用列表组织层次):

- 使用列表组织层级
	- 1.无序列表
    	- 呵呵
        - 吼吼
    - 2.有序列表
    	1. 哈哈
		2. 嘿嘿

转换为思维导图

在这里插入图片描述
<完>
在这里插入图片描述

©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页