mermaid/build/www/flowchart.html

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

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