MonoBook

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

← 古い編集
ビジュアルウィキテキスト
編集の要約なし
 
(同じ利用者による、間の13版が非表示)
35行目: 35行目:
</syntaxhighlight>
</syntaxhighlight>


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


== メッセージ ==
== メッセージ ==
メッセージは実線と点線、それに矢印の有無、矢印の形状があります。<syntaxhighlight lang="markdown">
メッセージは以下のような構文です。
[Actor] [Arrow] [Actor]: 説明文
 
こんな感じです。
<syntaxhighlight lang="markdown">
```mermaid
```mermaid
sequenceDiagram
sequenceDiagram
89行目: 93行目:
```
```
</syntaxhighlight>
</syntaxhighlight>
メッセージの横線は、実線と点線、それに矢印の有無、矢印の形状があります。
{| class="wikitable"
{| class="wikitable"
!Arrow
!Arrow
124行目: 130行目:
|}
|}


== 例 ==
== activate ==
<source lang=markdown>
「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
```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
138行目: 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
153行目: 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でシーケンス図を描く」から取得