Markmap - 在 VSCode 上使用 Markdown 語法繪製心智圖(mindmap)

心智圖(mindmap)又稱思維導圖、腦力激盪圖，在市面上有非常多繪製的工具，例如 xmind 等，但是通常都有一個問題，需要安裝特定程式才能夠瀏覽。

markmap 的優點在於使用 Markdown 語法，能夠自動轉換為心智圖(mindmap)，檔案小、軟體免費、開源，能夠匯出為 SVG、HTML 等格式。

官方範例:

    
---
markmap:
  colorFreezeLevel: 2
---

# markmap

## Links

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

## Related Projects

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

## Features

- links
- **strong** ~~del~~ *italic* ==highlight==
- multiline
  text
- `inline code`
-
    ```js
    console.log('code block');
    ```
- Katex
  - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
  - [More Katex Examples](#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md)
- Now we can wrap very very very very long text based on `maxWidth` option

    

在 VS Code 中使用

在官網上可以直接編輯，不過最建議的使用方式為安裝 VS Code 的擴充套件: Markmap

Markmap 的副檔名比較特別，是 .mm.md ，例如 test.mm.md

在 VS Code 右下角還有快捷鍵:

由左至右分別是: 官網、放大、縮小、依據視窗大小調整、循環切換至下一個節點、編輯(開啟檔案編輯視窗)、匯出(產生 HTML)

也可以至官網產生 SVG 圖片

基本語法

要使用非常簡單，要建立基本的心智圖只要 #, -, + 即可，最簡單的方式就是 # 的數量代表節點層級，一個 # 就是第一層，兩個 # 就是第二層，使用 - 或 + 代表最後一層，減號和加號不可混用，混用就會視為不同層級。

    

# 甲

## 大
## 中
## 小
 - 1
 - 2
 - 3

# 乙
 - 4
 - 5
 - 6

# 丙
### 7
### 8

+ 1
+ 2

 - A
 - B

+ ㄅ
+ ㄆ

# 123

    

另外常用的語法還有:

    

# 標記
- **粗體**
- ~~刪除線~~
- *斜體*
- ==高亮==

# 連結
- [Github](https://github.com/ruyut)
- <https: www.ruyut.com="">

# 區塊
- 
    `多行文字
    被擠在一起`

- 
  ```js
    console.log('Hello World');
    console.log('code block');
  ```
    

參考資料：
markmap