Mermaid 的語法支援以下功能:

以下將 mermaid 語法放入 code block 中,一一示範:

下面分別展示 Mermaid 支援的六種圖表:

流程圖

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

甘特圖

gantt
    title 甘特圖示範
    dateFormat  YYYY-MM-DD
    section 計畫
    項目1 :a1, 2019-06-01, 30d
    項目2 :after a1 , 20d
    section 評估
    項目3 :2019-06-12 , 12d
    項目4 : 24d

順序圖

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>+Bob: Hello Bob, how are you?
    Bob-->>-Alice: I'm good thanks!

類別圖

classDiagram
    class Animal {
        +name: string
        +age: int
        +eat(): void
    }
    class Dog {
        +breed: string
        +bark(): void
    }
    class Cat {
        +color: string
        +meow(): void
    }
    Animal <|-- Dog
    Animal <|-- Cat

狀態圖