MonoBook

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

ビジュアルウィキテキスト
ページの作成:「== 例 == <source lang=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…」
 
 
(同じ利用者による、間の15版が非表示)
1行目: 1行目:
== 例 ==
[[Mermaid]]は[[シーケンス図]]をレンダリングすることができます。
<source lang=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
sequenceDiagram
participant Alice
participant Alice
12行目: 215行目:
     John->Bob: How about you?
     John->Bob: How about you?
     Bob-->John: Jolly good!
     Bob-->John: Jolly good!
}}
</source>
</source>


上記はこのように表示されます。
{{#mermaid:sequenceDiagram
{{#mermaid:sequenceDiagram
participant Alice
participant Alice
26行目: 231行目:
     Bob-->John: Jolly good!
     Bob-->John: Jolly good!
}}
}}
== 外部リンク ==
* 公式ドキュメント = https://mermaid.js.org/syntax/sequenceDiagram.html


[[category: Mermaid]]
[[category: Mermaid]]
「https://monobook.org/wiki/Mermaidでシーケンス図を描く」から取得