Markmap 让你几行代码生成一个思维导图

前端小橙
4,825 阅读4分钟

「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」

前言

我们一起来学习一个新的库，Markmap，带你轻松上手！

正文

什么是Markmap?

一张图让你了解Markmap
Markmap => Markdown + mindmap

image.png

Markmap的作用

那我们就拆分Markmap 来讲他的作用

Markdown

我接触Markdown的时间比较晚，一直到实习了我才接触到Markdown语法，但是一接触我就爱上了。

平时我们写文章，文章的排版比较的乱，或者你使用word编辑，添加字体加粗，标题，每一步都需要用鼠标去修改，真的写一篇有层次的文章，需要花费大量的时间。

直到遇到了Markdown编辑器，真的是为程序员量身定做的，我觉得应该没有人会不喜欢Markdown语法吧，所有的文章，都可以通过一些语法，就可以呈现出一个非常好看的文章，非常的节省时间，并且好用，再也不用为文章的格式费时而发愁了。

只有自己亲自接触了才能真正体会到这种感受，Markdown的上手程度简单，上手非常快，学习成本很低，建议大家都可以去了解一下。

这边本人使用的编辑器是 Typora

image.png

mindmap

mindmap也就是思维导图

我想大家多多少少应该都接触过思维导图，但是很可能使用比较少，本人就是了解过，但是基本上不用这种情况。

但其实思维导图也是有很好的作用的，虽然看起来好像没啥用的样子，但是在复杂的关系结构的时候，他可以很好的帮你把关系理清，并且可视化，一眼看过去就很清晰。来做个对比

image.png VS

image.png

只要稍微复杂一点的关系，就可以很清晰的看出思维导图的作用了吧，其实还是很有必要的，它作为一种图象化工具，通过层级式发散式地组织主题，帮助我们更好的记忆、学习和思考。

思维导图工具有很多，这边附上本人使用的思维导图工具 ： xmind

image.png

Markmap

了解使用之前来介绍一下Markmap的作用吧： 就是使用Markdown语法，呈现出思维导图。
Markmap官网

在线版

如果你想体验一下的话，可以进入官网，有一个线上模式，直接在浏览器就可以测试。

image.png

他可以将Markdown 语法中的链接，加粗，删除线，斜体，单行代码，代码块，数学公式，转换成思维导图都有相应的视图效果。而且支持下载生成动态化的 html 文件以及 svg 文件。

如果你了解Markdown语法那应该看一眼就能知道Markdown语法和思维导图之间的层级关系是如何生成的。
如果你不了解Markdown语法，也可以很快得看出他们之间的关系，顺便还可以学习一下Markdown语法，简直一举两得。

离线版

在vscode编辑器中先安装插件 markmap

image.png

安装完之后vscode的右上角会出现一个图标，如果没有就重启一下vscode

image.png

使用需要创建一个xxx.mm.md的文件，后缀必须是.mm.md

image.png

编写好内容后，点击右上角的Markmap图标，就会自动生成思维导图了。

1644824991906.gif

生成之后右下角会出现一个导航，中有一个export，可以提供导出思维导图的html，将他保存至本地，打开，就会在浏览器打开思维导图了。

Markmap的使用

使用 Markmap 绘制思维导图，只需两个符号。

  • #：标题
  • -：列表
# 一级标题

## 二级标题

### 三级标题
#### ......
### 三级标题
- 子分支
- <https://www.baidu.com/>
- [GitHub](https://github.com/gera2ld/markmap)

## 二级标题

image.png

通过这段Markdown语法和图片结合来看，应该会很清楚， 几个#就是几级标题，#为一级标题、##为二级标题 通过图片可以看出标题的层级关系，- 为列表，处于标题下使用，可以有很多同级列表，但列表是最后一个层级，列表下面不能在衍生子分支。

了解这两个符号就已经可以写出思维导图的层级结构了。

接下来是一些特殊符号用来区分链接、代码等

# markmap //标题

## Links  //标题

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

## Related

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

## Features

- links
- **inline** ~~text~~ *styles*
- multiline
  text
- `inline code`
-
    ```js
    console.log('code block');
    ```
- Katex - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
  • <> 直接显示链接 可跳转
  • []() 显示内容隐含链接 可跳转
  • ~~ .. ~~ 删除线
  • ** ** 字体加粗
  • * * 字体斜体
  • `` 标记
  • ``` ``` 代码块 其实全都是Markdown语法，具体可以查一下Markdown语法的使用，很简单。 image.png

总结

到这就学习完Markmap的使用了，是不是很简单，学习一个新的知识也不难，Markmap 这款思维导图工具可有效的帮助经常编写文档的小伙伴们，在编写完后，生成一个类似于文档目录的思维导图，简单明了的可以看出该文章包含的哪些章节。如果对你有用的话，可以给我点个赞，分享给身边朋友，非常感谢读者朋友，也欢迎关注我，我会分享更多优质原创内容。

avatar
文章
阅读
粉丝