MonoBook

「Mermaidでシーケンス図を描く」の版間の差分

← 古い編集新しい編集 →
ビジュアルウィキテキスト
編集の要約なし
編集の要約なし
1行目: 1行目:
[[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>
== メッセージ ==
メッセージは実線と点線、それに矢印の有無、矢印の形状があります。<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を表す場合などに使い分けると良い）
|}
== 例 ==
== 例 ==
<source lang=markdown>
<source lang=markdown>
「https://monobook.org/wiki/Mermaidでシーケンス図を描く」から取得