markmap入门

旧城等待， 2022-12-27 09:06 451阅读 0赞

# markmap入门 #

## 1、它是干啥的？ ##

支持 Markdown 语法的思维导图工具，可支持在线编写思维导图，或者在VS Code内编写思维导图

1.  [在线使用][Link 1]
    
    ![image-20201209211014160][]
2.  VS Code内使用
    
    ![image-20201209211106309][]

## 2、参考资料 ##

1.  首先当然是参考官网啦：https://markmap.js.org/
2.  然后是别人的博客啦：https://blog.csdn.net/u013129932/article/details/110288646

## 3、如何使用 ##

### 3.1、在线使用 ###

1.  进入官网后，点击【Try it out】，可以在线绘制思维导图
    
    ![image-20201209210645514][]
2.  然后就可以编写思维导图啦，是不是超级方便~~~
    
    ![image-20201209211014160][]

### 3.2、VS Code 内使用 ###

1.  首先需要在 VS Code 内安装 markup 插件
    
    ![image-20201209222211191][]
2.  markup 要求思维导图的后缀名为 `.mm.md`，然后用 VS Code 打开就能编辑啦
    
    ![image-20201209211106309][]

### 3.3、语法格式 ###

先从官网的代码开始研究

# 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}$

> 语法规则

1.  感觉就是 Markdown 语法换了种表现形式，`#` 表示一级标题，`##`表示二级标题。`###` 表示三级标题
    
    ![image-20201209223020773][]
2.  emmm，然后疯狂用各种 Markdown 语法就完事了

### 3.4、导出思维图 ###

1.  在网页中导出 `.html` 格式和 `.svg` 格式
    
    ![image-20201209224050421][]
2.  在 VS Code 内导出 `.html` 格式
    
    ![image-20201209223307367][]

[Link 1]: https://markmap.js.org/
[image-20201209211014160]: /images/20221120/40756f0424ad4bd0a8fc35a7620b52d8.png
[image-20201209211106309]: /images/20221120/83606863e0a0458d9e6003f100e48805.png
[image-20201209210645514]: /images/20221120/f9e916242c6e481b802c4389a3df9a80.png
[image-20201209222211191]: /images/20221120/8820b4b8adae44a48c2115d9e675f7c2.png
[image-20201209223020773]: /images/20221120/82936389696c4800b69e53e7ce408533.png
[image-20201209224050421]: /images/20221120/98a3082f713f4b908d03d98d67e9e3fe.png
[image-20201209223307367]: /images/20221120/1923d4788c874428b4f494d9f3ed79f7.png