mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.
112 lines (110 loc) • 5.23 kB
HTML
<html>
<head>
<title>README.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/README.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="#mermaid [](https://travis-ci.org/knsv/mermaid) [](https://codeclimate.com/github/knsv/mermaid)">mermaid <a href="https://travis-ci.org/knsv/mermaid"><img src="https://travis-ci.org/knsv/mermaid.svg?branch=master" alt="Build Status"></a> <a href="https://codeclimate.com/github/knsv/mermaid"><img src="https://codeclimate.com/github/knsv/mermaid/badges/gpa.svg" alt="Code Climate"></a></a>
</div>
<div class="heading h2">
<a href="#Further reading">Further reading</a>
</div>
<div class="heading h1">
<a href="#Credits">Credits</a>
</div>
</div>
</div>
<div id="sidebar-toggle"></div>
<div id="container"><div class="docs markdown"><div class="pilwrap" id="mermaid [](https://travis-ci.org/knsv/mermaid) [](https://codeclimate.com/github/knsv/mermaid)">
<h1>
<a href="#mermaid [](https://travis-ci.org/knsv/mermaid) [](https://codeclimate.com/github/knsv/mermaid)" name="mermaid [](https://travis-ci.org/knsv/mermaid) [](https://codeclimate.com/github/knsv/mermaid)" class="pilcrow">¶</a>
mermaid <a href="https://travis-ci.org/knsv/mermaid"><img src="https://travis-ci.org/knsv/mermaid.svg?branch=master" alt="Build Status"></a> <a href="https://codeclimate.com/github/knsv/mermaid"><img src="https://codeclimate.com/github/knsv/mermaid/badges/gpa.svg" alt="Code Climate"></a></h1>
</div>
<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>
<p>The code below would render the following image</p>
<table>
<tr><th>Code</th><th>Rendered diagram</th></tr>
<tr><td>
<pre>
<code>
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
<code>
</pre>
</td>
<td>
<img src='http://www.sveido.com/mermaid/img/ex1.png' alt='Example 1'>
</td>
</tr>
<tr>
<td>
<pre>
<code>
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
</code>
</pre>
</td>
<td>
<img src='http://www.sveido.com/mermaid/img/seq1.png' alt='Example 2'>
</td>
</tr>
</table>
<div class="pilwrap" id="Further reading">
<h2>
<a href="#Further reading" name="Further reading" class="pilcrow">¶</a>
Further reading</h2>
</div>
<ul>
<li><a href="http://knsv.github.io/mermaid/usage.html">Usage</a></li>
<li><a href="http://knsv.github.io/mermaid/flowchart.html">Flowchart syntax</a></li>
<li><a href="http://knsv.github.io/mermaid/sequenceDiagram.html">Sequence diagram syntax</a></li>
<li><a href="http://knsv.github.io/mermaid/mermaidCLI.html">Mermaid client</a></li>
<li><a href="http://knsv.github.io/mermaid/demos.html">Demos</a></li>
</ul>
<div class="pilwrap" id="Credits">
<h1>
<a href="#Credits" name="Credits" class="pilcrow">¶</a>
Credits</h1>
</div>
<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! Thanks also to the
<a href="http://bramp.github.io/js-sequence-diagrams">js-sequence-diagram</a> project for usage of the grammar for the
sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.</p>
<p><em>Mermaid was created by Knut Sveidqvist for easier documentation.</em></p>
<p>Knut has not done all work by him self, here is the full list of the projects <a href="https://github.com/knsv/mermaid/graphs/contributors">contributors</a>.</p>
</div>
</div>
</body>
</html>