Mermaidでシーケンス図を描く
Mermaidはシーケンス図をレンダリングすることができます。
注意[編集 | ソースを編集]
mermaidはスクリプト言語の一種であるため「end 」という単語がダイアグラムを壊す可能性があります。やむを得ない場合は、括弧 ()、引用符 ""、または大括弧 {}, []を使って「end 」を囲む必要があります。
構文[編集 | ソースを編集]
participant[編集 | ソースを編集]
参加者(participant、actor)は暗黙的に定義することができます。
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```
参加者の表示位置はソースコードに現れる順です。つまり「participant 参加者」で明示的に参加者を定義することで表示順序を変えられます。
```mermaid
sequenceDiagram
participant Alice
participant Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
```
actor[編集 | ソースを編集]
「participant」の代わりに「actor」を使うと「人型」になります。
```mermaid
sequenceDiagram
actor Alice
actor Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
```
as (エイリアス）[編集 | ソースを編集]
participantやactorは「as」で識別子を設定できます。たとえばparticipantを単なる名前ではなく「詳しい説明を込めた名称」にしたい場合などに活躍します。「詳しい説明を込めた名称」を毎回記述することで気が狂いそうになるのを回避してくれます。
```mermaid
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
```
create と destroy[編集 | ソースを編集]
ソースコード中に「create participant」と記述するとその縦方向の位置にparticipantが登場するようになります。同様に「destroy participant」 と記述するとその縦方向の位置でparticipantが終わります。
```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
```
box[編集 | ソースを編集]
「box 〜 end」でグループ化できます。
```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?
```
メッセージ[編集 | ソースを編集]
メッセージは以下のような構文です。
[Actor] [Arrow] [Actor]: 説明文
こんな感じです。
```mermaid
sequenceDiagram
A ->> B: Message Text
```
メッセージの横線は、実線と点線、それに矢印の有無、矢印の形状があります。
| Arrow | Description |
|---|---|
->
|
実線（矢印なし） |
-->
|
点線（矢印なし） |
->>
|
実線（矢印あり） |
-->>
|
点線（矢印あり） |
<<->>
|
実線（両端に矢印あり） |
<<-->>
|
点線（両端に矢印あり） |
-x
|
実線（バツ印） |
--x
|
点線（バツ印） |
-)
|
実線（開いた矢印、asyncを表す場合などに使い分けると良い） |
--)
|
点線（開いた矢印、asyncを表す場合などに使い分けると良い） |
activate[編集 | ソースを編集]
「activate」と「deactivate」を使うことで活動領域を表示することができます。
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
activate John
John-->>Alice: Great!
deactivate John
```
またメッセージの矢印の接尾辞として「+」「-」を付ける記法もあります。
```mermaid
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
```
さらに多重に重ねることもできます。
```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!
```
Note[編集 | ソースを編集]
「Note」を使うとノート（メモ・備考）を追加することができます。
Note [ right of | left of | over ] [Actor]
以下はJohnの右側に「Text in note」と表示する例。
```mermaid
sequenceDiagram
participant John
Note right of John: Text in note
```
また「over」と「参加者をカンマ区切り」を組み合わせることで二人の参加者にまたがったノートを追加することもできます。
```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
```
改行[編集 | ソースを編集]
メッセージとノートは「<br/>」で改行することができます。
```mermaid
sequenceDiagram
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
```
参加者名も同様に改行できますが、その場合は必ずエイリアス（as）を利用する必要があります。
```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
```
このウィキでも使えます[編集 | ソースを編集]
このウィキでは「{{#mermaid: }}」の中にmermaidコードを記述することでレンダリングできます。
{{#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!
}}
上記はこのように表示されます。