Markdown如何转思维导图

用户688360517680
3,262 阅读1分钟

如何将Markdown转化为思维导图

工具推荐

以下是几种常用的方法和工具：

使用Markmap工具-开源推荐

Markmap 是一个将Markdown转换为思维导图的工具，它可以将Markdown文件转换为可视化、可交互的HTML格式的思维导图。以下是使用Markmap的步骤：

  1. 安装Markmap：  # 方法1：使用yarn yarn global add markmap-lib # 方法2：使用npm npm i markmap-lib -g

在线使用：markmap.js.org/repl ，或者在vscode中使用插件

  1. 转换Markdown文件： 假设有一个Markdown文件 example.md，内容如下：  # 标题 ## 子标题 - 列表项1 - 列表项2 使用以下命令将其转换为思维导图：  $ markmap example.md 转换成功后，会在同级目录生成一个 example.html 文件，HTML文件会自动打开1。

使用Boardmix工具

Boardmix 是一款在线思维导图软件，内置了AI一键生成思维导图的功能。以下是使用Boardmix的步骤：

  1. 打开Boardmix： 在浏览器中打开Boardmix的首页，点击“新建空白思维导图”，创建一个新的导图文件。
  2. 导入Markdown文件： 在打开的文件中，点击左上角的“设置”，选择“导入 > Markdown”，上传本地的Markdown文件。
  3. 生成思维导图： 上传文件后，点击“生成思维导图”，Boardmix AI会自动读取并分析文件内容，生成思维导图2。

使用Typora和XMind

如果你喜欢使用Typora编辑Markdown，可以通过导出OPML文件并在XMind中导入来生成思维导图。以下是步骤：

  1. 使用Typora导出OPML文件： 打开Markdown文件，选择“文件 > 导出 > OPML”。如果是第一次使用，会提示安装OPML相关插件。
  2. 在XMind中导入OPML文件： 打开XMind，选择“文件 > 导入 > OPML文件”，选择刚才导出的OPML文件，即可生成思维导图3。

MarkMap的使用

使用方法：

  1. 在线试用：markmap.js.org/repl
  2. vscode插件：marketplace.visualstudio.com
  3. 命令行使用

在线试用

看一下下面官方给的例子

***

title: markmap
markmap:
colorFreezeLevel: 2
-------------------

## Links

*   [Website](https://markmap.js.org/)
*   [GitHub](https://github.com/gera2ld/markmap)

## Related Projects

*   [coc-markmap](https://github.com/gera2ld/coc-markmap) for Neovim
*   [markmap-vscode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode) for VSCode
*   [eaf-markmap](https://github.com/emacs-eaf/eaf-markmap) for Emacs

## Features

Note that if blocks and lists appear at the same level, the lists will be ignored.

### Lists

*   **strong** ~~del~~ *italic* ==highlight==
*   `inline code`
*   [x] checkbox
*   Katex: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ <!-- markmap: fold -->
    *   [More Katex Examples](#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md)
*   Now we can wrap very very very very long text based on `maxWidth` option
*   Ordered list
    1.  item 1
    2.  item 2

### Blocks

```js
console.log('hello, JavaScript')
```

| Products | Price |
| -------- | ----- |
| Apple    | 4     |
| Banana   | 2     |

![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/92ca6bf12f744f86b0e2fcf5f003e3ee~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3Njg4MzYwNTE3Njgw:q75.awebp?rk3s=f64ab15b&x-expires=1770648246&x-signature=lU%2Fd6mPpfhuIzRozmfUe5fBQPzc%3D)

可以直接生成html，svg格式的思维导图

最终效果如下：

支持超链接、富文本、数学公式、代码块、表格、图片等 image.png

命令行使用

安装 markmap-lib

# 方法 1 
$ yarn global add markmap-lib
# 方法 2
$ npm i markmap-lib -g

1234

安装完成后查看版本

$ markmap -V
0.5.1
快速开始
STEP 1. 准备一个 Markdown 文件

假设有一个 Markdown 文件，名为 example.md

STEP 2. 使用 Markmap 将 Markdown 转换为思维导图

不添加任何选项，直接转换：

markmap example.md

1

转换成功后，会在 example.md 的同级目录生成一个 example.html 文件，HTML 文件会自动打开。

vscode插件

image.png

这个开源工具还可以集成到前端中，具体的有兴趣的可以研究研究官方文档

参考文章：

blog.csdn.net/wirelessqa/… www.bilibili.com/read/cv3486… blog.csdn.net/zixiao217/a… zhuanlan.zhihu.com/p/460465602

avatar
文章
阅读
粉丝