mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
250 lines
12 KiB
HTML
250 lines
12 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta http-equiv="cache-control" content="no-cache"/>
|
|
<meta http-equiv="pragma" content="no-cache"/>
|
|
<meta name='viewport' content='width=device-width' />
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="Content-Type" content="application/javascript; charset=utf-8" />
|
|
<meta name="url" content="">
|
|
<meta name="alias" content="">
|
|
<meta name="copyright" content="" >
|
|
<meta name="language" content="English">
|
|
<meta name="keywords" content="">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="shortcut icon" href="../app/img/favicon.ico">
|
|
<link rel="stylesheet" href="css/editor.css"/>
|
|
<title>
|
|
Mermaid editor
|
|
</title>
|
|
<script src="build.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="header">
|
|
<div class="header-title">mermaid</div>
|
|
</div>
|
|
<div class="page">
|
|
|
|
<div class="column">
|
|
|
|
|
|
<article>
|
|
|
|
<p>Generation of diagrams and flowcharts from text in a similar manner as markdown.</p>
|
|
|
|
<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.</p>
|
|
|
|
<h1>
|
|
<a class="" href="#syntax" ><span class=""></span></a>Syntax</h1>
|
|
|
|
<h2>
|
|
<a class="" href="#graph" ><span class=""></span></a>Graph</h2>
|
|
|
|
<p>This statement declares a new graph and the direction of the graph layout.</p>
|
|
|
|
<pre><code>graph TD
|
|
</code></pre>
|
|
|
|
<p>This declares a graph oriented from top to bottom.</p>
|
|
|
|
<p><a href="https://camo.githubusercontent.com/7e1f611d586e9e9701adb3d128306d89bee5cb86/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578332e706e67" target="_blank"><img src="https://camo.githubusercontent.com/7e1f611d586e9e9701adb3d128306d89bee5cb86/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578332e706e67" alt="Example 3" data-canonical-src="http://www.sveido.com/mermaid/img/ex3.png" style="max-width:100%;"></a></p>
|
|
|
|
<pre><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>LR - left right</li>
|
|
<li>TD - same as TB</li>
|
|
</ul>
|
|
|
|
<p><a href="https://camo.githubusercontent.com/df275fa5422db840b2804d2310a099ed84f63e17/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578342e706e67" target="_blank"><img src="https://camo.githubusercontent.com/df275fa5422db840b2804d2310a099ed84f63e17/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578342e706e67" alt="Example 4" data-canonical-src="http://www.sveido.com/mermaid/img/ex4.png" style="max-width:100%;"></a></p>
|
|
|
|
<h2>
|
|
<a class="" href="#nodes" ><span class=""></span></a>Nodes</h2>
|
|
|
|
<h3>
|
|
<a class="" href="#a-node-default" ><span class=""></span></a>A node (default)</h3>
|
|
|
|
<pre><code>id1;
|
|
</code></pre>
|
|
|
|
<p><a href="https://camo.githubusercontent.com/a92bd6dbda75eae56d4157b45bfbd833dff61043/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578352e706e67" target="_blank"><img src="https://camo.githubusercontent.com/a92bd6dbda75eae56d4157b45bfbd833dff61043/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578352e706e67" alt="Single node" data-canonical-src="http://www.sveido.com/mermaid/img/ex5.png" style="max-width:100%;"></a></p>
|
|
|
|
<p>Note that the id is what is displayed in the box.</p>
|
|
|
|
<h3>
|
|
<a id="user-content-a-node-with-text" class="" href="#a-node-with-text" ><span class=""></span></a>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
|
|
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>
|
|
|
|
<pre><code>id1[This is the text in the box];
|
|
</code></pre>
|
|
|
|
<p><a href="https://camo.githubusercontent.com/98439dc8af26da18e98ec00ca317bbdc61f6e32e/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578362e706e67" target="_blank"><img src="https://camo.githubusercontent.com/98439dc8af26da18e98ec00ca317bbdc61f6e32e/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578362e706e67" alt="Text in node" data-canonical-src="http://www.sveido.com/mermaid/img/ex6.png" style="max-width:100%;"></a></p>
|
|
|
|
<h3>
|
|
<a id="user-content-a-node-with-round-edges" class="" href="#a-node-with-round-edges" ><span class=""></span></a>A node with round edges</h3>
|
|
|
|
<pre><code>id1(This is the text in the box);
|
|
</code></pre>
|
|
|
|
<p><a href="https://camo.githubusercontent.com/bef3546487dac334848d27e58cb2ba6825538d28/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578372e706e67" target="_blank"><img src="https://camo.githubusercontent.com/bef3546487dac334848d27e58cb2ba6825538d28/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578372e706e67" alt="Node with round edges" data-canonical-src="http://www.sveido.com/mermaid/img/ex7.png" style="max-width:100%;"></a></p>
|
|
|
|
<h3>
|
|
<a id="user-content-a-node-in-the-form-of-a-circle" class="" href="#a-node-in-the-form-of-a-circle" ><span class=""></span></a>A node in the form of a circle</h3>
|
|
|
|
<pre><code>id1((This is the text in the box));
|
|
</code></pre>
|
|
|
|
|
|
|
|
<h3>
|
|
<a id="user-content-a-node-in-an-asymetric-shape" class="" href="#a-node-in-an-asymetric-shape" ><span class=""></span></a>A node in an asymetric shape</h3>
|
|
|
|
<pre><code>id1>This is the text in the box];
|
|
</code></pre>
|
|
|
|
|
|
|
|
<h3>
|
|
<a class="" href="#a-node-rhombus" ><span class=""></span></a>A node (rhombus)</h3>
|
|
|
|
<pre><code>id1{This is the text in the box};
|
|
</code></pre>
|
|
|
|
|
|
|
|
<h3>
|
|
<a class="" href="#styling-a-node" ><span class=""></span></a>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><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>
|
|
|
|
|
|
<h4>
|
|
<a class="" href="#classes" ><span class=""></span></a>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
|
|
should have a different look.</p>
|
|
|
|
<p>a class definition looks like the example below:</p>
|
|
|
|
<pre><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><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><code> class nodeId1,nodeId2 className;
|
|
</code></pre>
|
|
|
|
<h4>
|
|
<a class="" href="#default-class" ><span class=""></span></a>Default class</h4>
|
|
|
|
<p>If a class is named default it will be assigned to all classes without specific class definitions.</p>
|
|
|
|
<pre><code> classDef default fill:#f9f,stroke:#333,stroke-width:4px;
|
|
</code></pre>
|
|
|
|
<h2>
|
|
<a class="" href="#links-between-nodes" ><span class=""></span></a>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>
|
|
<a id="user-content-a-link-with-arrow-head" class="" href="#a-link-with-arrow-head" ><span class=""></span></a>A link with arrow head</h3>
|
|
|
|
<pre><code>A-->B;
|
|
</code></pre>
|
|
|
|
<p><a href="https://camo.githubusercontent.com/df275fa5422db840b2804d2310a099ed84f63e17/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578342e706e67" target="_blank"><img src="https://camo.githubusercontent.com/df275fa5422db840b2804d2310a099ed84f63e17/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578342e706e67" alt="Link with arrowhead" data-canonical-src="http://www.sveido.com/mermaid/img/ex4.png" style="max-width:100%;"></a></p>
|
|
|
|
<h3>
|
|
<a class="" href="#an-open-link" ><span class=""></span></a>An open link</h3>
|
|
|
|
<pre><code>A---B;
|
|
</code></pre>
|
|
|
|
<p><a href="https://camo.githubusercontent.com/6764ce0520fe98f884c178fd46c754e1df3910e0/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f657831302e706e67" target="_blank"><img src="https://camo.githubusercontent.com/6764ce0520fe98f884c178fd46c754e1df3910e0/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f657831302e706e67" alt="Open link" data-canonical-src="http://www.sveido.com/mermaid/img/ex10.png" style="max-width:100%;"></a></p>
|
|
|
|
<h3>
|
|
<a id="user-content-text-on-links" class="" href="#text-on-links" ><span class=""></span></a>Text on links</h3>
|
|
|
|
<pre><code>A---|This is the text|B;
|
|
</code></pre>
|
|
|
|
<p><a href="https://camo.githubusercontent.com/2e92c4ce87b3aacf1ebfb4123dedf0697bb4e388/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f657831312e706e67" target="_blank"><img src="https://camo.githubusercontent.com/2e92c4ce87b3aacf1ebfb4123dedf0697bb4e388/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f657831312e706e67" alt="Text on links" data-canonical-src="http://www.sveido.com/mermaid/img/ex11.png" style="max-width:100%;"></a></p>
|
|
|
|
<h3>
|
|
<a id="user-content-styling-links" class="" href="#styling-links" ><span class=""></span></a>Styling links</h3>
|
|
|
|
<p>It is possible to style links for instance a link that is going back in the flow. This is done by the linkStyle statement as in the example below:</p>
|
|
|
|
<pre><code>linkStyle 3 stroke:#ff3,stroke-width:4px;
|
|
</code></pre>
|
|
|
|
<h2>
|
|
<a id="user-content-interaction" class="" href="#interaction" ><span class=""></span></a>Interaction</h2>
|
|
|
|
<p>It is possible to bind a click event to a node:</p>
|
|
|
|
<pre><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>
|
|
|
|
<h1>
|
|
<a id="user-content-credits" class="" href="#credits" ><span class=""></span></a>Credits</h1>
|
|
|
|
<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 the graphical layout and drawing libraries!</p>
|
|
</article>
|
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="group">
|
|
|
|
<textarea class="editor">
|
|
graph TD;
|
|
A-->B;
|
|
A-->C;
|
|
B-->D;
|
|
C-->D;
|
|
</textarea>
|
|
<button class="button">Generate</button>
|
|
|
|
</div>
|
|
|
|
<div class="group mermaid">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |