Mermaid図チュートリアル

Mermaid図チュートリアル
参考:https://cloud.tencent.com/developer/article/1334691
グラフの方向

graph     

グラフの方向
意味
TB/TD
上から下へ
BT
下から上へ
RL
右から左へ
LR
左から右へ
ノードグラフィックス
書式設定
けいじょうid[text]
長方形id(text)
角丸長方形id((text))
円id>text]
右旗状id{text}
ひし形
せつぞくせん
書式設定
効果A-->B
実線、矢印、文字なしA---B
実線、矢印なし、テキストなしA-- ---BまたはA---| |B実線、矢印なし、テキストA-- -->BまたはA-->| |B実線、矢印、テキストA-.->B
点線、矢印、文字なしA-. .->B
点線、矢印、文字A==>B
大きな矢印、テキストなしA== ==>B
大きな矢印、文字
特殊文法
引用符
文字の中で引用符で特殊な文字の間違いを避けます.たとえば、矩形ノードに()があるとレンダリングできないので、引用符を付けます.

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

This is the (text) in the box
エンティティ文字
HTMLのエンティティ文字を使用できます.

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

A double quote:#quot;
A dec char:#9829;
サブグラフ

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

three
two
one
c1
c2
b1
b2
a1
a2
スタイル
linkStyleの後ろの数字は、0から始まる数本目の線を表します.色と太さを指定できます.

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

A
B
C
D
ノードの背景、枠線の色、太さ、実線、破線を設定できます.

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

Start
Stop
アイコン
Font Awesomeアイコンを使用できます.構文fa:icon class name.

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?);

for peace
forbidden
A
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!

Alice Bob John Hello John, how are you? Fight against hypochondria loop [ Healthcheck ] Rational thoughts prevail... Great! How about you? Jolly good! Alice Bob John
参加者
宣言が表示されない場合、参加者は、次のように最初に表示された順序で並べられます.

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

Alice John Hello John, how are you? Great! Alice John
最初の文には2つの参加者ロールが表示されますが、この文ではAliceはJohnの前にあるので、図でもこの順序です.最初に表示された順序に基づいて並べ替えたくない場合は、順序を定義するためにアクティブに宣言できます.

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

John Alice Hello John, how are you? Great! John Alice
別名＃ベツメイ＃
キャラクタに短い別名を書いて、書きやすいようにすることができます.

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

メッセージ
メッセージ配線には6つのスタイルがあります.
1つの-が実線で、2つの-が破線です.

sequenceDiagram
    A->B:      
    A-->B:      (  )
    A->>B:      
    A-->>B:      
    A-x B:      ，   
    A--x B:      ，   

A B無矢印実線無矢印破線(点線)有矢印実線有矢印実線有矢印実線有矢印実線プラスフォーク有矢印破線プラスフォークA B