mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
297 lines
15 KiB
HTML
297 lines
15 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
|
|
<title>mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown.</title>
|
||
|
|
<link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
|
||
|
|
|
||
|
|
<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"]);
|
||
|
|
});
|
||
|
|
var callback = function(){
|
||
|
|
alert('A callback was triggered');
|
||
|
|
}
|
||
|
|
</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">
|
||
|
|
<div style="margin-left:5px;">
|
||
|
|
<a href="https://github.com/knsv/mermaid" class="github-button" >Star</a>
|
||
|
|
<a href="https://github.com/knsv/mermaid" class="github-button">Fork</a>
|
||
|
|
<a href="https://github.com/knsv/mermaid/archive/master.zip" class="github-button">Download</a>
|
||
|
|
</div>
|
||
|
|
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
|
||
|
|
<li><a href='http://github.com/tripit/slate' style="color:grey">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="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>-.-></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="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><script>
|
||
|
|
var callback = function(){
|
||
|
|
alert('A callback was triggered');
|
||
|
|
}
|
||
|
|
<script></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>
|
||
|
|
|
||
|
|
</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>
|