Skip to content

Sequence diagrams#

1. summary#

シーケンス図は、プロセスが相互にどのように動作し、どのような順序で動作するかを示す相互作用図です。
マーメイドはシーケンス図をレンダリングできます。 


sequenceDiagram
    Alice ->> John: Hello John, how are you?
    John -->> Alice: Great!
    Alice -) John: See you later!


sequenceDiagram
    Alice ->> John: Hello John, how are you?
    John -->> Alice: Great!
    Alice -) John: See you later!

ノードに関する注意事項ですが、marmaidの言語のスクリプト方法が原因で、「end」という単語が図を壊す可能性があります。

やむを得ない場合は、括弧（）、引用符 ""、または角かっこ{}、[]を使用して、単語「end」を囲む必要があります。 i.e：（end）、[end]、{end}。

2. participants#

参加者は、このページの最初の例のように暗黙的に定義できます。 参加者またはアクターは、ダイアグラムのソーステキストに表示される順序でレンダリングされます。 最初のメッセージに表示される順序とは異なる順序で参加者を表示したい場合があります。 次の手順を実行することで、アクターの出現順序を指定できます。


sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

3. Alias#

アクターは、便利な識別子と説明ラベルを持つことができます。


sequenceDiagram
    participant A as Alice
    participant J as John

    A->>J: Hello John, how are you?
    J->>A: Great!

sequenceDiagram
    participant A as Alice
    participant J as John

    A->>J: Hello John, how are you?
    J->>A: Great!

4. Messages#

メッセージは、実線または点線で2つ表示できます。

[Actor][Arrow][Actor]:Message text

Type Description
-> Solid line without arrow
--> Dotted line without arrow
->> Solid line with arrowhead
-->> Dotted line with arrowhead
-x Solid line with a cross at the end
--x Dotted line with a cross at the end.
-) Solid line with an open arrow at the end (async)
--) Dotted line with a open arrow at the end (async)

5. Activations copy#

アクターをアクティブ化および非アクティブ化することができます。 （非）アクティブ化は、専用の宣言にすることができます。


sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John


%% There is also a shortcut notation by appending +/- suffix to the     message arrow:
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!


%% Activations can be stacked for same actor:
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!

sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John


%% There is also a shortcut notation by appending +/- suffix to the     message arrow:
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!


%% Activations can be stacked for same actor:
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!

6. Notes#

シーケンス図にメモを追加することができます。 これは表記法によって行われます

syntax#

** Note [ right of | left of | over ] [Actor]: Text in note content **

example#


sequenceDiagram
    participant John
    Note right of John: Text in note

%% It is also possible to create notes spanning two participants:
Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction
sequenceDiagram
    participant John
    Note right of John: Text in note

%% It is also possible to create notes spanning two participants:
Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction

7-1. Loops#

  • シーケンス図でループを表現することができます。 これは表記法によって行われます 
    loop Loop text
... statements ...
end

example#


sequenceDiagram
    Alice->John: Hello John, how are you?
    loop Every minute
        John-->Alice: Great!
    end

7-2. Loops Alt#

  • シーケンス図で代替パスを表現することができます。 これは表記法によって行われます 

    alt Describing text
... statements ...
else
... statements ...
end

  • または、オプションのシーケンスがある場合（他にない場合）。 

    opt Describing text
... statements ...
end



sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end
sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end

8-1. Parallel#

並行して発生しているアクションを表示することができます。これは表記法によって行われます

sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Hello guys!
    and Alice to John
        Alice->>John: Hello guys!
    end
    Bob-->>Alice: Hi Alice!
    John-->>Alice: Hi Alice!

sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Hello guys!
    and Alice to John
        Alice->>John: Hello guys!
    end
    Bob-->>Alice: Hi Alice!
    John-->>Alice: Hi Alice!

8-2. Parallel nest#

並行して発生しているアクションを表示することができます。これは表記法によって行われます

sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Go Help John
    and Alice to John
        Alice->>John: I want this done today

    and John to Charlie
        John->>Charlie: Can we do this today ?
    and John to Diana
        John->>Diana: Can you help us today ?
    end

sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Go Help John
    and Alice to John
        Alice->>John: I want this done today

    and John to Charlie
        John->>Charlie: Can we do this today ?
    and John to Diana
        John->>Diana: Can you help us today ?
    end

9. Background Highlighting#

色付きの背景長方形を提供することにより、フローを強調表示することができます。 これは表記法によって行われます 色は、rgbおよびrgba構文を使用して定義されます。

[参考]　rgb 色表現

sequenceDiagram
    rect rgb(220, 220, 220)
    Note right of Alice: Alice calls John
    Alice->>John: Hello John, how are you ?
    rect rgb(255, 200, 200)
    Alice->>John: John, can you hear me ?
    John-->>Alice: Hi, Alice, I can hear you!
    end
    John-->>Alice: I feel great !
    Alice->>John: Did you want to go the game tonight? 
    John-->>Alice: Yeah! See you there.
    end
sequenceDiagram
    rect rgb(220, 220, 220)
    Note right of Alice: Alice calls John
    Alice->>John: Hello John, how are you ?
    rect rgb(255, 200, 200)
    Alice->>John: John, can you hear me ?
    John-->>Alice: Hi, Alice, I can hear you!
    end
    John-->>Alice: I feel great !
    Alice->>John: Did you want to go the game tonight? 
    John-->>Alice: Yeah! See you there.
    end

10-1. Background Entity#

Entity codes to escape characters ここに例示されている構文を使用して文字をエスケープすることができます。

sequenceDiagram
    A->>B: I #9829; you!
    B->>A: I #9829; you #infin; times more!
sequenceDiagram
    A->>B: I #9829; you!
    B->>A: I #9829; you #infin; times more!

指定された数値は基数10であるため、＃は＃35;としてエンコードできます。 HTML文字名の使用もサポートされています。
マークアップを定義するために改行の代わりにセミコロンを使用できるため、＃59を使用する必要があります。 メッセージテキストにセミコロンを含める。

10-2. sequenceNumbers#

シーケンス図の各矢印に付けられたシーケンス番号を取得することができます。 これは、以下に示すように、mermaidをWebサイトに追加するときに構成できます。

<script>
      mermaid.initialize({
        sequence: { showSequenceNumbers: true },
      });
    </script>

図のように、図コードを介してオンにすることもできます。

sequenceDiagram
    autonumber
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
sequenceDiagram
    autonumber
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

11. Styling#

シーケンス図のスタイリングは、いくつかのcssクラスを定義することによって行われます。 レンダリング中に、これらのクラスはsrc / themes /sequence.scssにあるファイルから抽出されます。

Classes used#
Class Description
actor Style for the actor box at the top of the diagram.
text.actor Styles for text in the actor box at the top of the diagram.
actor-line The vertical line for an actor.
messageLine0 Styles for the solid message line.
messageLine1 Styles for the dotted message line.
messageText Defines styles for the text on the message arrows.
labelBox Defines styles label to left in a loop.
labelText Styles for the text in label for loops.
loopText Styles for the text in the loop box.
loopLine Defines styles for the lines in the loop box.
note Styles for the note box.
noteText Styles for the text on in the note boxes.

Sample stylesheet#

body {
    background: white;
}

.actor {
    stroke: #ccccff;
    fill: #ececff;
}
text.actor {
    fill: black;
    stroke: none;
    font-family: Helvetica;
}

.actor-line {
    stroke: grey;
}

.messageLine0 {
    stroke-width: 1.5;
    stroke-dasharray: '2 2';
    marker-end: 'url(#arrowhead)';
    stroke: black;
}

.messageLine1 {
    stroke-width: 1.5;
    stroke-dasharray: '2 2';
    stroke: black;
}

#arrowhead {
    fill: black;
}

.messageText {
    fill: black;
    stroke: none;
    font-family: 'trebuchet ms', verdana, arial;
    font-size: 14px;
}

.labelBox {
    stroke: #ccccff;
    fill: #ececff;
}

.labelText {
    fill: black;
    stroke: none;
    font-family: 'trebuchet ms', verdana, arial;
}

.loopText {
    fill: black;
    stroke: none;
    font-family: 'trebuchet ms', verdana, arial;
}

.loopLine {
    stroke-width: 2;
    stroke-dasharray: '2 2';
    marker-end: 'url(#arrowhead)';
    stroke: #ccccff;
}

.note {
    stroke: #decc93;
    fill: #fff5ad;
}

.noteText {
    fill: black;
    stroke: none;
    font-family: 'trebuchet ms', verdana, arial;
    font-size: 14px;
}

12. Configuration#

Configuration#

シーケンス図をレンダリングするためのマージンを調整することは可能ですか？

これは、jelly.sequenceConfigを定義するか、CLIによって構成でjsonファイルを使用することによって行われます。 CLIの使用方法については[mermaidCLI]（https://mermaid-js.github.io/mermaid/#/mermaidCLI）ページで説明されています。 jelly.sequenceConfigは、構成パラメーターまたは対応するオブジェクトを使用してJSON文字列に設定できます。

mermaid.sequenceConfig = {
    diagramMarginX: 50,
    diagramMarginY: 10,
    boxTextMargin: 5,
    noteMargin: 10,
    messageMargin: 35,
    mirrorActors: true
};

Possible configuration parameters:#

Parameter Description Default value
mirrorActors Turns on/off the rendering of actors below the diagram as well as above it false
bottomMarginAdj Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. 1
actorFontSize Sets the font size for the actor's description 14
actorFontFamily Sets the font family for the actor's description "Open-Sans", "sans-serif"
actorFontWeight Sets the font weight for the actor's description "Open-Sans", "sans-serif"
noteFontSize Sets the font size for actor-attached notes 14
noteFontFamily Sets the font family for actor-attached notes "trebuchet ms", verdana, arial
noteFontWeight Sets the font weight for actor-attached notes "trebuchet ms", verdana, arial
noteAlign Sets the text alignment for text in actor-attached notes center
messageFontSize Sets the font size for actor<->actor messages 16
messageFontFamily Sets the font family for actor<->actor messages "trebuchet ms", verdana, arial
messageFontWeight Sets the font weight for actor<->actor messages "trebuchet ms", verdana, arial