mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.
450 lines (402 loc) • 23 kB
HTML
<html>
<head>
<title>flowchart.md</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" media="all" href="../doc-style.css" />
<script src="../doc-filelist.js"></script>
<script>
var relativeDir = "../", thisFile = "Users/knut/Documents/source/mermaid/docs/flowchart.md", defaultSidebar = true;
</script>
<script src="../doc-script.js"></script>
<script src="../mermaid.js"></script>
<link rel="stylesheet" href="../mermaid.css" />
</head>
<body>
<div id="sidebar_wrapper">
<div id="sidebar_switch">
<span class="tree">Files</span>
<span class="headings">Headings</span>
</div>
<div id="tree"></div>
<div id="headings">
<div class="heading h1">
<a href="#Flowcharts - Basic Syntax">Flowcharts - Basic Syntax</a>
</div>
<div class="heading h2">
<a href="#Graph">Graph</a>
</div>
<div class="heading h2">
<a href="#Nodes & shapes">Nodes & shapes</a>
</div>
<div class="heading h3">
<a href="#A node (default)">A node (default)</a>
</div>
<div class="heading h3">
<a href="#A node with text">A node with text</a>
</div>
<div class="heading h3">
<a href="#A node with round edges">A node with round edges</a>
</div>
<div class="heading h3">
<a href="#A node in the form of a circle">A node in the form of a circle</a>
</div>
<div class="heading h3">
<a href="#A node in an asymetric shape">A node in an asymetric shape</a>
</div>
<div class="heading h3">
<a href="#A node (rhombus)">A node (rhombus)</a>
</div>
<div class="heading h2">
<a href="#Links between nodes">Links between nodes</a>
</div>
<div class="heading h3">
<a href="#A link with arrow head">A link with arrow head</a>
</div>
<div class="heading h3">
<a href="#An open link">An open link</a>
</div>
<div class="heading h3">
<a href="#Text on links">Text on links</a>
</div>
<div class="heading h3">
<a href="#Dotted link">Dotted link</a>
</div>
<div class="heading h3">
<a href="#Dotted link with text">Dotted link with text</a>
</div>
<div class="heading h3">
<a href="#Thick link">Thick link</a>
</div>
<div class="heading h3">
<a href="#Thick link with text">Thick link with text</a>
</div>
<div class="heading h2">
<a href="#Subgraphs">Subgraphs</a>
</div>
<div class="heading h2">
<a href="#Interaction">Interaction</a>
</div>
<div class="heading h2">
<a href="#Styling and classes">Styling and classes</a>
</div>
<div class="heading h3">
<a href="#Styling links">Styling links</a>
</div>
<div class="heading h3">
<a href="#Styling a node">Styling a node</a>
</div>
<div class="heading h4">
<a href="#Classes">Classes</a>
</div>
<div class="heading h4">
<a href="#Default class">Default class</a>
</div>
<div class="heading h2">
<a href="#Graph declarations with spaces between vertices and link and without semicolon">Graph declarations with spaces between vertices and link and without semicolon</a>
</div>
<div class="heading h2">
<a href="#Configuration...">Configuration...</a>
</div>
</div>
</div>
<div id="sidebar-toggle"></div>
<div id="container"><div class="docs markdown"><div class="pilwrap" id="Flowcharts - Basic Syntax">
<h1>
<a href="#Flowcharts - Basic Syntax" name="Flowcharts - Basic Syntax" class="pilcrow">¶</a>
Flowcharts - Basic Syntax</h1>
</div>
<div class="pilwrap" id="Graph">
<h2>
<a href="#Graph" name="Graph" class="pilcrow">¶</a>
Graph</h2>
</div>
<p>This statement declares a new graph and the direction of the graph layout.</p>
<div class="highlight"><pre><code><span class="o">%%</span> <span class="nx">Example</span> <span class="nx">code</span>
<span class="nx">graph</span> <span class="nx">TD</span>
</code></pre></div>
<p>This declares a graph oriented from top to bottom.</p>
<script>mermaid.initialize({startOnLoad:true});</script><div class="mermaid">graph TD
Start --> Stop</div>
<div class="highlight"><pre><code><span class="o">%%</span> <span class="nx">Example</span> <span class="nx">code</span>
<span class="nx">graph</span> <span class="nx">LR</span>
</code></pre></div>
<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><div class="pilwrap" id="Nodes & shapes">
<h2>
<a href="#Nodes & shapes" name="Nodes & shapes" class="pilcrow">¶</a>
Nodes & shapes</h2>
</div>
<div class="pilwrap" id="A node (default)">
<h3>
<a href="#A node (default)" name="A node (default)" class="pilcrow">¶</a>
A node (default)</h3>
</div>
<div class="highlight"><pre><code><span class="nx">graph</span> <span class="nx">LR</span>
<span class="nx">id1</span>
</code></pre></div>
<div class="mermaid">graph LR
id</div><p>Note that the id is what is displayed in the box.</p>
<div class="pilwrap" id="A node with text">
<h3>
<a href="#A node with text" name="A node with text" class="pilcrow">¶</a>
A node with text</h3>
</div>
<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
found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The
one previously defined will be used when rendering the box.</p>
<div class="highlight"><pre><code><span class="nx">graph</span> <span class="nx">LR</span>
<span class="nx">id1</span><span class="p">[</span><span class="nx">This</span> <span class="nx">is</span> <span class="nx">the</span> <span class="nx">text</span> <span class="k">in</span> <span class="nx">the</span> <span class="nx">box</span><span class="p">]</span>
</code></pre></div>
<div class="mermaid">graph LR
id1[This is the text in the box]</div><div class="pilwrap" id="A node with round edges">
<h3>
<a href="#A node with round edges" name="A node with round edges" class="pilcrow">¶</a>
A node with round edges</h3>
</div>
<div class="highlight"><pre><code><span class="nx">graph</span> <span class="nx">LR</span>
<span class="nx">id1</span><span class="p">(</span><span class="nx">This</span> <span class="nx">is</span> <span class="nx">the</span> <span class="nx">text</span> <span class="k">in</span> <span class="nx">the</span> <span class="nx">box</span><span class="p">);</span>
</code></pre></div>
<div class="mermaid">graph LR
id1(This is the text in the box)</div><div class="pilwrap" id="A node in the form of a circle">
<h3>
<a href="#A node in the form of a circle" name="A node in the form of a circle" class="pilcrow">¶</a>
A node in the form of a circle</h3>
</div>
<div class="highlight"><pre><code><span class="nx">graph</span> <span class="nx">LR</span>
<span class="nx">id1</span><span class="p">((</span><span class="nx">This</span> <span class="nx">is</span> <span class="nx">the</span> <span class="nx">text</span> <span class="k">in</span> <span class="nx">the</span> <span class="nx">circle</span><span class="p">));</span>
</code></pre></div>
<div class="mermaid">graph LR
id1((This is the text in the circle))</div><div class="pilwrap" id="A node in an asymetric shape">
<h3>
<a href="#A node in an asymetric shape" name="A node in an asymetric shape" class="pilcrow">¶</a>
A node in an asymetric shape</h3>
</div>
<div class="highlight"><pre><code><span class="nx">graph</span> <span class="nx">LR</span>
<span class="nx">id1This</span> <span class="nx">is</span> <span class="nx">the</span> <span class="nx">text</span> <span class="k">in</span> <span class="nx">the</span> <span class="nx">box</span><span class="p">]</span>
</code></pre></div>
<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>
<div class="pilwrap" id="A node (rhombus)">
<h3>
<a href="#A node (rhombus)" name="A node (rhombus)" class="pilcrow">¶</a>
A node (rhombus)</h3>
</div>
<div class="highlight"><pre><code><span class="nx">graph</span> <span class="nx">LR</span>
<span class="nx">id1</span><span class="p">{</span><span class="nx">This</span> <span class="nx">is</span> <span class="nx">the</span> <span class="nx">text</span> <span class="k">in</span> <span class="nx">the</span> <span class="nx">box</span><span class="p">}</span>
</code></pre></div>
<div class="mermaid">graph LR
id1{This is the text in the box}</div><div class="pilwrap" id="Links between nodes">
<h2>
<a href="#Links between nodes" name="Links between nodes" class="pilcrow">¶</a>
Links between nodes</h2>
</div>
<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>
<div class="pilwrap" id="A link with arrow head">
<h3>
<a href="#A link with arrow head" name="A link with arrow head" class="pilcrow">¶</a>
A link with arrow head</h3>
</div>
<div class="highlight"><pre><code><span class="nx">graph</span> <span class="nx">LR</span>
<span class="nx">A</span><span class="o">--</span><span class="nx">B</span>
</code></pre></div>
<div class="highlight"><pre><code><span class="nx">graph</span> <span class="nx">LR</span><span class="p">;</span>
<span class="nx">A</span><span class="o">--</span><span class="nx">B</span>
</code></pre></div>
<div class="pilwrap" id="An open link">
<h3>
<a href="#An open link" name="An open link" class="pilcrow">¶</a>
An open link</h3>
</div>
<div class="highlight"><pre><code><span class="nx">graph</span> <span class="nx">LR</span>
<span class="nx">A</span> <span class="o">---</span> <span class="nx">B</span>
</code></pre></div>
<div class="mermaid">graph LR;
A --- B</div><div class="pilwrap" id="Text on links">
<h3>
<a href="#Text on links" name="Text on links" class="pilcrow">¶</a>
Text on links</h3>
</div>
<div class="highlight"><pre><code><span class="nx">A</span><span class="o">--</span> <span class="nx">This</span> <span class="nx">is</span> <span class="nx">the</span> <span class="nx">text</span> <span class="o">---</span> <span class="nx">B</span>
</code></pre></div>
<p>or</p>
<div class="highlight"><pre><code><span class="nx">A</span><span class="o">---|</span><span class="nx">This</span> <span class="nx">is</span> <span class="nx">the</span> <span class="nx">text</span><span class="o">|</span><span class="nx">B</span><span class="p">;</span>
</code></pre></div>
<div class="mermaid">graph LR;
A-- This is the text ---B</div><div class="pilwrap" id="Dotted link">
<h3>
<a href="#Dotted link" name="Dotted link" class="pilcrow">¶</a>
Dotted link</h3>
</div>
<p>-.-></p>
<div class="mermaid">graph LR;
A-.->B;</div><div class="pilwrap" id="Dotted link with text">
<h3>
<a href="#Dotted link with text" name="Dotted link with text" class="pilcrow">¶</a>
Dotted link with text</h3>
</div>
<p>-. text .-></p>
<div class="mermaid">graph LR;
A-. text .-> B</div><div class="pilwrap" id="Thick link">
<h3>
<a href="#Thick link" name="Thick link" class="pilcrow">¶</a>
Thick link</h3>
</div>
<p>==></p>
<div class="mermaid">graph LR;
A ==> B</div><div class="pilwrap" id="Thick link with text">
<h3>
<a href="#Thick link with text" name="Thick link with text" class="pilcrow">¶</a>
Thick link with text</h3>
</div>
<p>== text ==></p>
<div class="mermaid">graph LR;
A == text ==> B</div><div class="pilwrap" id="Subgraphs">
<h2>
<a href="#Subgraphs" name="Subgraphs" class="pilcrow">¶</a>
Subgraphs</h2>
</div>
<div class="highlight"><pre><code><span class="nx">subgraph</span> <span class="nx">title</span>
<span class="nx">graph</span> <span class="nx">definition</span>
<span class="nx">end</span>
</code></pre></div>
<p>An example below:</p>
<div class="highlight"><pre><code> <span class="o">%%</span> <span class="nx">Subgraph</span> <span class="nx">example</span>
<span class="nx">graph</span> <span class="nx">TB</span>
<span class="nx">subgraph</span> <span class="nx">one</span>
<span class="nx">a1</span><span class="o">--</span><span class="nx">a2</span>
<span class="nx">end</span>
<span class="nx">subgraph</span> <span class="nx">two</span>
<span class="nx">b1</span><span class="o">--</span><span class="nx">b2</span>
<span class="nx">end</span>
<span class="nx">subgraph</span> <span class="nx">three</span>
<span class="nx">c1</span><span class="o">--</span><span class="nx">c2</span>
<span class="nx">end</span>
<span class="nx">c1</span><span class="o">--</span><span class="nx">a2</span>
</code></pre></div>
<div class="mermaid">graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end</div><div class="pilwrap" id="Interaction">
<h2>
<a href="#Interaction" name="Interaction" class="pilcrow">¶</a>
Interaction</h2>
</div>
<p>It is possible to bind a click event to a node:</p>
<div class="highlight"><pre><code><span class="nx">click</span> <span class="nx">nodeId</span> <span class="nx">callback</span>
</code></pre></div>
<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>
<div class="pilwrap" id="Styling and classes">
<h2>
<a href="#Styling and classes" name="Styling and classes" class="pilcrow">¶</a>
Styling and classes</h2>
</div>
<div class="pilwrap" id="Styling links">
<h3>
<a href="#Styling links" name="Styling links" class="pilcrow">¶</a>
Styling links</h3>
</div>
<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
have no ids in the same way as nodes, some other way of deciding what style the links should be attached to is required.
Instead of ids, the order number of when the link was defined in the graph is used. In the example below the style
defined in the linkStyle statement will belong to the fourth link in the graph:</p>
<div class="highlight"><pre><code><span class="nx">linkStyle</span> <span class="mi">3</span> <span class="nx">stroke</span><span class="o">:</span><span class="err">#</span><span class="nx">ff3</span><span class="p">,</span><span class="nx">stroke</span><span class="o">-</span><span class="nx">width</span><span class="o">:</span><span class="mi">4</span><span class="nx">px</span><span class="p">;</span>
</code></pre></div>
<div class="pilwrap" id="Styling a node">
<h3>
<a href="#Styling a node" name="Styling a node" class="pilcrow">¶</a>
Styling a node</h3>
</div>
<p>It is possible to apply specific styles such as a thicker border or a different background color to a node.</p>
<div class="highlight"><pre><code><span class="o">%%</span> <span class="nx">Example</span> <span class="nx">code</span>
<span class="nx">graph</span> <span class="nx">LR</span>
<span class="nx">id1</span><span class="p">(</span><span class="nx">Start</span><span class="p">)</span><span class="o">--</span><span class="nx">id2</span><span class="p">(</span><span class="nx">Stop</span><span class="p">)</span>
<span class="nx">style</span> <span class="nx">id1</span> <span class="nx">fill</span><span class="o">:</span><span class="err">#</span><span class="nx">f9f</span><span class="p">,</span><span class="nx">stroke</span><span class="o">:</span><span class="err">#</span><span class="mi">333</span><span class="p">,</span><span class="nx">stroke</span><span class="o">-</span><span class="nx">width</span><span class="o">:</span><span class="mi">4</span><span class="nx">px</span><span class="p">;</span>
<span class="nx">style</span> <span class="nx">id2</span> <span class="nx">fill</span><span class="o">:</span><span class="err">#</span><span class="nx">ccf</span><span class="p">,</span><span class="nx">stroke</span><span class="o">:</span><span class="err">#</span><span class="nx">f66</span><span class="p">,</span><span class="nx">stroke</span><span class="o">-</span><span class="nx">width</span><span class="o">:</span><span class="mi">2</span><span class="nx">px</span><span class="p">,</span><span class="nx">stroke</span><span class="o">-</span><span class="nx">dasharray</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">5</span><span class="p">;</span>
</code></pre></div>
<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><div class="pilwrap" id="Classes">
<h4>
<a href="#Classes" name="Classes" class="pilcrow">¶</a>
Classes</h4>
</div>
<p>More convenient then defining the style everytime is to define a class of styles and attach this class to the nodes that
should have a different look.</p>
<p>a class definition looks like the example below:</p>
<div class="highlight"><pre><code> <span class="nx">classDef</span> <span class="nx">className</span> <span class="nx">fill</span><span class="o">:</span><span class="err">#</span><span class="nx">f9f</span><span class="p">,</span><span class="nx">stroke</span><span class="o">:</span><span class="err">#</span><span class="mi">333</span><span class="p">,</span><span class="nx">stroke</span><span class="o">-</span><span class="nx">width</span><span class="o">:</span><span class="mi">4</span><span class="nx">px</span><span class="p">;</span>
</code></pre></div>
<p>Attachment of a class to a node is done as per below:</p>
<div class="highlight"><pre><code> <span class="kr">class</span> <span class="nx">nodeId1</span> <span class="nx">className</span><span class="p">;</span>
</code></pre></div>
<p>It is also possible to attach a class to a list of nodes in one statement:</p>
<div class="highlight"><pre><code> <span class="kr">class</span> <span class="nx">nodeId1</span><span class="p">,</span><span class="nx">nodeId2</span> <span class="nx">className</span><span class="p">;</span>
</code></pre></div>
<div class="pilwrap" id="Default class">
<h4>
<a href="#Default class" name="Default class" class="pilcrow">¶</a>
Default class</h4>
</div>
<p>If a class is named default it will be assigned to all classes without specific class definitions.</p>
<div class="highlight"><pre><code> <span class="nx">classDef</span> <span class="k">default</span> <span class="nx">fill</span><span class="o">:</span><span class="err">#</span><span class="nx">f9f</span><span class="p">,</span><span class="nx">stroke</span><span class="o">:</span><span class="err">#</span><span class="mi">333</span><span class="p">,</span><span class="nx">stroke</span><span class="o">-</span><span class="nx">width</span><span class="o">:</span><span class="mi">4</span><span class="nx">px</span><span class="p">;</span>
</code></pre></div>
<div class="pilwrap" id="Graph declarations with spaces between vertices and link and without semicolon">
<h2>
<a href="#Graph declarations with spaces between vertices and link and without semicolon" name="Graph declarations with spaces between vertices and link and without semicolon" class="pilcrow">¶</a>
Graph declarations with spaces between vertices and link and without semicolon</h2>
</div>
<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>
<div class="highlight"><pre><code> <span class="nx">A</span><span class="p">[</span><span class="nx">Hard</span> <span class="nx">edge</span><span class="p">]</span> <span class="o">--|</span><span class="nx">Link</span> <span class="nx">text</span><span class="o">|</span> <span class="nx">B</span><span class="p">(</span><span class="nx">Round</span> <span class="nx">edge</span><span class="p">)</span>
<span class="nx">B</span> <span class="o">--</span> <span class="nx">C</span><span class="p">{</span><span class="nx">Decision</span><span class="p">}</span>
<span class="nx">C</span> <span class="o">--|</span><span class="nx">One</span><span class="o">|</span> <span class="nx">D</span><span class="p">[</span><span class="nx">Result</span> <span class="nx">one</span><span class="p">]</span>
<span class="nx">C</span> <span class="o">--|</span><span class="nx">Two</span><span class="o">|</span> <span class="nx">E</span><span class="p">[</span><span class="nx">Result</span> <span class="nx">two</span><span class="p">]</span>
</code></pre></div>
<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><div class="pilwrap" id="Configuration...">
<h2>
<a href="#Configuration..." name="Configuration..." class="pilcrow">¶</a>
Configuration...</h2>
</div>
<p>Is it possible to adjust the width of the rendered flowchart.</p>
<p>This is done by defining <strong>mermaid.flowchartConfig</strong> or by the CLI to use a json file with the configuration. How to use
the CLI is described in the mermaidCLI page.
mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.</p>
<div class="highlight"><pre><code><span class="nx">mermaid</span><span class="p">.</span><span class="nx">flowchartConfig</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">width</span><span class="o">:</span><span class="mi">100</span><span class="o">%</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div>
</div>
</div>
</body>
</html>