markmap入门

1、它是干啥的?

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

  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

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐