mermaid

<!DOCTYPE html> <html> <head> <title>gantt.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/gantt.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="#Gant diagrams">Gant diagrams</a> </div> <div class="heading h1"> <a href="#Syntax">Syntax</a> </div> <div class="heading h3"> <a href="#title">title</a> </div> <div class="heading h2"> <a href="#Sections statements">Sections statements</a> </div> <div class="heading h2"> <a href="#Setting dates">Setting dates</a> </div> <div class="heading h3"> <a href="#Date format">Date format</a> </div> <div class="heading h4"> <a href="#Diagram definition">Diagram definition</a> </div> <div class="heading h4"> <a href="#Scale">Scale</a> </div> <div class="heading h2"> <a href="#Styling">Styling</a> </div> <div class="heading h3"> <a href="#Classes used">Classes used</a> </div> <div class="heading h3"> <a href="#Sample stylesheet">Sample stylesheet</a> </div> <div class="heading h2"> <a href="#Configuration">Configuration</a> </div> <div class="heading h3"> <a href="#Possible configration params:">Possible configration params:</a> </div> </div> </div> <div id="sidebar-toggle"></div> <div id="container"><div class="docs markdown"><div class="pilwrap" id="Gant diagrams"> <h1> <a href="#Gant diagrams" name="Gant diagrams" class="pilcrow">¶</a> Gant diagrams</h1> </div> <blockquote> A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project. </blockquote> Mermaid can render Gantt diagrams. The code snippet below: <div class="highlight"><pre><code>%% Example of sequence diagram gantt title A Gantt Diagram section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d anther task : 24d </code></pre></div> Renders the following diagram: <script>mermaid.initialize({startOnLoad:true});</script><div class="mermaid">gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d anther task : 24d</div><div class="pilwrap" id="Syntax"> <h1> <a href="#Syntax" name="Syntax" class="pilcrow">¶</a> Syntax</h1> </div> <div class="highlight"><pre><code>%% Example with slection of syntaxes 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 section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page : 20h Add another diagram to demo page : 48h </code></pre></div> Renders like below: <div class="mermaid">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 section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page : 20h Add another diagram to demo page : 48h</div><div class="pilwrap" id="title"> <h3> <a href="#title" name="title" class="pilcrow">¶</a> title</h3> </div> Tbd <div class="pilwrap" id="Sections statements"> <h2> <a href="#Sections statements" name="Sections statements" class="pilcrow">¶</a> Sections statements</h2> </div> Tbd <div class="pilwrap" id="Setting dates"> <h2> <a href="#Setting dates" name="Setting dates" class="pilcrow">¶</a> Setting dates</h2> </div> Tbd <div class="pilwrap" id="Date format"> <h3> <a href="#Date format" name="Date format" class="pilcrow">¶</a> Date format</h3> </div> Tbd <div class="pilwrap" id="Diagram definition"> <h4> <a href="#Diagram definition" name="Diagram definition" class="pilcrow">¶</a> Diagram definition</h4> </div> Input Example Description: <div class="highlight"><pre><code>YYYY 2014 4 digit year YY 14 2 digit year Q 1..4 Quarter of year. Sets month to first month in quarter. M MM 1..12 Month number MMM MMMM January..Dec Month name in locale set by moment.locale() D DD 1..31 Day of month Do 1st..31st Day of month with ordinal DDD DDDD 1..365 Day of year X 1410715640.579 Unix timestamp x 1410715640579 Unix ms timestamp Input Example Description H HH 0..23 24 hour time h hh 1..12 12 hour time used with a A. a A am pm Post or ante meridiem m mm 0..59 Minutes s ss 0..59 Seconds S 0..9 Tenths of a second SS 0..99 Hundreds of a second SSS 0..999 Thousandths of a second Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z </code></pre></div> More info in: <a href="http://momentjs.com/docs/#/parsing/string-format/">http://momentjs.com/docs/#/parsing/string-format/</a> <div class="pilwrap" id="Scale"> <h4> <a href="#Scale" name="Scale" class="pilcrow">¶</a> Scale</h4> </div> <div class="highlight"><pre><code>%a - abbreviated weekday name. %A - full weekday name. %b - abbreviated month name. %B - full month name. %c - date and time, as %a %b %e %H:%M:%S %Y. %d - zero-padded day of the month as a decimal number [01,31]. %e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d. %H - hour (24-hour clock) as a decimal number [00,23]. %I - hour (12-hour clock) as a decimal number [01,12]. %j - day of the year as a decimal number [001,366]. %m - month as a decimal number [01,12]. %M - minute as a decimal number [00,59]. %L - milliseconds as a decimal number [000, 999]. %p - either AM or PM. %S - second as a decimal number [00,61]. %U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53]. %w - weekday as a decimal number [0(Sunday),6]. %W - week number of the year (Monday as the first day of the week) as a decimal number [00,53]. %x - date, as %m/%d/%Y. %X - time, as %H:%M:%S. %y - year without century as a decimal number [00,99]. %Y - year with century as a decimal number. %Z - time zone offset, such as -0700. %% - a literal % character. </code></pre></div> More info in: <a href="https://github.com/mbostock/d3/wiki/Time-Formatting">https://github.com/mbostock/d3/wiki/Time-Formatting</a> <div class="pilwrap" id="Styling"> <h2> <a href="#Styling" name="Styling" class="pilcrow">¶</a> Styling</h2> </div> Styling of the a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the <div class="pilwrap" id="Classes used"> <h3> <a href="#Classes used" name="Classes used" class="pilcrow">¶</a> Classes used</h3> </div> <table> <thead> <tr> <th>Class</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>actor</td> <td>Style for the actor box at the top of the diagram.</td> </tr> <tr> <td>text.actor</td> <td>Styles for text in the actor box at the top of the diagram.</td> </tr> <tr> <td>actor-line</td> <td>The vertical line for an actor.</td> </tr> <tr> <td>messageLine0</td> <td>Styles for the solid message line.</td> </tr> <tr> <td>messageLine1</td> <td>Styles for the dotted message line.</td> </tr> <tr> <td>messageText</td> <td>Defines styles for the text on the message arrows.</td> </tr> <tr> <td>labelBox</td> <td>Defines styles label to left in a loop.</td> </tr> <tr> <td>labelText</td> <td>Styles for the text in label for loops.</td> </tr> <tr> <td>loopText</td> <td>Styles for the text in the loop box.</td> </tr> <tr> <td>loopLine</td> <td>Defines styles for the lines in the loop box.</td> </tr> <tr> <td>note</td> <td>Styles for the note box.</td> </tr> <tr> <td>noteText</td> <td>Styles for the text on in the note boxes.</td> </tr> </tbody> </table> <div class="pilwrap" id="Sample stylesheet"> <h3> <a href="#Sample stylesheet" name="Sample stylesheet" class="pilcrow">¶</a> Sample stylesheet</h3> </div> <div class="highlight"><pre><code> .grid .tick { stroke: lightgrey; opacity: 0.3; shape-rendering: crispEdges; } .grid path { stroke-width: 0; } #tag { color: white; background: #FA283D; width: 150px; position: absolute; display: none; padding:3px 6px; margin-left: -80px; font-size: 11px; } #tag:before { border: solid transparent; content: ' '; height: 0; left: 50%; margin-left: -5px; position: absolute; width: 0; border-width: 10px; border-bottom-color: #FA283D; top: -20px; } .taskText { fill:white; text-anchor:middle; } .taskTextOutsideRight { fill:black; text-anchor:start; } .taskTextOutsideLeft { fill:black; text-anchor:end; } </code></pre></div> <div class="pilwrap" id="Configuration"> <h2> <a href="#Configuration" name="Configuration" class="pilcrow">¶</a> Configuration</h2> </div> Is it possible to adjust the margins for rendering the sequence diagram. This is done by defining mermaid.sequenceConfig or by the CLI to use a json file with the configuration. How to use the CLI is described in the mermaidCLI page. mermaid.sequenceConfig can be set to a JSON string with config parameters or the corresponding object. <div class="highlight"><pre><code>mermaid.ganttConfig = { titleTopMargin:25, barHeight:20, barGap:4, topPadding:75, sidePadding:75 }; </code></pre></div> <div class="pilwrap" id="Possible configration params:"> <h3> <a href="#Possible configration params:" name="Possible configration params:" class="pilcrow">¶</a> Possible configration params:</h3> </div> <table> <thead> <tr> <th>Param</th> <th>Descriotion</th> <th>Default value</th> </tr> </thead> <tbody> <tr> <td>mirrorActor</td> <td>Turns on/off the rendering of actors below the diagram as well as above it</td> <td>false</td> </tr> <tr> <td>bottomMarginAdj</td> <td>Adjusts how far down the graph ended. Wide borders styles with css could generate unwantewd clipping which is why this config param exists.</td> <td>1</td> </tr> </tbody> </table> </div> </div> </body> </html>