關於 Mermaid

如果 NotebookLM 要「畫」出圖表給你看，它內部可能會將 YAML 轉換成 Mermaid 這種專門繪圖的代碼。

什麼是 Mermaid？

Mermaid 是一款基於 JavaScript 的繪圖工具，它最酷的地方在於：讓你用「寫程式碼」的方式來「畫圖」。

它使用類似 Markdown 的純文字語法來描述圖表結構，然後自動渲染成精美的 SVG 或 PNG 圖片。這意味著你不需要打開 Photoshop 或 Visio 慢慢拉框框，只需要寫幾行字，圖就出來了。

為什麼 Mermaid 這麼受歡迎？

1. 版本控制友好的：

因為它是純文字，你可以像管理程式碼一樣用 Git 來追蹤圖表的修改紀錄。

2. 整合性極高：

GitHub、GitLab、Notion、Obsidian 以及許多 Markdown 編輯器都內建支援 Mermaid。

3. 效率：

修改圖表只需要改一個字，不需要重新排列所有方塊與連線，系統會自動幫你重新佈局。

Mermaid 常見的圖表類型與語法

1. 流程圖 (Flowcharts)

這是最常用的功能。語法非常直覺：A –> B 表示 A 指向 B。

程式碼片段
graph TD
    A[開始] --> B{是否成功?}
    B -- 是 --> C[完成]
    B -- 否 --> D[重試]
    D --> B

 

2. 時序圖 (Sequence Diagrams)

常用於描述系統之間的互動或對話流程。

程式碼片段
sequenceDiagram
    User->>Browser: 輸入網址
    Browser->>Server: 發送 GET 請求
    Server-->>Browser: 回傳 HTML 頁面
    Browser-->>User: 顯示網頁

 

3. 甘特圖 (Gantt Charts)

用於專案管理，標示任務的時間軸。

程式碼片段
gantt
    title 專案開發進度
    section 企劃階段
    需求分析 :a1, 2026-03-20, 3d
    原型設計 :after a1, 5d
    section 開發階段
    前端開發 :2026-03-28, 10d
    後端開發 :2026-03-28, 12d

gantt
    title 項目開發進度
section 規劃階段需求分析:a1, 2026-03-20, 3d
原型  設計:after a1, 5d

 section 開發階段前端開發:2026-03-28, 10d
後端開發:2026-03-28, 12d

 

Mermaid 與 YAML 的關係

Mermaid 其實就是一種「描述語言」。

• YAML/JSON 是用來儲存資料結構。
• Mermaid 是用來描述視覺結構。

在像 NotebookLM 這樣的 AI 工具中，背後的邏輯通常是：

• AI 讀取你的資料（文字）。
• AI 決定資料的階層關係（內部可能處理成 YAML）。
• AI 將這些關係轉化為 Mermaid 語法。
• 網頁前端根據 Mermaid 語法把圖畫出來。

總結：Mermaid 的核心精神

“Visualizing data with code.” (用程式碼視覺化資料)

Mermaid 語法

Mermaid 的核心邏輯就是「用文字描述關係，讓程式自動排版」。

底下用最實用的三種語法（流程圖、時序圖、心智圖）的程式碼與語法說明。

1. 流程圖(Flowchart)-最常用於邏輯判斷

流程圖，最重要的是在「於定義方向」與「形狀」。

程式碼片段

graph TD
    %% TD 表示 Top to Down（由上而下），LR 表示 Left to Right（由左而右）
    
    Start([開始]) --> Input[/輸入資料/]
    Input --> Check{資料正確?}
    
    Check -- 是 --> Process[執行處理]
    Check -- 否 --> Error[顯示錯誤]
    
    Process --> End([結束])
    Error --> Input


【語法說明】

• 方向： TD (上到下)、BT (下到上)、LR (左到右)、RL (右到左)。
• 節點形狀：
• [ ] 矩形：一般程序。
• { } 菱形：決策/判斷。
• ([ ]) 圓角：開始或結束。
• [/ /] 平行四邊形：資料輸入/輸出。
• 連線： --> 箭頭，-- 文字 --> 可以在線上加註解。

 

2. 時序圖(Sequence Diagram) —— 用於流程與對話

適合描述角色（Actor）之間如何互動，這在解釋 API 或通訊協議時非常強大。

程式碼片段

sequenceDiagram
    autonumber
    participant U as 使用者
    participant S as 伺服器
    participant DB as 資料庫

    U->>S: 登入請求 (帳號/密碼)
    S->>DB: 查詢使用者是否存在
    DB-->>S: 回傳使用者資料
    
    alt 密碼正確
        S-->>U: 登入成功 (Token)
    else 密碼錯誤
        S-->>U: 登入失敗 (401)
    end


【語法說明】

• participant： 定義角色，as 可以設定簡寫（如 U 代表使用者）。
• 連線樣式：
• ->> 實線箭頭（主動請求）。
• )-->> 虛線箭頭（回應）。
• 邏輯區塊： alt / else 用於描述條件判斷（If/Else）。
• autonumber： 自動幫步驟加上編號。

 

3. 心智圖 (Mindmap) —— 整理點子與架構

這是 Mermaid 較新的功能，非常適合用來做知識分類，語法跟 YAML 或 Markdown 的清單非常像。

程式碼片段

mindmap
  root((我的旅遊計畫))
    交通方式
      高鐵
      租車
    住宿地點
      飯店
      民宿
    必吃美食
      在地小吃
      網美咖啡廳


【語法說明】

• 階層： 使用「縮排」來決定父子關係。
• 節點樣式：
• (( ))圓形：通常用於中心主題。
• ) ( 雲朵形：強調某個分支。
• {{ }} 六角形。

可以直接到 👉 Mermaid Live Editor 網站，練習！

將上面的程式碼直接貼到框框區域裡面。