mermaid/build/www/index.html

Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams and gantt charts.

<h1 id="mermaid">mermaid</h1>
<p><img src="images/header.png" alt="Alt text"></p>
<blockquote>
<p>Generation of diagrams and flowcharts from text in a similar manner as markdown.</p>
</blockquote>
<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. <a href="http://knsv.github.io/mermaid/live_editor">Try it using our editor</a>.</p>
<p>Code examples below:</p>
<h3 id="an-example-of-a-flowchart">An example of a flowchart</h3>
<pre class="css"><code>graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;</code></pre><h3 id="an-example-of-a-sequence-diagram">An example of a sequence diagram</h3>
<pre class="css"><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 &lt;br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!</code></pre><h3 id="example-code-for-a-gantt-diagram">Example code for a gantt diagram</h3>
<pre class="css"><code>gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d</code></pre><p>Play with mermaid using this <a href="http://danielmschmidt.github.io/mermaid-demo/">editor</a> or this <a href="live_editor">live editor</a>.</p>
<h2 id="credits">Credits</h2>
<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<br>the graphical layout and drawing libraries! Thanks also to the<br><a href="http://bramp.github.io/js-sequence-diagrams">js-sequence-diagram</a> project for usage of the grammar for the<br>sequence diagrams.</p>
<p><em>Mermaid was created by Knut Sveidqvist for easier documentation.</em></p>
<p>Knut has not done all work by himself, here is the full list of the projects <a href="https://github.com/knsv/mermaid/graphs/contributors">contributors</a>.</p>
<h1 id="downstream-projects">Downstream projects</h1>
<p>Mermaid is supported in a number of publishing systems and editors. Please report if a plugin/editor is missing from the list below:</p>
<ul>
<li>Support in LightPaper 1.2+. <a href="https://github.com/42Squares/LightPaper/blob/master/doc/Adding%20Mermaid%20Diagrams.md">Howto</a>. Discout with code MERMAID_25</li>
<li><a href="https://github.com/JozoVilcek/gitbook-plugin-mermaid">gitbook-plugin</a></li>
<li>light table</li>
<li><a href="https://marketplace.atlassian.com/plugins/org.anvard.atlassian.mermaid-plugin/server/overview">Confluence plugin</a></li>
<li><a href="http://nauvalatmaja.com/2015/01/13/rendering-mermaid-in-docpad/">Using mermaid via docpad</a></li>
<li><a href="https://rubygems.org/gems/jekyll-mermaid/versions/1.0.0">Using mermaid in Jekyll</a></li>
<li><a href="http://mostlyblather.com/blog/2015/05/23/mermaid-jekyll-octopress/">Using mermaid via Octopress</a></li>
<li><a href="http://pad.haroopress.com/user.html">Mardown editor Haroopad</a></li>
<li><a href="https://atom.io/packages/atom-mermaid">Plugin for atom</a></li>
<li><a href="http://mdp.tylingsoft.com/">Markdown Plus</a></li>
<li><a href="https://github.com/kannokanno/previm">Vim Plugin</a></li>
<li><a href="https://github.com/mgaitan/sphinxcontrib-mermaid">Sphinx extension</a></li>
<li><a href="https://github.com/raghur/mermaid-filter">Pandoc filter</a></li>
<li><a href="https://github.com/sinedied/hads">hads</a></li>
</ul>
<h1 id="online-live-editor">Online live editor</h1>
<p>An editor is available for creating diagrams. With it you can quickly start writing mermaid diagrams. It is possible to:</p>
<ul>
<li>save the result as a svg</li>
<li>get a link to a viewer of the diagram</li>
<li><p>get a link to edit of the diagram to share a diagram so that someone else can tweak it and send a new link back</p>
</li>
<li><p><a href="http://knsv.github.io/mermaid/live_editor">Editor</a></p>
</li>
</ul>