MonoBook

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

← 古い編集
ビジュアルウィキテキスト
 
(同じ利用者による、間の12版が非表示)
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
156行目: 162行目:


== Note ==
== Note ==
「Note」を使うとノート（メモ・備考）を追加することができます。<blockquote>Note [ right of | left of | over ] [Actor]</blockquote>
「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>


== 例 ==
 
<source lang=markdown>
また「over」と「参加者をカンマ区切り」を組み合わせることで二人の参加者にまたがったノートを追加することもできます。<syntaxhighlight lang="markdown">
```mermaid
```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
172行目: 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
187行目: 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でシーケンス図を描く」から取得