如何寫 Mermaid 流程圖：方向、節點與箭頭。

方向

第一行指定圖表類型與方向。flowchart 與較舊的 graph 都可以。

• TD 或 TB：由上而下
• BT：由下而上
• LR：由左而右
• RL：由右而左

流程簡短、寬度放得進一頁時選 LR，較長的流程選 TD。

節點形狀

節點是一個 id，後面可以接括號內的文字。括號的種類決定形狀：

flowchart LR
    a[Rectangle]
    b(Rounded)
    c([Stadium])
    d[[Subroutine]]
    e[(Database)]
    f((Circle))
    g{Decision}
    h{{Hexagon}}
    i[/Parallelogram/]

沒有括號的節點只會顯示它的 id。之後可以只用 id 再次提到節點，所以形狀與文字只需寫一次。

連線與標籤

連線把兩個節點接起來。箭頭的樣子表示連接的種類：

flowchart LR
    A --> B
    B --- C
    C -.-> D
    D ==> E
    E -->|label| F
    F -- text --> G

• --> 是箭頭，--- 是沒有箭頭的線
• -.-> 是虛線箭頭，==> 是粗箭頭
• -->|label| 或 -- label --> 可在連線上加文字
• A --> B & C 把一個節點連到多個，A --> B --> C 則串接連線

當節點需要更多空間時，可以加上虛線讓連線變長，例如 ---->。

子圖

子圖把節點歸在一個有標籤的方框中。它以 subgraph 開始，以 end 結束：

flowchart TD
    subgraph client [Client]
        A[Browser] --> B[App]
    end
    subgraph server [Server]
        C[API] --> D[(Database)]
    end
    B --> C

括號中的字是標題，前面的字是可以連線的 id。子圖內部可以有自己的 direction LR 行，不過如果裡面的節點連到外面，方向就會被忽略。

完整範例

綜合起來，這是一個小型發佈流程，包含一個判斷、一個回頭的迴圈和一個成組的步驟：

flowchart TD
    A([Start]) --> B[Write the change]
    B --> C{Tests pass?}
    C -->|No| B
    C -->|Yes| D[Open a pull request]
    subgraph review [Review]
        D --> E{Approved?}
        E -->|No| B
    end
    E -->|Yes| F[(Merge)]

從頭讀起：體育場形狀代表開始，菱形是問題，有標籤的箭頭是答案，圍住兩個節點的方框是審查。把每個判斷寫成問題、每個箭頭寫成答案，流程圖不需要解釋也讀得懂。

註解與樣式

以 %% 開頭的行是註解，不會被繪製。要替節點上色，先定義一個類別再套用：

flowchart TD
    %% the happy path
    A[Start]:::good --> B[Done]:::good
    classDef good fill:#d4f4dd,stroke:#2d7a46

樣式請保持克制。多數流程圖顏色少一點更好讀，而且樣式在淺色與深色外觀下看起來可能不同。

常見錯誤

• 節點文字中出現小寫的 end 會讓圖表壞掉。請寫 End，或把文字加上引號。
• 緊接在連線之後、以 o 或 x 開頭的節點 id，例如 A---oB，會被讀成圓形或叉叉連線。請加一個空格或改成大寫。
• 標籤中的特殊字元。括號、圓括號與冒號需要雙引號：A["Save (draft)"]。
• 沒有第一行。沒有 flowchart TD 就什麼都不會畫。
• 節點太多。有三十個方框的流程圖很難讀。請拆開，或使用子圖。

圖表失敗時，Mermaid 會顯示錯誤訊息，文字仍留在你的檔案中供你修正。

繪製出來

GitHub 會繪製 Markdown 檔案中的 Mermaid 區塊，DotMD 也是：離線進行，並以淺色或深色外觀配合頁面。在編輯器中，Insert → Diagram 會把可運作的流程圖放進文件，預覽會隨你輸入重新繪製。同一份指南也涵蓋循序圖、類別圖、狀態圖、ER 圖與甘特圖。至於圍欄語法本身，請看 Markdown 程式碼區塊。

關於 Mermaid 流程圖的常見問題

更多問題