心智圖
心智圖是一種用來以圖形方式組織資訊、顯示整體各部分之間關係的圖表。它通常是圍繞一個主題建立的,主題被畫在空白頁面的中心,然後將與之相關的想法表現形式新增到周圍。主要思想直接連接到主題,其他的想法則從這些主要思想分支出來。
心智圖範例: 代碼
複製
嵌入
mindmap
root((mindmap))
Origins
Long history
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
語法
建立心智圖的語法很簡單,並且依賴縮排來設定階層結構中的層級。
在下面的範例中,你可以看到 3 個不同的層級。第一層從文字左側開始;第二層有兩行從同一欄開始,定義節點 A。第三層文字比前幾行縮排更多,定義節點 B 和 C。
複製
嵌入
mindmap
Root
A
B
C
總之,這是一個簡單的文字大綱,其中根節點名為 Root,它有一個子節點 A。A 又有兩個子層 B 和 C。在下圖中,我們可以看到它渲染為心智圖的樣式。
代碼
複製
嵌入
mindmap
Root
A
B
C
透過這種方式,我們可以使用文字大綱來產生分層心智圖。
不同形狀
Mermaid 心智圖可以使用不同的形狀來顯示節點。指定節點形狀時,語法類似於流程圖節點,先是一個 ID,然後是形狀定義,文字放在形狀的顯示框中
心智圖可以顯示以下形狀:
矩形
代碼
複製
嵌入
mindmap
id[I am a square]
圓角矩形
代碼
複製
嵌入
mindmap
id(I am a rounded square)
圓
代碼
複製
嵌入
mindmap
id((I am a circle))
爆炸氣泡
代碼
複製
嵌入
mindmap
id))I am a bang((
雲
代碼
複製
嵌入
mindmap
id)I am a cloud(
六邊形
代碼
複製
嵌入
mindmap
id{{I am a hexagon}}
預設
代碼
複製
嵌入
mindmap
I am the default shape
圖示和類別
圖示
與流程圖一樣,你可以為節點新增圖示,但使用了更新的語法。以字型為基礎的圖示樣式在整合過程中新增,這樣它們在網頁中就可使用。你可以使用 ::icon() 語法將它們新增到心智圖節點中。
代碼
複製
嵌入
mindmap
Root
A
::icon(fa fa-book)
B(B)
::icon(mdi mdi-skull-outline)
類別
同樣,新增類別的語法與流程圖類似。你可以使用三個冒號 ::: 來新增類別,類別名稱之間用空格分隔。在下面的範例中,其中一個節點附加了兩個自訂類別:urgent 將背景變為紅色,文字變為白色;large 增大字型大小:
代碼
複製
嵌入
mindmap
Root
A[A]
:::urgent large
B(B)
C
Markdown 字串
Markdown 字串功能透過提供更靈活的字串類型來增強心智圖,支援粗體和斜體等文字格式選項,並且能夠在標籤內自動換行。
代碼
複製
嵌入
mindmap
id1["`**Root** with
a second line
Unicode works too: 🤓`"]
id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
id3[Regular labels still works]
格式化:
- 要將文字加粗,請在文字前後使用雙星號 **。
- 要將文字設為斜體,請在文字前後使用單星號 *。