「Mermaidでシーケンス図を描く」を編集中

[[Mermaid]]は[[シーケンス図]]をレンダリングすることができます。

== 注意 ==
mermaidはスクリプト言語の一種であるため「end 」という単語がダイアグラムを壊す可能性があります。やむを得ない場合は、括弧 ()、引用符 ""、または大括弧 {}, []を使って「end 」を囲む必要があります。

== 構文 ==

=== participant ===
参加者(participant、actor)は暗黙的に定義することができます。<syntaxhighlight lang="markdown">
```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
```
</syntaxhighlight>参加者の表示位置はソースコードに現れる順です。つまり「participant 参加者」で明示的に参加者を定義することで表示順序を変えられます。<syntaxhighlight lang="markdown">
```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Bob->>Alice: Hi Alice
    Alice->>Bob: Hi Bob
```
</syntaxhighlight>

=== actor ===
「participant」の代わりに「actor」を使うと「人型」になります。<syntaxhighlight lang="markdown">
```mermaid
sequenceDiagram
    actor Alice
    actor Bob
    Bob->>Alice: Hi Alice
    Alice->>Bob: Hi Bob
```
</syntaxhighlight>

=== as (エイリアス） ===
participantやactorは「as」で識別子を設定できます。たとえばparticipantを単なる名前ではなく「詳しい説明を込めた名称」にしたい場合などに活躍します。「詳しい説明を込めた名称」を毎回記述することで気が狂いそうになるのを回避してくれます。<syntaxhighlight lang="markdown">
```mermaid
sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!
```
</syntaxhighlight>

=== create と destroy ===
ソースコード中に「create participant」と記述するとその縦方向の位置にparticipantが登場するようになります。同様に「destroy participant」 と記述するとその縦方向の位置でparticipantが終わります。<syntaxhighlight lang="markdown">
```mermaid
sequenceDiagram
    Alice->>Bob: Hello Bob, how are you ?
    Bob->>Alice: Fine, thank you. And you?
    create participant Carl
    Alice->>Carl: Hi Carl!
    create actor D as Donald
    Carl->>D: Hi!
    destroy Carl
    Alice-xCarl: We are too many
    destroy Bob
    Bob->>Alice: I agree
```
</syntaxhighlight>

=== box ===
「box 〜 end」でグループ化できます。<syntaxhighlight lang="markdown">
```mermaid
sequenceDiagram
    box Purple Alice & John
        participant A
        participant J
    end
    box Another Group
        participant B
        participant C
    end
    A->>J: Hello John, how are you?
    J->>A: Great!
    A->>B: Hello Bob, how is Charley?
    B->>C: Hello Charley, how are you?
```
</syntaxhighlight>

== メッセージ ==
メッセージは以下のような構文です。
 [Actor] [Arrow] [Actor]: 説明文

こんな感じです。
<syntaxhighlight lang="markdown">
```mermaid
sequenceDiagram
    A ->> B: Message Text
```
</syntaxhighlight>

メッセージの横線は、実線と点線、それに矢印の有無、矢印の形状があります。
{| class="wikitable"
!Arrow
!Description
|-
|<code>-></code>
|実線（矢印なし）
|-
|<code>--></code>
|点線（矢印なし）
|-
|<code>->></code>
|実線（矢印あり）
|-
|<code>-->></code>
|点線（矢印あり）
|-
|<code><<->></code>
|実線（両端に矢印あり）
|-
|<code><<-->></code>
|点線（両端に矢印あり）
|-
|<code>-x</code>
|実線（バツ印）
|-
|<code>--x</code>
|点線（バツ印）
|-
|<code>-)</code>
|実線（開いた矢印、asyncを表す場合などに使い分けると良い）
|-
|<code>--)</code>
|点線（開いた矢印、asyncを表す場合などに使い分けると良い）
|}

== activate ==
「activate」と「deactivate」を使うことで活動領域を表示することができます。<syntaxhighlight lang="markdown">
```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John
```
</syntaxhighlight>


またメッセージの矢印の接尾辞として「+」「-」を付ける記法もあります。<syntaxhighlight lang="markdown">
```mermaid
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!
```
</syntaxhighlight>


さらに多重に重ねることもできます。<syntaxhighlight lang="markdown">
```mermaid
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!
```
</syntaxhighlight>

== Note ==
「Note」を使うとノート（メモ・備考）を追加することができます。
 Note [ right of | left of | over ] [Actor]
以下はJohnの右側に「Text in note」と表示する例。<syntaxhighlight lang="markdown">
```mermaid
sequenceDiagram
    participant John
    Note right of John: Text in note
```
</syntaxhighlight>


また「over」と「参加者をカンマ区切り」を組み合わせることで二人の参加者にまたがったノートを追加することもできます。<syntaxhighlight lang="markdown">
```mermaid
sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction
```
</syntaxhighlight>

== 改行 ==
メッセージとノートは「<nowiki><br/></nowiki>」で改行することができます。<syntaxhighlight lang="markdown">
```mermaid
sequenceDiagram
    Alice->John: Hello John,<br/>how are you?
    Note over Alice,John: A typical interaction<br/>But now in two lines
```
</syntaxhighlight>


参加者名も同様に改行できますが、その場合は必ずエイリアス（as）を利用する必要があります。<syntaxhighlight lang="markdown">
```mermaid
sequenceDiagram
    participant Alice as Alice<br/>Johnson
    Alice->John: Hello John,<br/>how are you?
    Note over Alice,John: A typical interaction<br/>But now in two lines
```
</syntaxhighlight>

== このウィキでも使えます ==
このウィキでは「<nowiki>{{#mermaid:    }}</nowiki>」の中にmermaidコードを記述することでレンダリングできます。
<source lang=mediawiki>
{{#mermaid: 
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!
}}
</source>

上記はこのように表示されます。
{{#mermaid: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!
}}

== 外部リンク ==
* 公式ドキュメント = https://mermaid.js.org/syntax/sequenceDiagram.html

[[category: Mermaid]]