mermaid/build/www/sequenceDiagram.html

Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams and gantt charts.

<h1 id="sequence-diagrams">Sequence diagrams</h1>
<blockquote>
<p>A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.</p>
</blockquote>
<p>Mermaid can render sequence diagrams. The code snippet below:</p>
<pre class="css"><code>%% Example of sequence diagram
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!</code></pre><p>Renders the following diagram:</p>
<div class="mermaid">sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!</div><h2 id="syntax">Syntax</h2>
<h3 id="participants">Participants</h3>
<p>The participants can be defined implicitly as in the first example on this page. The participants or actors are<br>rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a<br>different order than how they appear in the first message. It is possible to specify the actor&#39;s order of<br>appearance by doing the following:</p>
<pre class="css"><code>%% Example of sequence diagram
sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!</code></pre><p>Renders to the diagram below:</p>
<div class="mermaid">sequenceDiagram
    participant John
    participant Alice
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!</div><h2 id="messages">Messages</h2>
<p>Messages can be of two displayed either solid or with a dotted line.</p>
<pre class="css"><code>[Actor][Arrow][Actor]:Message text</code></pre><p>There are six types of arrows currently supported:</p>
<p>-&gt; which will render a solid line without arrow</p>
<p>--&gt; which will render a dotted line  without arrow</p>
<p>-&gt;&gt; which will render a solid line with arrowhead</p>
<p>--&gt;&gt; which will render a dotted line  with arrowhead</p>
<p>-x which will render a solid line with a cross at the end (async)</p>
<p>--x which will render a dotted line with a cross at the end (async)</p>
<h2 id="activations">Activations</h2>
<p>It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:</p>
<pre class="css"><code>sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John</code></pre><p>Renders to the diagram below:</p>
<div class="mermaid">sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John</div><p>There is also a shortcut notation by appending <code>+</code>/<code>-</code> suffix to the message arrow:  </p>
<pre class="css"><code>sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!</code></pre><p>Activations can be stacked for same actor:</p>
<pre class="css"><code>sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can yoy hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!</code></pre><p>Stacked activations look like this:</p>
<div class="mermaid">sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can yoy hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!</div><h2 id="notes">Notes</h2>
<p>It is possible to add notes to a sequence diagram. This is done by the notation<br>Note [ right of | left of | over ] [Actor]: Text in note content</p>
<p>See the example below:</p>
<pre class="css"><code>%% Example of sequence diagram
sequenceDiagram
    participant John
    Note right of John: Text in note</code></pre><p>Renders to the diagram below:</p>
<div class="mermaid">sequenceDiagram
    participant John
    Note right of John: Text in note</div><p>It is also possible to create notes spanning two participants:</p>
<pre class="css"><code>sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction</code></pre><div class="mermaid">sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction</div><h2 id="loops">Loops</h2>
<p>It is possible to express loops in a sequence diagram. This is done by the notation</p>
<pre class="css"><code>loop Loop text
... statements ...
end</code></pre><p>See the example below</p>
<pre class="css"><code>%% Example of sequence diagram
sequenceDiagram
    Alice->John: Hello John, how are you?
    loop Reply every minute
        John-->Alice: Great!
    end</code></pre><div class="mermaid">sequenceDiagram
    Alice->John: Hello John, how are you?
    loop Every minute
        John-->Alice: Great!
    end</div><h2 id="alt">Alt</h2>
<p>It is possible to express alternative paths in a sequence diagram. This is done by the notation</p>
<pre class="css"><code>alt Describing text
... statements ...
else
... statements ...
end</code></pre><p>or if there is sequence that is optional (if without else).</p>
<pre class="css"><code>opt Describing text
... statements ...
end</code></pre><p>See the example below</p>
<pre class="css"><code>%% Example of sequence diagram
    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</code></pre><div class="mermaid">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</div><h2 id="styling">Styling</h2>
<p>Styling of the a sequence diagram is done by defining a number of css classes.  During rendering these classes are extracted from the</p>
<h3 id="classes-used">Classes used</h3>
<table>
<thead>
<tr>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>actor</td>
<td>Style for the actor box at the top of the diagram.</td>
</tr>
<tr>
<td>text.actor</td>
<td>Styles for text in the actor box at the top of the diagram.</td>
</tr>
<tr>
<td>actor-line</td>
<td>The vertical line for an actor.</td>
</tr>
<tr>
<td>messageLine0</td>
<td>Styles for the solid message line.</td>
</tr>
<tr>
<td>messageLine1</td>
<td>Styles for the dotted message line.</td>
</tr>
<tr>
<td>messageText</td>
<td>Defines styles for the text on the message arrows.</td>
</tr>
<tr>
<td>labelBox</td>
<td>Defines styles label to left in a loop.</td>
</tr>
<tr>
<td>labelText</td>
<td>Styles for the text in label for loops.</td>
</tr>
<tr>
<td>loopText</td>
<td>Styles for the text in the loop box.</td>
</tr>
<tr>
<td>loopLine</td>
<td>Defines styles for the lines in the loop box.</td>
</tr>
<tr>
<td>note</td>
<td>Styles for the note box.</td>
</tr>
<tr>
<td>noteText</td>
<td>Styles for the text on in the note boxes.</td>
</tr>
</tbody>
</table>
<h3 id="sample-stylesheet">Sample stylesheet</h3>
<pre class="css"><code>
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;
    stroke: #CCCCFF;
    fill: #fff5ad;
}

.noteText {
    fill:black;
    stroke:none;
    font-family: 'trebuchet ms', verdana, arial;
    font-size:14px;
}</code></pre><h2 id="configuration">Configuration</h2>
<p>Is it possible to adjust the margins for rendering the sequence diagram.</p>
<p>This is done by defining <strong>mermaid.sequenceConfig</strong> or by the CLI to use a json file with the configuration. How to use<br>the CLI is described in the mermaidCLI page.<br>mermaid.sequenceConfig can be set to a JSON string with config parameters or the corresponding object.</p>
<pre class="css"><code>mermaid.sequenceConfig = {
    diagramMarginX:50,
    diagramMarginY:10,
    boxTextMargin:5,
    noteMargin:10,
    messageMargin:35,
    mirrorActors:true
    };</code></pre><h3 id="possible-configration-params-">Possible configration params:</h3>
<table>
<thead>
<tr>
<th>Param</th>
<th>Descriotion</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td>mirrorActor</td>
<td>Turns on/off the rendering of actors below the diagram as well as above it</td>
<td>false</td>
</tr>
<tr>
<td>bottomMarginAdj</td>
<td>Adjusts how far down the graph ended. Wide borders styles with css could generate unwantewd clipping which is why this config param exists.</td>
<td>1</td>
</tr>
</tbody>
</table>