mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
395 lines
13 KiB
HTML
Executable File
395 lines
13 KiB
HTML
Executable File
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown.</title>
|
|
<link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
|
|
|
|
<link href="stylesheets/screen.css" rel="stylesheet" type="text/css" media="screen"/>
|
|
<link href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print"/>
|
|
<link href="stylesheets/mermaid.forest.css" rel="stylesheet" type="text/css"/>
|
|
<link href="stylesheets/solarized_light.css" rel="stylesheet" type="text/css"/>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
<script src="javascripts/lib/mermaid.js"></script>
|
|
<script src="javascripts/all.js" type="text/javascript"></script>
|
|
<script src="javascripts/highlight.pack.js" type="text/javascript"></script>
|
|
|
|
<script>
|
|
var g = function (hljs) {
|
|
var r = "[a-z'][a-zA-Z0-9_']*", c = "(" + r + ":" + r + "|" + r + ")";
|
|
var keyw = {
|
|
keyword: 'graph sequenceDiagram participant loop end',
|
|
typename: 'Note',
|
|
literal: "false true left right"
|
|
};
|
|
return {
|
|
case_insensitive: false,
|
|
aliases: ["mermaid"],
|
|
k: keyw,
|
|
i: 'for',
|
|
c: [{
|
|
cN: "function",
|
|
b: "^" + r + "\\s*\\(",
|
|
e: "->",
|
|
rB: !0,
|
|
i: "\\(|#|//|/\\*|\\\\|:|;",
|
|
starts: {
|
|
e: ";|\\.", k: keyw, c: [
|
|
{cN: "comment", b: "%", e: "$"}
|
|
]
|
|
}
|
|
},
|
|
{cN: "comment", b: "%", e: "$"}
|
|
]
|
|
};
|
|
};
|
|
hljs.registerLanguage('mermaid', g);
|
|
hljs.initHighlightingOnLoad();
|
|
$(function () {
|
|
setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
|
|
});
|
|
var callback = function(){
|
|
alert('A callback was triggered');
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body class="index">
|
|
<a href="#" id="nav-button">
|
|
<span>
|
|
NAV
|
|
<img src="images/navbar.png"/>
|
|
</span>
|
|
</a>
|
|
|
|
<div class="tocify-wrapper">
|
|
<img src="images/logo.png"/>
|
|
|
|
<div class="lang-selector" style="display:none">
|
|
<a href="#" data-language-name="shell">shell</a>
|
|
<a href="#" data-language-name="javascript">javascript</a>
|
|
<a href="#" data-language-name="html">html</a>
|
|
<a href="#" data-language-name="css">css</a>
|
|
</div>
|
|
<div class="search">
|
|
<input type="text" class="search" id="input-search" placeholder="Search">
|
|
</div>
|
|
<ul class="search-results"></ul>
|
|
<div id="toc">
|
|
</div>
|
|
<ul class="toc-footer">
|
|
<div style="margin-left:5px;">
|
|
<a href="https://github.com/knsv/mermaid" class="github-button" >Star</a>
|
|
<a href="https://github.com/knsv/mermaid" class="github-button">Fork</a>
|
|
<a href="https://github.com/knsv/mermaid/archive/master.zip" class="github-button">Download</a>
|
|
</div>
|
|
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
|
|
<li><a href='http://github.com/tripit/slate' style="color:grey">Documentation Powered by Slate</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="page-wrapper">
|
|
<div class="dark-box"></div>
|
|
<div class="content">
|
|
<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'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>-> which will render a solid line without arrow</p>
|
|
<p>--> which will render a dotted line without arrow</p>
|
|
<p>->> which will render a solid line with arrowhead</p>
|
|
<p>-->> 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 optionat (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>
|
|
|
|
|
|
</div>
|
|
<div class="dark-box">
|
|
<div class="lang-selector">
|
|
<a href="#" data-language-name="shell">shell</a>
|
|
<a href="#" data-language-name="ruby">ruby</a>
|
|
<a href="#" data-language-name="python">python</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|