Skip to content

Instantly share code, notes, and snippets.

@hatappo
Last active Jun 18, 2021
Embed
What would you like to do?
VScode による mermaid.js を使ったシーケンス図作成のサンプル

公式ドキュメント

VScode の Extensions

サンプル

sequenceDiagram
    participant Sample
    participant A as エンティティ A
    participant B as エンティティ B
    participant C as エンティティ C

    A  ->  B: -> 実線
    B -->  A: --> 破線

    A  -)  B: -) 実線の矢印付き
    B --)  A: --) 破線の矢印付き

    rect rgba(255, 0, 255, 0.5)
        A  ->> C: ->> 実線の三角矢印付き
        activate C
        C -->> A: -->> 破線の三角矢印付き
        deactivate C
    end

    B  -x+  C: -x 実線のバッテン付き
    C -->>+ C: 「C -->> C: 」
    C -->>- C: 「C -->> C: 」
    C --x-  B: --x 破線のバッテン付き


    note over A,C: 「note over A,C: 」
    note over B: 「note over B: 」

    loop ループの書き方
        B  ->> C: あいうえお
        activate C
        C  ->> B: かきくけこ
        deactivate C
        note right of B: 「Note right of B: 」
    end
    note right of B: 「Note right of B: 」

    alt 正常系
        B  ->> C: さしすせそ
    else 異常系
        B  ->> C: たちつてと
    end

    opt 〜〜の場合のみ
        C  ->> B: なにぬねの<br/>はひふへほ
    end
@hatappo
Copy link
Author

hatappo commented Jun 18, 2021

mermaid-js-sequence-diagram-sample-onvscode

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment