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"]); }); 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"> <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="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 <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="further-reading">Further reading</h2> <ul> <li><a href="http://knsv.github.io/mermaid/index.html#usage">Usage</a></li> <li><a href="http://knsv.github.io/mermaid/index.html#flowcharts-basic-syntax">Flowchart syntax</a></li> <li><a href="http://knsv.github.io/mermaid/index.html#sequence-diagrams">Sequence diagram syntax</a></li> <li><a href="http://knsv.github.io/mermaid/index.html#gant-diagrams">Gantt chart syntax</a></li> <li><a href="http://knsv.github.io/mermaid/index.html#flowcharts-basic-syntax">Mermaid client</a></li> <li><a href="http://knsv.github.io/mermaid/live_editor">Editor</a></li> </ul> <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> </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>