Mermaid.js 思維導圖語法指南

什麼是思維導圖？

一個 思維導圖是一種以層級樹狀結構呈現的視覺化工具，用於捕捉、組織和結構化複雜的資訊流、腦力激盪的想法或專案分類。與規定線性程序步驟的流程圖不同，思維導圖能呈現中心核心概念與其各個子節點之間的連結，使其非常適合用於高階路徑規劃、功能分解結構或知識管理。

使用 Mermaid.js，您可使用標準的 Markdown 列表縮排來定義層級結構。引擎會自動處理節點定位、計算樹狀成長，並根據層級水平套用不同的節點形狀，讓您能視覺化數百個相互連結的節點，而無需手動對齊像素。

核心語法指南：元素與構造

在 Mermaid 中設計一個有效且可投入生產使用的思維導圖，需要掌握根節點定義、基於縮排的層級嵌套，以及視覺裝飾符號的使用。

1. 初始化思維導圖的根節點

您可在第一行使用 mindmap關鍵字來初始化思維導圖畫布。結構是透過定義一個根節點（您地圖的中心）並使用標準的空格縮排，在其下方嵌套子節點來建立：

mindmap
  root((核心概念))
    第一層節點
      第二層子節點

2. 控制節點幾何形狀

與流程圖類似，您可透過將文字包覆在特定的括號符號中，來注入視覺語境。這對於區分主要類別、次要任務與可執行項目非常推薦：

• (文字) — 圓角節點（預設）。
• ((文字)) — 雙圓角節點（通常保留給根節點）。
• [文字] — 方形節點。
• )文字( — 凸形/非對稱節點。
• {文字} — 六角形/括號節點。

3. 集成圖示與外部格式化

您可以透過使用「」語法，直接在文字字串中加入視覺圖示，以增強節點的可讀性::icon(...)語法。這讓您能一眼快速區分不同類型的節點（例如：人員、軟體、硬體或外部 API）：

思維導圖
  root((系統架構))
    (UI 層)
    ::icon(fa fa-desktop)
      [Web 應用程式]
    (資料層)
    ::icon(fa fa-database)
      [主要資料庫]

清晰層級布局的最佳實務

• 保持節點文字簡潔：思維導圖應用於快速瀏覽。請將節點標籤保持在三個詞或更少，以避免文字延伸超出螢幕寬度。
• 使用一致的幾何形狀：在整個樹狀結構中維持嚴格的形狀邏輯（例如：使用方形節點代表程式組件，六角形節點代表 API 端點，圓角節點代表實體基礎設施）。這種一致性讓地圖更容易理解。
• 限制嵌套深度：盡量將地圖的嵌套深度控制在四到五層以內。若某分支需要更深的嵌套，建議將其拆分為獨立的專用思維導圖，以維持整體畫布大小的可管理性。

真實世界中的 Mermaid.js 思維導圖範例與範本

範例 1：軟體開發生命週期（SDLC）分類

此功能藍圖將標準的 SDLC 階段組織成分類樹狀結構，並使用圖示來視覺化強調每個任務群組的性質。

思維導圖
  root((SDLC 階段))
    (規劃)
    ::icon(fa fa-tasks)
      [需求]
      [可行性]
    (開發)
    ::icon(fa fa-code)
      [架構]
      [實作]
    (品質)
    ::icon(fa fa-bug)
      [單元測試]
      [整合測試]
    (部署)
    ::icon(fa fa-cloud)
      [CI/CD 管道]
      [監控]

語法解析：透過使用root節點位於中心，並以縮排表示層級，引擎會對稱地生成分支。::icon(fa fa-...)語法會注入與 FontAwesome 兼容的圖示，將抽象的階段轉化為視覺上明顯、易於掃描的節點。

範例 2：企業級微服務功能拆解

此進階藍圖將電商平台拆解為技術功能模組，並使用幾何形狀來區分基礎設施模組與客戶端介面。

思維地圖
  根((電子商務平台))
    (使用者介面)
      [行動應用程式]
      [網頁儀表板]
    (服務層)
      [驗證 API]
      [訂單 API]
    (基礎設施)
      ((主要雲端供應商))
        [Redis 快取]
        [PostgreSQL 實例]

語法分解： 此地圖明確使用不同形狀來表示邏輯系統組件。這種清晰的視覺層次結構，讓利害關係人能夠立即區分高階服務與底層資料基礎。