Mermaid

外觀

探索 Mermaid 創造者推出的 Mermaid 白板

心智圖 ​

心智圖：目前這是一個實驗性的圖表。語法和屬性在未來版本中可能會更改。除了圖示整合是實驗部分之外，語法是穩定的。

「心智圖是一種用於視覺化組織資訊成層次結構的圖表，顯示整體各部分之間的關係。它通常圍繞單一概念建立，在空白頁面的中心繪製為圖像，並在其中添加相關的觀點表示，例如圖像、文字和部分文字。主要觀點直接連接到中心概念，而其他觀點則從這些主要觀點分支出來。」 - 維基百科

心智圖的範例。​

語法 ​

建立心智圖的語法很簡單，並依靠縮排來設定層次結構中的層級。

在以下範例中，您可以看到有 3 個不同的層級。一個從文字的左邊開始，另一個層級有兩行從相同的欄位開始，定義節點 A。最後還有一個層級，文字的縮排比先前的行更深，定義節點 B 和 C。

mindmap
    Root
        A
            B
            C

總之，這是一個簡單的文字大綱，其中根層級有一個稱為 Root 的節點，它有一個子節點 A。A 又有兩個子節點 B 和 C。在下面的圖表中，我們可以看到它呈現為心智圖。

透過這種方式，我們可以使用文字大綱來產生階層式心智圖。

不同的形狀 ​

Mermaid 心智圖可以使用不同的形狀顯示節點。當指定節點的形狀時，語法類似於流程圖節點，具有 ID，後跟形狀定義，以及形狀分隔符號內的文字。在可能的情況下，我們嘗試/將嘗試保持與流程圖相同的形狀，即使它們並非從一開始就全部支援。

心智圖可以顯示以下形狀

方形 ​

圓角方形 ​

圓形 ​

爆炸 ​

雲朵 ​

六邊形 ​

預設 ​

將會新增更多形狀，從流程圖中可用的形狀開始。

圖示和類別 ​

圖示 ​

與流程圖一樣，您可以使用更新的語法將圖示新增至節點。基於字型的圖示樣式是在整合期間新增的，以便它們可供網頁使用。這不是圖表作者可以執行的操作，而是必須由網站管理員或整合者完成。一旦圖示字型就緒，您可以使用 ::icon() 語法將它們新增至心智圖節點。您將圖示的類別放在括號內，就像以下範例中顯示的 material design 和 Font Awesome 5 的圖示一樣。我們的目標是這種方法應該用於所有支援圖示的圖表。實驗功能： 這個更廣泛的範圍也是心智圖屬於實驗性質的原因，因為此語法和方法可能會變更。

類別 ​

同樣地，新增類別的語法與流程圖類似。您可以使用三個冒號，後接以空格分隔的 css 類別來新增類別。在以下範例中，其中一個節點附加了兩個自訂類別 urgent，將背景變成紅色，文字變成白色，而 large 則增加了字型大小

這些類別需要由網站管理員提供。

不明確的縮排 ​

實際的縮排並不重要，僅與先前的行比較。如果我們以先前的範例並稍微打亂它，我們可以看看計算是如何執行的。讓我們從將 C 的縮排小於 B 但大於 A 開始。

mindmap
    Root
        A
            B
          C

這個大綱是不明確的，因為 B 明顯是 A 的子節點，但當我們移動到 C 時，清晰度就消失了。C 的縮排既不高於 B，也不是與 B 相同的縮排，因此它並非 B 的子節點。唯一明確的是，第一個縮排較小的節點（表示父節點）是 A。然後，Mermaid 依靠這個已知的真實情況，並補償不明確的縮排，並選擇 A 作為 C 的父節點，直到得到相同的圖表，其中 B 和 C 是同級節點。

Markdown 字串 ​

「Markdown 字串」功能透過提供更通用的字串類型來增強心智圖，該字串類型支援粗體和斜體等文字格式設定選項，並自動將文字包裝在標籤內。

格式設定

  • 對於粗體文字，請在文字前後使用雙星號 **。
  • 對於斜體文字，請在文字前後使用單星號 *。
  • 使用傳統字串，您需要新增
    標籤才能讓文字在節點中換行。但是，markdown 字串在文字過長時會自動換行，並允許您只需使用換行字元而不是
    標籤即可開始新行。

與您的程式庫/網站整合。​

心智圖使用實驗性的延遲載入和非同步渲染功能，未來可能會變更。從 9.4.0 版本開始，此圖表已包含在 mermaid 中，但使用延遲載入以縮減 mermaid 的大小。為了能夠在未來新增更多圖表，這一點很重要。

您仍然可以使用 9.4.0 之前的版本將包含心智圖的 mermaid 新增至網頁

html
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.3.0/dist/mermaid.esm.min.mjs';
  import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/dist/mermaid-mindmap.esm.min.mjs';
  await mermaid.registerExternalDiagrams([mindmap]);
</script>

從 9.4.0 版本開始，您可以將此程式碼簡化為

html
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>

您也可以參考線上編輯器中的實作 這裡，以了解非同步載入是如何完成的。