mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.
1,114 lines (1,047 loc) • 61.1 kB
HTML
<!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 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="mermaid">mermaid</h1>
<p><img src="images/header.png" alt="Alt text"></p>
<blockquote>
<p>Generation of diagrams and flowcharts from text in a similar manner as markdown.</p>
</blockquote>
<p>Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?</p>
<p>This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript. <a href="http://knsv.github.io/mermaid/live_editor">Try it using our editor</a>.</p>
<p>Code examples below:</p>
<h3 id="an-example-of-a-flowchart">An example of a flowchart</h3>
<pre class="css"><code>graph TD;
A-->B;
A-->C;
B-->D;
C-->D;</code></pre><h3 id="an-example-of-a-sequence-diagram">An example of a sequence diagram</h3>
<pre class="css"><code>sequenceDiagram
participant Alice
participant Bob
Alice->John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!</code></pre><h3 id="example-code-for-a-gantt-diagram">Example code for a gantt diagram</h3>
<pre class="css"><code>gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d</code></pre><p>Play with mermaid using this <a href="http://danielmschmidt.github.io/mermaid-demo/">editor</a> or this <a href="live_editor">live editor</a>.</p>
<h2 id="further-reading">Further reading</h2>
<ul>
<li><a href="http://knsv.github.io/mermaid/index.html#usage">Usage</a></li>
<li><a href="http://knsv.github.io/mermaid/index.html#flowcharts-basic-syntax">Flowchart syntax</a></li>
<li><a href="http://knsv.github.io/mermaid/index.html#sequence-diagrams">Sequence diagram syntax</a></li>
<li><a href="http://knsv.github.io/mermaid/index.html#gant-diagrams">Gantt chart syntax</a></li>
<li><a href="http://knsv.github.io/mermaid/index.html#flowcharts-basic-syntax">Mermaid client</a></li>
<li><a href="http://knsv.github.io/mermaid/live_editor">Editor</a></li>
</ul>
<h2 id="credits">Credits</h2>
<p>Many thanks to the <a href="http://d3js.org/">d3</a> and <a href="https://github.com/cpettitt/dagre-d3">dagre-d3</a> projects for providing<br>the graphical layout and drawing libraries! Thanks also to the<br><a href="http://bramp.github.io/js-sequence-diagrams">js-sequence-diagram</a> project for usage of the grammar for the<br>sequence diagrams.</p>
<p><em>Mermaid was created by Knut Sveidqvist for easier documentation.</em></p>
<p>Knut has not done all work by himself, here is the full list of the projects <a href="https://github.com/knsv/mermaid/graphs/contributors">contributors</a>.</p>
<h1 id="usage">Usage</h1>
<h2 id="installation">Installation</h2>
<p>Either use the npm or bower package managers as per below:</p>
<pre class="css"><code>bower install mermaid --save-dev</code></pre><pre class="css"><code>npm install mermaid --save-dev</code></pre><p>Or download javascript files as per the url below, note that #version# should be replaced with version of choice:</p>
<pre class="css"><code>https://cdn.rawgit.com/knsv/mermaid/#version#/dist/mermaid.min.js</code></pre><p>Ex:</p>
<ul>
<li><a href="https://cdn.rawgit.com/knsv/mermaid/0.5.1/dist/mermaid.min.js">version 0.5.1</a></li>
</ul>
<p>There are some bundles to choose from:</p>
<ul>
<li>mermaid.js, mermaid.min.js This bundle contains everything you need to run mermaid</li>
<li>mermaid.slim.js, mermaid.slim.min.js This bundle does not contain d3 which is useful for sites that already have d3 in place</li>
<li>mermaidAPI.js, mermaidAPI.min.js, This bundle does not contain the web integration provided in the other packages but has a render function instead returns svg code.</li>
</ul>
<p><strong> Important: </strong></p>
<blockquote>
<p>It's best to use a specific tag or commit hash in the URL (not a branch). Files are cached permanently after the first request.</p>
</blockquote>
<p>Read more about that at <a href="https://rawgit.com/">https://rawgit.com/</a></p>
<h2 id="simple-usage-on-a-web-page">Simple usage on a web page</h2>
<p>The easiest way to integrate mermaid on a web page requires two elements:</p>
<ol>
<li>Inclusion of the mermaid framework in the html page using a script tag</li>
<li>A graph definition on the web page</li>
</ol>
<p>If these things are in place mermaid listens to the page load event and when fires, when the page has loaded, it will<br>locate the graphs n the page and transform them to svg files.</p>
<h3 id="include-mermaid-on-your-web-page-">Include mermaid on your web page:</h3>
<pre class="css"><code><script src="mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script></code></pre><p>Further down on your page mermaid will look for tags with <code>class="mermaid"</code>. From these tags mermaid will try to<br>read the chart definiton which will be replaced with the svg chart.</p>
<h3 id="define-a-chart-like-this-">Define a chart like this:</h3>
<pre class="css"><code><div class="mermaid">
CHART DEFINITION GOES HERE
</div></code></pre><p>Would end up like this:</p>
<pre class="css"><code><div class="mermaid" id="mermaidChart0">
<svg>
Chart ends up here
</svg>
</div></code></pre><p>An id is also added to mermaid tags without id.</p>
<h3 id="calling-mermaid-init-">Calling <strong>mermaid.init</strong></h3>
<p>By default, <strong>mermaid.init</strong> will be called when the document is ready, finding all elements with<br><code>class="mermaid"</code>. If you are adding content after mermaid is loaded, or otherwise need<br>finer-grained control of this behavior, you can call <code>init</code> yourself with:</p>
<ul>
<li>a configuration object</li>
<li>some nodes, as<ul>
<li>a node</li>
<li>an a array-like of nodes</li>
<li>or W3C selector that will find your nodes</li>
</ul>
</li>
</ul>
<p>Example:</p>
<pre class="css"><code>mermaid.init({noteMargin: 10}, ".someOtherClass");</code></pre><p>Or with no config object, and a jQuery selection:</p>
<pre class="css"><code>mermaid.init(undefined, $("#someId .yetAnotherClass"));</code></pre><aside class="warning">This type of integration is deprecated instead the preferred way of handling more complex integration is to us the mermaidAPI instead.</aside>
<h2 id="usage-with-browserify">Usage with browserify</h2>
<p>The reader is assumed to know about CommonJS style of module handling and how to use browserify. If not a good place<br>to start would be <a href="http://browserify.org/">http://browserify.org/</a> website.</p>
<p>Minimalistic javascript:</p>
<pre class="css"><code>mermaid = require('mermaid');
console.log('Test page! mermaid version'+mermaid.version());</code></pre><p>Bundle the javascript with browserify.</p>
<p>Us the created bundle on a web page as per example below:</p>
<pre class="css"><code><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="mermaid.css" />
<script src="bundle.js"></script>
</head>
<body>
<div class="mermaid">
graph LR
A-->B
B-->C
C-->A
D-->C
</div>
</body>
</html></code></pre><h2 id="api-usage">API usage</h2>
<p>The main idea with the API is to be able to call a render function with graph defintion as a string. The render function<br>will render the graph and call a callback with the resulting svg code. With this approach it is up to the site creator to<br>fetch the graph definition from the site, perhaps from a textarea, render it and place the graph somewhere in the site.</p>
<p>To do this, include mermaidAPI on your web website instead of mermaid.js. The example below show an outline of how this<br>could be used. The example just logs the resulting svg to the javascript console.</p>
<pre class="css"><code><script src="mermaidAPI.js"></script>
<script>
mermaidAPI.initialize({
startOnLoad:false
});
// Example of using the API
$(function(){
var graphDefinition = 'graph TB\na-->b';
var graph = mermaidAPI.render(graphDefinition);
$("#graphDiv").html(graph);
});
</script></code></pre><h2 id="sample-of-api-usage-together-with-browserify">Sample of API usage together with browserify</h2>
<pre class="css"><code>$ = require('jquery');
mermaidAPI = require('mermaid').mermaidAPI;
mermaidAPI.initialize({
startOnLoad:false
});
$(function(){
var graphDefinition = 'graph TB\na-->b';
var cb = function(html){
console.log(html);
}
mermaidAPI.render('id1',graphDefinition,cb);
});</code></pre><h2 id="example-of-a-marked-renderer">Example of a marked renderer</h2>
<p>This is the renderer used for transforming the documentation from markdown to html with mermaid diagrams in the html.</p>
<pre class="css"><code> var renderer = new marked.Renderer();
renderer.code = function (code, language) {
if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
return '<div class="mermaid">'+code+'</div>';
}
else{
return '<pre><code>'+code+'</code></pre>';
}
};</code></pre><p>Another example in coffeescript that also includes the mermaid script tag into the generated markup.</p>
<pre class="css"><code>marked = require 'marked'
module.exports = (options) ->
hasMermaid = false
renderer = new marked.Renderer()
renderer.defaultCode = renderer.code
renderer.code = (code, language) ->
if language is 'mermaid'
html = ''
if not hasMermaid
hasMermaid = true
html += '&ltscript src="'+options.mermaidPath+'"></script>'
html + '&ltdiv class="mermaid">'+code+'</div>'
else
@defaultCode(code, language)
renderer</code></pre><h2 id="advanced-usage">Advanced usage</h2>
<p><strong>Error handling</strong></p>
<p>When the parser encounters invalid syntax the <strong>mermaid.parseError</strong> function is called. It is possible to override this<br>function in order to handle the error in an application specific way.</p>
<p><strong>Parsing text without rendering</strong></p>
<p>It is also possible to validate the syntax before rendering in order to streamline the user experience. The function<br><strong>mermaid.parse(txt)</strong> takes a text string as an argument and returns true if the text is syntactically correct and<br>false if it is not. The parseError function will be called when the parse function returns false.</p>
<p>The code-example below in meta code illustrates how this could work:</p>
<pre class="css"><code>
mermaid.parseError = function(err,hash){
displayErrorInGui(err);
};
var textFieldUpdated = function(){
var textStr = getTextFromFormField('code');
if(mermaid.parse(textStr)){
reRender(textStr)
}
};
bindEventHandler('change', 'code', textFieldUpdated);</code></pre><h1 id="configuration">Configuration</h1>
<p>Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of<br>setting the options in mermaid.</p>
<ol>
<li>Instantiation of the configuration using the initialize call</li>
<li><em>Using the global mermaid object</em> - deprecated</li>
<li><em>using the global mermaid_config object</em> - deprecated</li>
<li>Instantiation of the configuration using the <strong>mermaid.init</strong> call</li>
</ol>
<p>The list above has two ways to many of doing this. Three are deprecated and will eventually be removed. The list of<br>configuration objects are described <a href="http://knsv.github.io/mermaid/index.html#configuration28">in the mermaidAPI documentation</a>.</p>
<h2 id="using-the-mermaidapi-initialize-mermaid-initialize-call">Using the mermaidAPI.initialize/mermaid.initialize call</h2>
<p>The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPi depending<br>on what kind of integration you use.</p>
<pre class="css"><code> <script src="../dist/mermaid.js"></script>
<script>
var config = {
startOnLoad:true,
flowchart:{
useMaxWidth:false,
htmlLabels:true
}
};
mermaid.initialize(config);
</script></code></pre><aside class="success">This is the preferred way of configuring mermaid.</aside>
<h2 id="using-the-mermaid-object">Using the mermaid object</h2>
<p>Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this<br>approach are:</p>
<ul>
<li>mermaid.startOnLoad</li>
<li>mermaid.htmlLabels</li>
</ul>
<pre class="css"><code>mermaid.startOnLoad = true;</code></pre><aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>
<h2 id="using-the-mermaid_config">Using the mermaid_config</h2>
<p>Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this<br>approach are:</p>
<ul>
<li>mermaid_config.startOnLoad</li>
<li>mermaid_config.htmlLabels</li>
</ul>
<pre class="css"><code>mermaid_config.startOnLoad = true;</code></pre><aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>
<h2 id="using-the-mermaid-init-call">Using the mermaid.init call</h2>
<p>Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this<br>approach are:</p>
<ul>
<li>mermaid_config.startOnLoad</li>
<li>mermaid_config.htmlLabels</li>
</ul>
<pre class="css"><code>mermaid_config.startOnLoad = true;</code></pre><aside class="info">This way of setting the configuration is deprecated instead the preferred way of is to use the initialize method. This functionality is only kept for not breaking existing integrations</aside>
<h1 id="flowcharts-basic-syntax">Flowcharts - Basic Syntax</h1>
<h2 id="graph">Graph</h2>
<p>This statement declares a new graph and the direction of the graph layout.</p>
<pre class="css"><code>%% Example code
graph TD</code></pre><p>This declares a graph oriented from top to bottom.</p>
<div class="mermaid">graph TD
Start --> Stop</div><pre class="css"><code>%% Example code
graph LR</code></pre><p>This declares a graph oriented from left to right.</p>
<p>Possible directions are:</p>
<ul>
<li>TB - top bottom</li>
<li>BT - bottom top</li>
<li>RL - right left</li>
<li><p>LR - left right</p>
</li>
<li><p>TD - same as TB</p>
</li>
</ul>
<div class="mermaid">graph LR
Start --> Stop</div><h2 id="nodes-shapes">Nodes & shapes</h2>
<h3 id="a-node-default-">A node (default)</h3>
<pre class="css"><code>graph LR
id1</code></pre><div class="mermaid">graph LR
id</div><p>Note that the id is what is displayed in the box.</p>
<h3 id="a-node-with-text">A node with text</h3>
<p>It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text<br>found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The<br>one previously defined will be used when rendering the box.</p>
<pre class="css"><code>graph LR
id1[This is the text in the box]</code></pre><div class="mermaid">graph LR
id1[This is the text in the box]</div><h3 id="a-node-with-round-edges">A node with round edges</h3>
<pre class="css"><code>graph LR
id1(This is the text in the box);</code></pre><div class="mermaid">graph LR
id1(This is the text in the box)</div><h3 id="a-node-in-the-form-of-a-circle">A node in the form of a circle</h3>
<pre class="css"><code>graph LR
id1((This is the text in the circle));</code></pre><div class="mermaid">graph LR
id1((This is the text in the circle))</div><h3 id="a-node-in-an-asymetric-shape">A node in an asymetric shape</h3>
<pre class="css"><code>graph LR
id1>This is the text in the box]</code></pre><div class="mermaid">graph LR
id1>This is the text in the box]</div><p>Currently only the shape above is possible and not its mirror. <em>This might change with future releases.</em></p>
<h3 id="a-node-rhombus-">A node (rhombus)</h3>
<pre class="css"><code>graph LR
id1{This is the text in the box}</code></pre><div class="mermaid">graph LR
id1{This is the text in the box}</div><h2 id="links-between-nodes">Links between nodes</h2>
<p>Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.</p>
<h3 id="a-link-with-arrow-head">A link with arrow head</h3>
<pre class="css"><code>graph LR
A-->B</code></pre><pre class="css"><code>graph LR;
A-->B</code></pre><h3 id="an-open-link">An open link</h3>
<pre class="css"><code>graph LR
A --- B</code></pre><div class="mermaid">graph LR;
A --- B</div><h3 id="text-on-links">Text on links</h3>
<pre class="css"><code>A-- This is the text --- B</code></pre><p>or</p>
<pre class="css"><code>A---|This is the text|B;</code></pre><div class="mermaid">graph LR;
A-- This is the text ---B</div><h3 id="dotted-link">Dotted link</h3>
<p>-.-></p>
<div class="mermaid">graph LR;
A-.->B;</div><h3 id="dotted-link-with-text">Dotted link with text</h3>
<p>-. text .-></p>
<div class="mermaid">graph LR;
A-. text .-> B</div><h3 id="thick-link">Thick link</h3>
<p>==></p>
<div class="mermaid">graph LR;
A ==> B</div><h3 id="thick-link-with-text">Thick link with text</h3>
<p>== text ==></p>
<div class="mermaid">graph LR;
A == text ==> B</div><h2 id="subgraphs">Subgraphs</h2>
<pre class="css"><code>subgraph title
graph definition
end</code></pre><p>An example below:</p>
<pre class="css"><code> %% Subgraph example
graph TB
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
c1-->a2</code></pre><div class="mermaid">graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end</div><h2 id="interaction">Interaction</h2>
<p>It is possible to bind a click event to a node:</p>
<pre class="css"><code>click nodeId callback</code></pre><ul>
<li>nodeId is the id of the node</li>
<li>callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.</li>
</ul>
<h2 id="styling-and-classes">Styling and classes</h2>
<h3 id="styling-links">Styling links</h3>
<p>It is possible to style links. For instance you might want to style a link that is going backwards in the flow. As links<br>have no ids in the same way as nodes, some other way of deciding what style the links should be attached to is required.<br>Instead of ids, the order number of when the link was defined in the graph is used. In the example below the style<br>defined in the linkStyle statement will belong to the fourth link in the graph:</p>
<pre class="css"><code>linkStyle 3 stroke:#ff3,stroke-width:4px;</code></pre><h3 id="styling-a-node">Styling a node</h3>
<p>It is possible to apply specific styles such as a thicker border or a different background color to a node.</p>
<pre class="css"><code>%% Example code
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px;
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5;</code></pre><div class="mermaid">graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5</div><h4 id="classes">Classes</h4>
<p>More convenient then defining the style everytime is to define a class of styles and attach this class to the nodes that<br>should have a different look.</p>
<p>a class definition looks like the example below:</p>
<pre class="css"><code> classDef className fill:#f9f,stroke:#333,stroke-width:4px;</code></pre><p>Attachment of a class to a node is done as per below:</p>
<pre class="css"><code> class nodeId1 className;</code></pre><p>It is also possible to attach a class to a list of nodes in one statement:</p>
<pre class="css"><code> class nodeId1,nodeId2 className;</code></pre><h4 id="default-class">Default class</h4>
<p>If a class is named default it will be assigned to all classes without specific class definitions.</p>
<pre class="css"><code> classDef default fill:#f9f,stroke:#333,stroke-width:4px;</code></pre><h2 id="graph-declarations-with-spaces-between-vertices-and-link-and-without-semicolon">Graph declarations with spaces between vertices and link and without semicolon</h2>
<ul>
<li><p>In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.</p>
</li>
<li><p>A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduce to improve readability.</p>
</li>
</ul>
<p>Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.</p>
<pre class="css"><code> A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]</code></pre><div class="mermaid">graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]</div>
<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>
<h1 id="gant-diagrams">Gant diagrams</h1>
<blockquote>
<p>A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project.</p>
</blockquote>
<p>Mermaid can render Gantt diagrams. The code snippet below:</p>
<pre class="css"><code>%% Example of sequence diagram
gantt
title A Gantt Diagram
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
anther task : 24d</code></pre><p>Renders the following diagram:</p>
<div class="mermaid">gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
anther task : 24d</div><h2 id="syntax">Syntax</h2>
<pre class="css"><code>%% Example with slection of syntaxes
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h</code></pre><p>Renders like below:</p>
<div class="mermaid">gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h</div><h3 id="title">title</h3>
<p>Tbd</p>
<h2 id="sections-statements">Sections statements</h2>
<p>Tbd</p>
<h2 id="setting-dates">Setting dates</h2>
<p>Tbd</p>
<h3 id="date-format">Date format</h3>
<p>Tbd</p>
<h4 id="diagram-definition">Diagram definition</h4>
<p>Input Example Description:</p>
<pre class="css"><code>YYYY 2014 4 digit year
YY 14 2 digit year
Q 1..4 Quarter of year. Sets month to first month in quarter.
M MM 1..12 Month number
MMM MMMM January..Dec Month name in locale set by moment.locale()
D DD 1..31 Day of month
Do 1st..31st Day of month with ordinal
DDD DDDD 1..365 Day of year
X 1410715640.579 Unix timestamp
x 1410715640579 Unix ms timestamp
Input Example Description
H HH 0..23 24 hour time
h hh 1..12 12 hour time used with a A.
a A am pm Post or ante meridiem
m mm 0..59 Minutes
s ss 0..59 Seconds
S 0..9 Tenths of a second
SS 0..99 Hundreds of a second
SSS 0..999 Thousandths of a second
Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z</code></pre><p>More info in: <a href="http://momentjs.com/docs/#/parsing/string-format/">http://momentjs.com/docs/#/parsing/string-format/</a></p>
<h4 id="scale">Scale</h4>
<pre class="css"><code>%a - abbreviated weekday name.
%A - full weekday name.
%b - abbreviated month name.
%B - full month name.
%c - date and time, as "%a %b %e %H:%M:%S %Y".
%d - zero-padded day of the month as a decimal number [01,31].
%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
%H - hour (24-hour clock) as a decimal number [00,23].
%I - hour (12-hour clock) as a decimal number [01,12].
%j - day of the year as a decimal number [001,366].
%m - month as a decimal number [01,12].
%M - minute as a decimal number [00,59].
%L - milliseconds as a decimal number [000, 999].
%p - either AM or PM.
%S - second as a decimal number [00,61].
%U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53].
%w - weekday as a decimal number [0(Sunday),6].
%W - week number of the year (Monday as the first day of the week) as a decimal number [00,53].
%x - date, as "%m/%d/%Y".
%X - time, as "%H:%M:%S".
%y - year without century as a decimal number [00,99].
%Y - year with century as a decimal number.
%Z - time zone offset, such as "-0700".
%% - a literal "%" character.</code></pre><p>More info in: <a href="https://github.com/mbostock/d3/wiki/Time-Formatting">https://github.com/mbostock/d3/wiki/Time-Formatting</a></p>
<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>
.grid .tick {
stroke: lightgrey;
opacity: 0.3;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
#tag {
color: white;
background: #FA283D;
width: 150px;
position: absolute;
display: none;
padding:3px 6px;
margin-left: -80px;
font-size: 11px;
}
#tag:before {
border: solid transparent;
content: ' ';
height: 0;
left: 50%;
margin-left: -5px;
position: absolute;
width: 0;
border-width: 10px;
border-bottom-color: #FA283D;
top: -20px;
}
.taskText {
fill:white;
text-anchor:middle;
}
.taskTextOutsideRight {
fill:black;
text-anchor:start;
}
.taskTextOutsideLeft {
fill:black;
text-anchor:end;
}</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 the <strong>sequenceConfig</strong> part of the configuration object. Read more about it <a href="http://knsv.github.io/mermaid/index.html#configuration28">here</a>. How to use<br>the CLI is described in the <a href="(http://knsv.github.io/mermaid/index.html#mermaidCLI">mermaidCLI</a> page.</p>
<h1 id="mermaid-cli">mermaid CLI</h1>
<p>Installing mermaid globally (<code>npm install -g mermaid</code>) will expose the <code>mermaid</code> command to your environment, allowing you to generate PNGs from any file containing mermaid markup via the command line.</p>
<p><strong>Note:</strong> The <code>mermaid</code> command requires <a href="http://phantomjs.org/">PhantomJS</a> (version <code>^1.9.0</code>) to be installed and available in your <em>$PATH</em>, or you can specify it's location with the <code>-e</code> option. For most environments, <code>npm install -g phantomjs</code> will satisfy this requirement.</p>
<h2 id="usage">Usage</h2>
<pre class="css"><code>$ mermaid --help
Usage: mermaid [options] <file>...
file The mermaid description file to be rendered
Options:
-s --svg Output SVG instead of PNG (experimental)
-p --png If SVG was selected, and you also want PNG, set this flag
-o --outputDir Directory to save files, will be created automatically, defaults to `cwd`
-e --phantomPath Specify the path to the phantomjs executable
-c --sequenceConfig Specify the path to the file with the configuration to be applied in the sequence diagram
-h --help Show this message
-v --verbose Show logging
--version Print version and quit</code></pre><pre class="css"><code>mermaid testGraph.mmd</code></pre><h2 id="sequence-diagram-configuration">Sequence diagram configuration</h2>
<p>The --sequenceConfig option allows overriding the sequence diagram configuration. It could be useful to increase the width between actors, the notes width or the margin to fit some large texts that are not well rendered with the default configuration, for example.</p>
<p>The content of the file must be a JSON like this:</p>
<pre class="css"><code>
{
"diagramMarginX": 100,
"diagramMarginY": 10,
"actorMargin": 150,
"width": 150,
"height": 65,
"boxMargin": 10,
"boxTextMargin": 5,
"noteMargin": 10,
"messageMargin": 35
}</code></pre><p>These properties will override the default values and if a property is not set in this object, it will left it empty and could raise an error. The current properties (measured in px) are:</p>
<ul>
<li>diagramMarginX: Size of the empty space to add at the left-right of the diagram.</li>
<li>diagramMarginY: Size of the empty space to add at the top-bottom of the diagram.</li>
<li>actorMargin: Horizontal space between each participant. The arrows between them would have this size too.</li>
<li>width: Width of the participant box.</li>
<li>height: Height of the participant box.</li>
<li>boxMargin: Blank area around loop boxes.</li>
<li>boxTextMargin: Blank area between the text and the border in a loop box.</li>
<li>noteMargin: Size of the empty space around a note.</li>
<li>messageMargin: Space between messages</li>
</ul>
<h2 id="cli-known-issues">CLI Known Issues</h2>
<ul>
<li>SVG output currently does some replacement on text, as mermaid's SVG output is only appropriate for browsers. Text color and background color is not yet replicated; please use PNGs for most purposes until this is resolved.</li>
<li>SVG output is decidedly non-standard. It works, but may cause issues in some viewers.</li>
</ul>
<h1 id="demos">Demos</h1>
<h2 id="basic-flowchart">Basic flowchart</h2>
<pre class="css"><code>%% Example diagram
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D</code></pre><div class="mermaid">graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D</div><h2 id="larger-flowchart-with-some-styling">Larger flowchart with some styling</h2>
<pre class="css"><code>%% Code for flowchart below
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A subgraph
od>Odd shape]-- Two line<br>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange</code></pre><div class="mermaid">graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A subgraph
od>Odd shape]-- Two line<br>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange</div><h2 id="basic-sequence-diagram">Basic sequence diagram</h2>
<pre class="css"><code>%% Sequence diagram code
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?</code></pre><div class="mermaid">sequenceDiagram
Alice->> Bob: Hello Bob, how are you?
Bob-->> John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?</div><h2 id="loops-alt-and-opt">Loops, alt and opt</h2>
<pre class="css"><code>%% Sequence diagram code
sequenceDiagram
loop Daily query
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
end</cod