心智圖(mindmap)又稱思維導圖、腦力激盪圖,在市面上有非常多繪製的工具,例如 xmind 等,但是通常都有一個問題,需要安裝特定程式才能夠瀏覽。
markmap 的優點在於使用 Markdown 語法,能夠自動轉換為心智圖(mindmap),檔案小、軟體免費、開源,能夠匯出為 SVG、HTML 等格式。
官方範例:
Markmap 的副檔名比較特別,是 .mm.md ,例如 test.mm.md
在 VS Code 右下角還有快捷鍵:
由左至右分別是: 官網、放大、縮小、依據視窗大小調整、循環切換至下一個節點、編輯(開啟檔案編輯視窗)、匯出(產生 HTML)
也可以至官網產生 SVG 圖片
另外常用的語法還有:
參考資料:
markmap
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 的擴充套件: MarkmapMarkmap 的副檔名比較特別,是 .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
留言
張貼留言
如果有任何問題或建議,都歡迎留言或來信: a@ruyut.com