流程類
圖形化表達方式
思維類
結構化表達方式
筆記類
高效化表達方式

心智圖語法

心智圖

心智圖是一種用來以圖形方式組織資訊、顯示整體各部分之間關係的圖表。它通常是圍繞一個主題建立的,主題被畫在空白頁面的中心,然後將與之相關的想法表現形式新增到周圍。主要思想直接連接到主題,其他的想法則從這些主要思想分支出來。

心智圖範例:
代碼
                            
複製
嵌入
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]

格式化:

  • 要將文字加粗,請在文字前後使用雙星號 **。
  • 要將文字設為斜體,請在文字前後使用單星號 *。