mermaid/build/www/all.html

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

<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 &lt;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="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="downstream-projects">Downstream projects</h1>
<p>Mermaid is supported in a number of publishing systems and editors. Please report if a plugin/editor is missing from the list below:</p>
<ul>
<li>Support in LightPaper 1.2+. <a href="https://github.com/42Squares/LightPaper/blob/master/doc/Adding%20Mermaid%20Diagrams.md">Howto</a>. Discout with code MERMAID_25</li>
<li><a href="https://github.com/JozoVilcek/gitbook-plugin-mermaid">gitbook-plugin</a></li>
<li>light table</li>
<li><a href="https://marketplace.atlassian.com/plugins/org.anvard.atlassian.mermaid-plugin/server/overview">Confluence plugin</a></li>
<li><a href="http://nauvalatmaja.com/2015/01/13/rendering-mermaid-in-docpad/">Using mermaid via docpad</a></li>
<li><a href="https://rubygems.org/gems/jekyll-mermaid/versions/1.0.0">Using mermaid in Jekyll</a></li>
<li><a href="http://mostlyblather.com/blog/2015/05/23/mermaid-jekyll-octopress/">Using mermaid via Octopress</a></li>
<li><a href="http://pad.haroopress.com/user.html">Mardown editor Haroopad</a></li>
<li><a href="https://atom.io/packages/atom-mermaid">Plugin for atom</a></li>
<li><a href="http://mdp.tylingsoft.com/">Markdown Plus</a></li>
<li><a href="https://github.com/kannokanno/previm">Vim Plugin</a></li>
<li><a href="https://github.com/mgaitan/sphinxcontrib-mermaid">Sphinx extension</a></li>
<li><a href="https://github.com/raghur/mermaid-filter">Pandoc filter</a></li>
<li><a href="https://github.com/sinedied/hads">hads</a></li>
</ul>
<h1 id="online-live-editor">Online live editor</h1>
<p>An editor is available for creating diagrams. With it you can quickly start writing mermaid diagrams. It is possible to:</p>
<ul>
<li>save the result as a svg</li>
<li>get a link to a viewer of the diagram</li>
<li><p>get a link to edit of the diagram to share a diagram so that someone else can tweak it and send a new link back</p>
</li>
<li><p><a href="http://knsv.github.io/mermaid/live_editor">Editor</a></p>
</li>
</ul>

<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 a javascript bundle and a stylesheet, e.g. the urls below are for the default style and the all-in-one javascript - note that #version# should be replaced with version of choice:</p>
<pre class="css"><code>https://cdn.rawgit.com/knsv/mermaid/#version#/dist/mermaid.css
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/6.0.0/dist/mermaid.min.js">js version 6.0.0</a></li>
</ul>
<p>Checkout the <a href="https://github.com/knsv/mermaid/releases">latest version</a> and <a href="https://github.com/knsv/mermaid/tree/master/dist">other styles</a> such as <code>forest</code> and <code>dark</code>.</p>
<p>There are some bundles to choose from:</p>
<ul>
<li>mermaid.js, mermaid.min.js This bundle contains all the javascript libraries 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&#39;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><link rel="stylesheet" href="mermaid.css">
&lt;script src=&quot;mermaid.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;mermaid.initialize({startOnLoad:true});&lt;/script&gt;</code></pre><p>Further down on your page mermaid will look for tags with <code>class=&quot;mermaid&quot;</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>&lt;div class=&quot;mermaid&quot;&gt;
    CHART DEFINITION GOES HERE
&lt;/div&gt;</code></pre><p>Would end up like this:</p>
<pre class="css"><code>&lt;div class=&quot;mermaid&quot; id=&quot;mermaidChart0&quot;&gt;
    &lt;svg&gt;
        Chart ends up here
    &lt;/svg&gt;
&lt;/div&gt;</code></pre><p>An id is also added to mermaid tags without id.</p>
<h3 id="labels-out-of-bounds">Labels out of bounds</h3>
<p>If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the<br>whole page to have been loaded (dom + assets, particularly the fonts file).</p>
<p>$(document).load(function() {<br>    mermaid.initialize();<br>});<br>over</p>
<p>$(document).ready(function() {<br>    mermaid.initialize();<br>});</p>
<p>Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration<br>in mermaid uses the window.load event to start rendering.</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=&quot;mermaid&quot;</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>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;mermaid.css&quot; /&gt;
    &lt;script src=&quot;bundle.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;mermaid&quot;&gt;
        graph LR
            A--&gt;B
            B--&gt;C
            C--&gt;A
            D--&gt;C
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</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>&lt;script src=&quot;mermaidAPI.js&quot;&gt;&lt;/script&gt;

&lt;script&gt;
    mermaidAPI.initialize({
        startOnLoad:false
    });
    $(function(){
    // Example of using the API
        var element = document.querySelector("#graphDiv");

        var insertSvg = function(svgCode, bindFunctions){
            element.innerHTML = svgCode;
        };

        var graphDefinition = 'graph TB\na-->b';
        var graph = mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
    });
&lt;/script&gt;</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><h3 id="binding-events">Binding events</h3>
<p>Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must<br>add those events after the graph has been inserted into the DOM.</p>
<p>The example code below is an extract of wheat mermaid does when using the API. The example show how it is possible to<br>bind events to a svg when using the API for rendering.</p>
<pre class="css"><code>     var insertSvg = function(svgCode, bindFunctions){
         element.innerHTML = svgCode;
         if(typeof callback !== 'undefined'){
             callback(id);
         }
         bindFunctions(element);
     };

     var id = 'theGraph';


     mermaidAPI.render(id,txt,insertSvg, element);</code></pre><ol>
<li>The graph is generated using the render call. </li>
<li>After generation the render function calls the provided callback function, in this case its called insertSvg.</li>
<li>The callback function is called with two parameters, the svg code of the generated graph and a function. This<br>function binds events to the svg <strong>after</strong> it is inserted into the DOM.</li>
<li>Insert the svg code into the DOM for presentation</li>
<li>Call the binding function that bainds the events</li>
</ol>
<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 '&lt;div class="mermaid">'+code+'&lt;/div>';
        }
        else{
            return '&lt;pre>&lt;code>'+code+'&lt;/code>&lt;/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 &#39;marked&#39;

module.exports = (options) -&gt;
  hasMermaid = false
  renderer = new marked.Renderer()
  renderer.defaultCode = renderer.code
  renderer.code = (code, language) -&gt;
    if language is &#39;mermaid&#39;
      html = &#39;&#39;
      if not hasMermaid
        hasMermaid = true
        html += &#39;&amp;ltscript src=&quot;&#39;+options.mermaidPath+&#39;&quot;&gt;&lt;/script&gt;&#39;
      html + &#39;&amp;ltdiv class=&quot;mermaid&quot;&gt;&#39;+code+&#39;&lt;/div&gt;&#39;
    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>    &lt;script src=&quot;../dist/mermaid.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        var config = {
            startOnLoad:true,
            flowchart:{
                    useMaxWidth:false,
                    htmlLabels:true
            }
        };
        mermaid.initialize(config);
    &lt;/script&gt;</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 &amp; 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="a-link-with-arrow-head-and-text">A link with arrow head and text</h3>
<pre class="css"><code>A-->|text|B</code></pre><div class="mermaid">graph LR;
    A-->|text|B</div><p>or</p>
<pre class="css"><code>A-- text -->B</code></pre><div class="mermaid">graph LR;
    A-- text -->B</div><h3 id="dotted-link">Dotted link</h3>
<p>-.-&gt;</p>
<div class="mermaid">graph LR;
   A-.->B;</div><h3 id="dotted-link-with-text">Dotted link with text</h3>
<p>-. text .-&gt;</p>
<div class="mermaid">graph LR;
   A-. text .-> B</div><h3 id="thick-link">Thick link</h3>
<p>==&gt;</p>
<div class="mermaid">graph LR;
   A ==> B</div><h3 id="thick-link-with-text">Thick link with text</h3>
<p>== text ==&gt;</p>
<div class="mermaid">graph LR;
   A == text ==> B</div><h2 id="special-characters-that-break-syntax">Special characters that break syntax</h2>
<p>It is possible to put text within quotes in order to render more troublesome characters. As in the example below:</p>
<pre class="css"><code>graph LR
    d1["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="entity-codes-to-escape-characters">Entity codes to escape characters</h3>
<p>It is possible to escape characters using the syntax examplified here.</p>
<p>The flowchart defined by the following code:</p>
<pre class="css"><code>    graph LR
        A["A double quote:#quot;"] -->B["A dec char:#9829;"]</code></pre><p>This would render to the diagram below:</p>
<div class="mermaid">    graph LR
        A["A double quote:#quot;"] -->B["A dec char:#9829;"]</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, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.</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>
<p>Examples of tooltip usage below:</p>
<pre class="css"><code>&lt;script&gt;
    var callback = function(){
        alert(&#39;A callback was triggered&#39;);
    }
&lt;script&gt;</code></pre><pre class="css"><code>graph LR;
    A-->B;
    click A callback "Tooltip for a callback"
    click B "http://www.github.com" "This is a tooltip for a link"</code></pre><p>The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.</p>
<div class="mermaid">graph LR;
    A-->B;
    click A callback "Tooltip"
    click B "http://www.github.com" "This is a link"</div><aside class="success">The tooltip functionality and the ability to link to urls are available from version 0.5.2.</aside>

<p>When integration mermaid using the mermaidAPI #mermaidapi the function that binds the events need to be run when the finished graph has been added to the page. This is described in the <a href="#api-usage">API usage</a> section.</p>
<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 every time 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><h3 id="css-classes">Css classes</h3>
<p>It is also possible to pre dine classes in css styles that can be applied from the graph definition as in the example<br>below:<br><strong>Example style</strong></p>
<pre class="css"><code><style>
    .cssClass > rect{
        fill:#FF0000;
        stroke:#FFFF00;
        stroke-width:4px;
    }
</style></code></pre><p><strong>Example definition</strong></p>
<pre class="css"><code>graph LR;
    A-->B[AAA<span>BBB</span>];
    B-->D;
    class A cssClass;</code></pre><aside class="warning">Class definitions in the graph defnition is broken in version 0.5.1 but has been fixed in the master branch of mermaid. This fix will be included in 0.5.2</aside>



<h3 id="default-class">Default class</h3>
<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="basic-support-for-fontawesome">Basic support for fontawesome</h2>
<p>It is possible to add icons from fontawesome. In order to do so, you need to add the fontwesome as described in the instructions at<br><a href="https://fortawesome.github.io/Font-Awesome/">the fontawesome web site</a>.</p>
<p>The icons are acessed via the syntax fa:#icon class name#.</p>
<p>The example code below</p>
<pre class="css"><code>graph TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?);</code></pre><p>Would render the graph below:</p>
<div class="mermaid">graph TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?);</div><aside class="success">Support for fontawesome has been comitted to the  master branch and will be included in 0.5.3</aside>

<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&#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>

<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&#39;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       Di