mermaid

<!DOCTYPE html> <html> <head> <title>sequenceDiagram.md</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="../doc-style.css" /> <script src="../doc-filelist.js"></script> <script> var relativeDir = "../", thisFile = "Users/knut/Documents/source/mermaid/docs/sequenceDiagram.md", defaultSidebar = true; </script> <script src="../doc-script.js"></script> <script src="../mermaid.js"></script> <link rel="stylesheet" href="../mermaid.css" /> </head> <body> <div id="sidebar_wrapper"> <div id="sidebar_switch"> Files Headings </div> <div id="tree"></div> <div id="headings"> <div class="heading h2"> <a href="#order: 3">order: 3</a> </div> <div class="heading h1"> <a href="#Sequence diagrams">Sequence diagrams</a> </div> <div class="heading h1"> <a href="#Syntax">Syntax</a> </div> <div class="heading h3"> <a href="#Participants">Participants</a> </div> <div class="heading h2"> <a href="#Messages">Messages</a> </div> <div class="heading h2"> <a href="#Notes">Notes</a> </div> <div class="heading h2"> <a href="#Loops">Loops</a> </div> <div class="heading h2"> <a href="#Alt">Alt</a> </div> <div class="heading h2"> <a href="#Styling">Styling</a> </div> <div class="heading h3"> <a href="#Classes used">Classes used</a> </div> <div class="heading h3"> <a href="#Sample stylesheet">Sample stylesheet</a> </div> <div class="heading h2"> <a href="#Configuration">Configuration</a> </div> <div class="heading h3"> <a href="#Possible configration params:">Possible configration params:</a> </div> </div> </div> <div id="sidebar-toggle"></div> <div id="container"><div class="docs markdown"><hr> title: Sequence Diagram <div class="pilwrap" id="order: 3"> <h2> <a href="#order: 3" name="order: 3" class="pilcrow">¶</a> order: 3</h2> </div> <div class="pilwrap" id="Sequence diagrams"> <h1> <a href="#Sequence diagrams" name="Sequence diagrams" class="pilcrow">¶</a> Sequence diagrams</h1> </div> <blockquote> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order. </blockquote> Mermaid can render sequence diagrams. The code snippet below: <div class="highlight"><pre><code>%% Example of sequence diagram sequenceDiagram Alice-John: Hello John, how are you? John--Alice: Great! </code></pre></div> Renders the following diagram: <script>mermaid.initialize({startOnLoad:true});</script><div class="mermaid">sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great!</div><div class="pilwrap" id="Syntax"> <h1> <a href="#Syntax" name="Syntax" class="pilcrow">¶</a> Syntax</h1> </div> <div class="pilwrap" id="Participants"> <h3> <a href="#Participants" name="Participants" class="pilcrow">¶</a> Participants</h3> </div> The participants can be defined implicitly as in the first example on this page. The participants or actors are rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a different order than how they appear in the first message. It is possible to specify the actor's order of appearance by doing the following: <div class="highlight"><pre><code>%% Example of sequence diagram sequenceDiagram participant John participant Alice Alice-John: Hello John, how are you? John--Alice: Great! </code></pre></div> Renders to the diagram below: <div class="mermaid">sequenceDiagram participant John participant Alice Alice->>John: Hello John, how are you? John-->>Alice: Great!</div><div class="pilwrap" id="Messages"> <h2> <a href="#Messages" name="Messages" class="pilcrow">¶</a> Messages</h2> </div> Messages can be of two displayed either solid or with a dotted line. <div class="highlight"><pre><code>[Actor][Arrow][Actor]:Message text </code></pre></div> There are six types of arrows currently supported: -> which will render a solid line without arrow --> which will render a dotted line without arrow ->> which will render a solid line with arrowhead -->> which will render a dotted line with arrowhead -x which will render a solid line with a cross at the end (async) --x which will render a dotted line with a cross at the end (async) <div class="pilwrap" id="Notes"> <h2> <a href="#Notes" name="Notes" class="pilcrow">¶</a> Notes</h2> </div> It is possible to add notes to a sequence diagram. This is done by the notation Note [ right | left ] of [Actor]: Text in note content See the example below: <div class="highlight"><pre><code>%% Example of sequence diagram sequenceDiagram participant John Note right of John: Text in note </code></pre></div> Renders to the diagram below: <div class="mermaid">sequenceDiagram participant John Note right of John: Text in note</div>It is possible to break text into different rows by using as a line breaker. <div class="highlight"><pre><code>%% Example of sequence diagram sequenceDiagram participant John Note left of John: Text in note spanning several rows. </code></pre></div> <div class="mermaid">sequenceDiagram participant John Note left of John: Text in note spanning several rows.</div><div class="pilwrap" id="Loops"> <h2> <a href="#Loops" name="Loops" class="pilcrow">¶</a> Loops</h2> </div> It is possible to express loops in a sequence diagram. This is done by the notation <div class="highlight"><pre><code>loop Loop text ... statements ... end </code></pre></div> See the example below <div class="highlight"><pre><code>%% Example of sequence diagram sequenceDiagram Alice-John: Hello John, how are you? loop Reply every minute John--Alice: Great! end </code></pre></div> <div class="mermaid">sequenceDiagram Alice->John: Hello John, how are you? loop Every minute John-->Alice: Great! end</div><div class="pilwrap" id="Alt"> <h2> <a href="#Alt" name="Alt" class="pilcrow">¶</a> Alt</h2> </div> It is possible to express alternative paths in a sequence diagram. This is done by the notation <div class="highlight"><pre><code>alt Describing text ... statements ... else ... statements ... end </code></pre></div> or if there is sequence that is optionat (if without else). <div class="highlight"><pre><code>opt Describing text ... statements ... end </code></pre></div> See the example below <div class="highlight"><pre><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> <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><div class="pilwrap" id="Styling"> <h2> <a href="#Styling" name="Styling" class="pilcrow">¶</a> Styling</h2> </div> Styling of the a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the <div class="pilwrap" id="Classes used"> <h3> <a href="#Classes used" name="Classes used" class="pilcrow">¶</a> Classes used</h3> </div> <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> <div class="pilwrap" id="Sample stylesheet"> <h3> <a href="#Sample stylesheet" name="Sample stylesheet" class="pilcrow">¶</a> Sample stylesheet</h3> </div> <div class="highlight"><pre><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></div> <div class="pilwrap" id="Configuration"> <h2> <a href="#Configuration" name="Configuration" class="pilcrow">¶</a> Configuration</h2> </div> Is it possible to adjust the margins for rendering the sequence diagram. This is done by defining mermaid.sequenceConfig or by the CLI to use a json file with the configuration. How to use the CLI is described in the mermaidCLI page. mermaid.sequenceConfig can be set to a JSON string with config parameters or the corresponding object. <div class="highlight"><pre><code>mermaid.sequenceConfig = { diagramMarginX:50, diagramMarginY:10, boxTextMargin:5, noteMargin:10, messageMargin:35, mirrorActors:true }; </code></pre></div> <div class="pilwrap" id="Possible configration params:"> <h3> <a href="#Possible configration params:" name="Possible configration params:" class="pilcrow">¶</a> Possible configration params:</h3> </div> <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> </div> </div> </body> </html>