mermaid

<!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="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> </div> <div class="dark-box"> <div class="lang-selector"> <a href="#" data-language-name="shell">shell</a> <a href="#" data-language-name="ruby">ruby</a> <a href="#" data-language-name="python">python</a> </div> </div> </div> </body> </html>