mermaid 语法

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

graph TB
    Start --> Stop

graph LR
    id

graph LR
    id[带文字节点]

graph LR
    id(圆角节点)

graph LR
    id((圆形节点))

graph LR
    id>不对称节点]

graph LR
    id{菱形节点}

graph LR
    A-->B

graph LR
    A---B

graph LR
    A-- 文字 ---B

graph LR
    A--- |文字| B

graph LR
    A-- 文字 -->B

graph LR
    A--> |文字| B

graph LR;
   A-.->B;

graph LR
   A-. text .-> B

graph LR
   A ==> B

graph LR
   A == text ==> B

graph LR
    id1["This is the (text) in the box"]

graph LR
     A["A double quote:#quot;"] -->B["A dec char:#9829;"]

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
    linkStyle 0 stroke:#0ff,stroke-width:2px;
    linkStyle 3 stroke:#ff3,stroke-width:4px;

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5

graph LR
    A-->B

    %% 定义样式类
    classDef className fill:#f9f,stroke:#333,stroke-width:4px;

    %% 应用样式类，markdown里没效果
    class A className

classDef default fill:#f9f,stroke:#333,stroke-width:4px;

graph TD
   B["fa:fa-twitter for peace"]
   B-->C[fa:fa-ban forbidden]
   B-->D(fa:fa-spinner);
   B-->E(A fa:fa-camera-retro perhaps?);

sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!

sequenceDiagram
    A->B: 无箭头实线
    A-->B: 无箭头虚线(点线)
    A->>B: 有箭头实线
    A-->>B: 有箭头实线
    A-x B: 有箭头实线，加上叉
    A--x B: 有箭头虚线，加上叉

sequenceDiagram
    Alice->>John: Hello John, how are you?
    %% activate 角色名 表示激活控制焦点
    activate John
    John-->>Alice: Great!
    %% deactivate 角色名 表示控制焦点结束
    deactivate John

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

sequenceDiagram
    participant John
    Note right of John: Text in note

sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction

loop Loop text
... statements ...
end

sequenceDiagram
    Alice->John: Hello John, how are you?
    %% loop 后跟循环体说明文字
    loop Every minute
        John-->Alice: Great!
    %% 标记循环结束
    end

alt Describing text
... statements ...
else
... statements ...
end

opt Describing text
... statements ...
end

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end