mermaid

<!DOCTYPE html> <html> <head> <title>index.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/docs/index.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"> Files Headings </div> <div id="tree"></div> <div id="headings"> <div class="heading h1"> <a href="#mermaid">mermaid</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"> <h1> <a href="#mermaid" name="mermaid" class="pilcrow">¶</a> mermaid</h1> </div> <img src="../img/header.png" alt="Alt text"> Generation of diagrams and flowcharts from text in a similar manner as markdown. Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code? 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>. Code examples below: <div class="highlight"><pre><code>%% An example of a flowchart graph TD; A--B; A--C; B--D; C--D; </code></pre></div> <div class="highlight"><pre><code>%% An example of a sequence diagram 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></div> <div class="highlight"><pre><code>%% Example of a Gannt diagram 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></div> Play with mermaid using this <a href="http://danielmschmidt.github.io/mermaid-demo/">editor</a> or this <a href="live_editor">live editor</a>. You can also look at mermaid in action using <a href="http://jsbin.com/faxunexeku/1/edit?html,output">jsbin</a>. <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/gantt.html">Gantt chart 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/live_editor">Editor</a></li> </ul> <div class="pilwrap" id="Credits"> <h1> <a href="#Credits" name="Credits" class="pilcrow">¶</a> Credits</h1> </div> 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. Mermaid was created by Knut Sveidqvist for easier documentation. 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>. </div> </div> </body> </html>