Mermaid 使用

graph TB
    a[矩形] --> b(圆角矩形)
    c[(圆柱)] --- d([椭圆])
    e[[子程序]] -- 文本 --- f((圆形))
    g>不对称形状] -- 文本 --> h{菱形}
    i{{六边形}} -.-> j[/平行四边形/]
    k[/梯形\\] -.- l[\\倒梯形/]

    b === c
    f ==> g

    subgraph one
        i 
        j
        k
        l
    end

    style a fill:#f9f,stroke:#333,stroke-width:4px
    classDef red fill:red,color:white;
    class b,c red

sequenceDiagram
    participant a as Alice
    participant b as Bob

    loop loop
        rect rgb(0, 200, 200)
            a->>+b: How are you?
            Note over a, b: 1234
            Note left of b : 5678
            b-->>-a: I am fine, thank you, and you?
        end
            a-)b: Me too.
            a->>a:  
    end

classDiagram
    Animal <|-- Duck : 继承
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

stateDiagram-v2
    state fork_state <<fork>>

    [*] --> fork_state
    fork_state --> State2 : 1234
    fork_state --> State3

    state State3 {
        [*] --> fir
        fir --> [*]
        --
        [*] --> sec
        sec --> [*]
    }

    state join_state <<join>>
    State2 --> join_state
    State3 --> join_state
    join_state --> State4

    note right of State4
        Important information! You can write
        notes.
    end note

    State4 --> [*]

erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string name
        string custNumber
        string sector
    }
    ORDER ||--|{ LINE-ITEM : contains
    ORDER {
        int orderNumber
        string deliveryAddress
    }
    LINE-ITEM {
        string productCode
        int quantity
        float pricePerUnit
    }

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h

pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5