mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.
362 lines (341 loc) • 11.5 kB
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 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"]);
});
</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">
<li><a href='http://github.com/tripit/slate'>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="notes">Notes</h2>
<p>It is possible to add notes to a sequence diagram. This is done by the notation<br>Note [ right | left ] of [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 possible to break text into different rows by using <br/> as a line breaker.</p>
<pre class="css"><code>%% Example of sequence diagram
sequenceDiagram
participant John
Note left of John: Text in note spanning several rows.</code></pre><div class="mermaid">sequenceDiagram
participant John
Note left of John: Text in note spanning several rows.</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>