Vue3使用Markmap文字识别可视化思维导图

Markmap 是一个可以将 markdown 通过思维导图的方式进行可视化的开源工具，是 markdown 和 mindmap 的结合，它解析 markdown 内容并提取其层次结构并呈现交互式思维导图。

试用

我们可以直接通过 markmap 的在线网站直接使用该工具，试用地址：markmap.js.org/repl/。我们可以直接根据官网的语法来进行学习：

# Markmap

## 链接

- <https://markmap.js.org/>
- [GitHub](https://github.com/gera2ld/markmap)

## 相关

- [coc-markmap](https://github.com/gera2ld/coc-markmap)
- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)

## 特性

- links
- **inline** ~~text~~ *styles*
- multiline
  text
- `inline code`
-
    ```js
    console.log('code block');
    ```
- Katex - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

感觉就是 Markdown 语法换了种表现形式，#表示一级标题，##表示二级标题，###表示三级标题。编写完成后可以将可视化的思维导图导出成交互式的 HTML 或者 svg 图片。

VSCode 插件

更让人喜欢的是该工具还提供了 VSCode 插件，在 VSCode 中搜索 markmap 即可安装该插件，可以直接在 VSCode 中预览 markmap：

markmap 要求思维导图的后缀名为 .mm.md，然后用 VSCode 打开就能编辑啦：

命令行工具

此外我们还可以使用 markmap 命令行工具，比如在本地终端中使用 markmap 命令行，使用如下所示的命令即可：

$ npx markmap-cli markmap.md

当然也可以全局安装它：

$ yarn global add markmap-cli
$ markmap markmap.md

还可以使用 -w 参数来 watch 文件，以便可以编辑 markdown 文件并即时获取更新：

$ markmap -w markmap.md

Vue实操

如果你想在Vue中使用markmap,那么官方文档的dome是很好的素材：