語法與效果

Mermaid 圖表的定義通常放在一個 mermaid 代碼塊中。每種圖表類型有不同的語法規則，下面通過一些常用的圖表的基本語法及生成效果。

時序圖

語句：

sequenceDiagram
    participant A as User
    participant B as Server
    A->>B: Request data
    B-->>A: Response data

效果：

甘特圖

語句：

gantt
    title Project Plan
    dateFormat  YYYY-MM-DD
    section Preparation
    Setup :a1, 2024-05-01, 5d
    section Development
    Coding :a2, after a1, 10d
    Testing :a3, after a2, 5d

效果：

類圖

語句：

classDiagram
    class Vehicle {
      +String model
      +int year
      +void drive()
    }
    class Car {
      +String make
    }
    Vehicle <|-- Car

效果：

更多語法細節，可參考官網mermaid.js.org

常用工具

本地

typora

綜合體驗較好。需要比較高的版本，正式版之后需要收費。

jetbrains全家桶mermaid插件

配合markdown插件，可以在ide直接上寫。實時預覽卡頓明顯，不支持導出。

常規文本編輯工具：

最簡潔工具，純文本編輯，無法預覽。

本地可通過npm安裝mmdc生成圖片，安裝可在npmjs搜索mermaid-cli，如果已安裝npm，可以通過以下簡單指令直接安裝：

npm install -g @mermaid-js/mermaid-cli

安裝完成后，將mermaid語句保存成mmd文件，可通過以下命令生成圖片：

mmdc -i flow.mmd -o flow.png -s 2

在線

語雀

綜合體驗較好，目前無法單獨導出mermaid生成的圖片。

官方在線編輯網站

瀏覽器直接在線編輯，地址：mermaid.live，支持導出mermaid圖。

缺點

1、可能與實現有關，無論用什么平臺，實時生成預覽圖都會有比較明顯的卡頓。

2、較難對生成的圖片做調整，涉及比較復雜的圖，可能不是最優選。