mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.
891 lines (766 loc) • 56.6 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>mermaidAPI.js</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/src/mermaidAPI.js", 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="#mermaidAPI.js">mermaidAPI.js</a>
</div>
<div class="heading h2">
<a href="#Configurations for diagram generation">Configurations for diagram generation</a>
</div>
<div class="heading h1">
<a href="#parse">parse</a>
</div>
<div class="heading h1">
<a href="#version">version</a>
</div>
<div class="heading h1">
<a href="#render">render</a>
</div>
<div class="heading h2">
<a href="#flowchart">flowchart</a>
</div>
<div class="heading h2">
<a href="#sequenceDiagram">sequenceDiagram</a>
</div>
<div class="heading h2">
<a href="#gantt">gantt</a>
</div>
</div>
</div>
<div id="sidebar-toggle"></div>
<div id="container"><div class="background highlight"></div>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="docs">
<div class="pilwrap" id="mermaidAPI.js">
<h1>
<a href="#mermaidAPI.js" name="mermaidAPI.js" class="pilcrow">¶</a>mermaidAPI.js
</h1>
</div>
</td>
<td class="code highlight"></td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-1" id="section-1">¶</a>
</div>
<div class="dox">
<div class="summary"><p>This is the api to be used when handling the integration with the web page instead of using the default integration
(mermaid.js).</p>
</div>
<div class="body"><p>The core of this api is the <strong>render</strong> function that given a graph definitionas text renders the graph/diagram and
returns a svg element for the graph. It is is then up to the user of the API to make use of the svg, either insert it
somewhere in the page or something completely different.</p>
</div>
</div>
</td>
<td class="code highlight"><div class="highlight"><pre><span class="kd">var</span> <span class="nx">graph</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./diagrams/flowchart/graphDb'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">flow</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./diagrams/flowchart/parser/flow'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">utils</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./utils'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">flowRenderer</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./diagrams/flowchart/flowRenderer'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">seq</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./diagrams/sequenceDiagram/sequenceRenderer'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">info</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./diagrams/example/exampleRenderer'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">infoParser</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./diagrams/example/parser/example'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">flowParser</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./diagrams/flowchart/parser/flow'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">dotParser</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./diagrams/flowchart/parser/dot'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">sequenceParser</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./diagrams/sequenceDiagram/parser/sequenceDiagram'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">sequenceDb</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./diagrams/sequenceDiagram/sequenceDb'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">infoDb</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./diagrams/example/exampleDb'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">gantt</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./diagrams/gantt/ganttRenderer'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">ganttParser</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./diagrams/gantt/parser/gantt'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">ganttDb</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./diagrams/gantt/ganttDb'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">d3</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./d3'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">nextId</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">log</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./logger'</span><span class="p">).</span><span class="nx">create</span><span class="p">();</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs"><div class="dox">
<div class="summary"><div class="pilwrap" id="Configurations for diagram generation">
<h2>
<a href="#Configurations for diagram generation" name="Configurations for diagram generation" class="pilcrow">¶</a>
Configurations for diagram generation</h2>
</div>
<p>These are the default options which can be overridden with the initialization call as in the example below:</p>
<div class="highlight"><pre><code><span class="nx">mermaid</span><span class="p">.</span><span class="nx">initialize</span><span class="p">({</span>
<span class="nx">flowchart</span><span class="o">:</span><span class="p">{</span>
<span class="nx">htmlLabels</span><span class="o">:</span> <span class="kc">false</span>
<span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
</div>
<div class="body">
</div>
</div>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="kd">var</span> <span class="nx">config</span> <span class="o">=</span> <span class="p">{</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-3" id="section-3">¶</a>
</div>
<p><strong>cloneCssStyles</strong> - This options controls whether or not the css rules should be copied into the generated svg</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">cloneCssStyles</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-4" id="section-4">¶</a>
</div>
<p><strong>startOnLoad</strong> - This options controls whether or mermaid starts when the page loads</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">startOnLoad</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs"><div class="pilwrap" id="flowchart">
<h2>
<a href="#flowchart" name="flowchart" class="pilcrow">¶</a>
flowchart</h2>
</div>
<p><em>The object containing configurations specific for flowcharts</em></p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">flowchart</span><span class="o">:</span><span class="p">{</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-6" id="section-6">¶</a>
</div>
<p><strong>htmlLabels</strong> - Flag for setting whether or not a html tag should be used for rendering labels
on the edges</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">htmlLabels</span><span class="o">:</span><span class="kc">true</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-7" id="section-7">¶</a>
</div>
<p><strong>useMaxWidth</strong> - Flag for setting whether or not a all available width should be used for
the diagram.</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">useMaxWidth</span><span class="o">:</span><span class="kc">true</span>
<span class="p">},</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs"><div class="pilwrap" id="sequenceDiagram">
<h2>
<a href="#sequenceDiagram" name="sequenceDiagram" class="pilcrow">¶</a>
sequenceDiagram</h2>
</div>
<p><em>The object containing configurations specific for sequence diagrams</em></p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">sequenceDiagram</span><span class="o">:</span><span class="p">{</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-9" id="section-9">¶</a>
</div>
<p><strong>diagramMarginX</strong> - margin to the right and left of the sequence diagram</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">diagramMarginX</span><span class="o">:</span><span class="mi">50</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-10" id="section-10">¶</a>
</div>
<p><strong>diagramMarginY</strong> - margin to the over and under the sequence diagram</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">diagramMarginY</span><span class="o">:</span><span class="mi">10</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-11" id="section-11">¶</a>
</div>
<p><strong>actorMargin</strong> - Margin between actors</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">actorMargin</span><span class="o">:</span><span class="mi">50</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-12" id="section-12">¶</a>
</div>
<p><strong>width</strong> - Width of actor moxes</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">width</span><span class="o">:</span><span class="mi">150</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-13" id="section-13">¶</a>
</div>
<p><strong>height</strong> - Height of actor boxes</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">height</span><span class="o">:</span><span class="mi">65</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-14" id="section-14">¶</a>
</div>
<p><strong>boxMargin</strong> - Margin around loop boxes</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">boxMargin</span><span class="o">:</span><span class="mi">10</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-15" id="section-15">¶</a>
</div>
<p><strong>boxTextMargin</strong> - margin around the text in loop/alt/opt boxes</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">boxTextMargin</span><span class="o">:</span><span class="mi">5</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-16" id="section-16">¶</a>
</div>
<p><strong>noteMargin</strong> - margin around notes</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">noteMargin</span><span class="o">:</span><span class="mi">10</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-17" id="section-17">¶</a>
</div>
<p><strong>messageMargin</strong> - Space between messages</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">messageMargin</span><span class="o">:</span><span class="mi">35</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-18" id="section-18">¶</a>
</div>
<p><strong>mirrorActors</strong> - mirror actors under diagram</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">mirrorActors</span><span class="o">:</span><span class="kc">true</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-19" id="section-19">¶</a>
</div>
<p><strong>bottomMarginAdj</strong> - Depending on css styling this might need adjustment
Prolongs the edge of the diagram downwards</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">bottomMarginAdj</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-20" id="section-20">¶</a>
</div>
<p><strong>useMaxWidth</strong> - when this flag is set the height and width is set to 100% and is then scaling with the
available space if not the absolute space required is used</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">useMaxWidth</span><span class="o">:</span><span class="kc">true</span>
<span class="p">},</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs"><div class="pilwrap" id="gantt">
<h2>
<a href="#gantt" name="gantt" class="pilcrow">¶</a>
gantt</h2>
</div>
<p><em>The object containing configurations specific for gantt diagrams</em></p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">gantt</span><span class="o">:</span><span class="p">{</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-22" id="section-22">¶</a>
</div>
<p><strong>titleTopMargin</strong> - margin top for the text over the gantt diagram</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">titleTopMargin</span><span class="o">:</span> <span class="mi">25</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-23" id="section-23">¶</a>
</div>
<p><strong>barHeight</strong> - the height of the bars in the graph</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">barHeight</span><span class="o">:</span> <span class="mi">20</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-24" id="section-24">¶</a>
</div>
<p><strong>barGap</strong> - the margin between the different activities in the gantt diagram</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">barGap</span><span class="o">:</span> <span class="mi">4</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-25" id="section-25">¶</a>
</div>
<p><strong>topPadding</strong> - margin between title and gantt diagram and between axis and gantt diagram.</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">topPadding</span><span class="o">:</span> <span class="mi">50</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-26" id="section-26">¶</a>
</div>
<p><strong>sidePadding</strong> - the space allocated for the section name to the left of the activities.</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">sidePadding</span><span class="o">:</span> <span class="mi">75</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-27" id="section-27">¶</a>
</div>
<p><strong>gridLineStartPadding</strong> - Vertical starting position of the grid lines</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">gridLineStartPadding</span><span class="o">:</span> <span class="mi">35</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-28" id="section-28">¶</a>
</div>
<p><strong>fontSize</strong> - font size ...</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">fontSize</span><span class="o">:</span> <span class="mi">11</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-29" id="section-29">¶</a>
</div>
<p><strong>fontFamily</strong> - font family ...</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">fontFamily</span><span class="o">:</span> <span class="s1">'"Open-Sans", "sans-serif"'</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-30" id="section-30">¶</a>
</div>
<p><strong>numberSectionStyles</strong> - the number of alternating section styles</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">numberSectionStyles</span><span class="o">:</span><span class="mi">3</span><span class="p">,</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-31" id="section-31">¶</a>
</div>
<p><strong>axisFormatter</strong> - formatting of the axis, this might need adjustment to match your locale and preferences</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">axisFormatter</span><span class="o">:</span> <span class="p">[</span>
<span class="cm">/*! Within a day*/</span>
<span class="p">[</span><span class="s2">"%I:%M"</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">();</span>
<span class="p">}],</span>
<span class="cm">/*! Monday a week*/</span>
<span class="p">[</span><span class="s2">"w. %U"</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getDay</span><span class="p">()</span> <span class="o">==</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}],</span>
<span class="cm">/*! Day within a week (not monday) */</span>
<span class="p">[</span><span class="s2">"%a %d"</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getDay</span><span class="p">()</span> <span class="o">&&</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getDate</span><span class="p">()</span> <span class="o">!=</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}],</span>
<span class="cm">/*! within a month */</span>
<span class="p">[</span><span class="s2">"%b %d"</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getDate</span><span class="p">()</span> <span class="o">!=</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}],</span>
<span class="cm">/*! Month */</span>
<span class="p">[</span><span class="s2">"%m-%y"</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">();</span>
<span class="p">}]</span>
<span class="p">]</span>
<span class="p">}</span>
<span class="p">};</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs"><div class="dox">
<div class="summary"><div class="pilwrap" id="parse">
<h1>
<a href="#parse" name="parse" class="pilcrow">¶</a>
parse</h1>
</div>
<p>Function that parses a mermaid diagram defintion. If parsing fails the parseError callback is called and an error is
thrown and</p>
</div>
<div class="body">
</div>
<div class="details">
<div class="dox_tag_title">Params</div>
<div class="dox_tag_detail">
<span class="dox_tag_name">text
</span>
</div>
</div>
</div>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="kd">var</span> <span class="nx">parse</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">text</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">graphType</span> <span class="o">=</span> <span class="nx">utils</span><span class="p">.</span><span class="nx">detectType</span><span class="p">(</span><span class="nx">text</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">parser</span><span class="p">;</span>
<span class="k">switch</span><span class="p">(</span><span class="nx">graphType</span><span class="p">){</span>
<span class="k">case</span> <span class="s1">'graph'</span><span class="o">:</span>
<span class="nx">parser</span> <span class="o">=</span> <span class="nx">flowParser</span><span class="p">;</span>
<span class="nx">parser</span><span class="p">.</span><span class="nx">parser</span><span class="p">.</span><span class="nx">yy</span> <span class="o">=</span> <span class="nx">graph</span><span class="p">;</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s1">'dotGraph'</span><span class="o">:</span>
<span class="nx">parser</span> <span class="o">=</span> <span class="nx">dotParser</span><span class="p">;</span>
<span class="nx">parser</span><span class="p">.</span><span class="nx">parser</span><span class="p">.</span><span class="nx">yy</span> <span class="o">=</span> <span class="nx">graph</span><span class="p">;</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s1">'sequenceDiagram'</span><span class="o">:</span>
<span class="nx">parser</span> <span class="o">=</span> <span class="nx">sequenceParser</span><span class="p">;</span>
<span class="nx">parser</span><span class="p">.</span><span class="nx">parser</span><span class="p">.</span><span class="nx">yy</span> <span class="o">=</span> <span class="nx">sequenceDb</span><span class="p">;</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s1">'info'</span><span class="o">:</span>
<span class="nx">parser</span> <span class="o">=</span> <span class="nx">infoParser</span><span class="p">;</span>
<span class="nx">parser</span><span class="p">.</span><span class="nx">parser</span><span class="p">.</span><span class="nx">yy</span> <span class="o">=</span> <span class="nx">infoDb</span><span class="p">;</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s1">'gantt'</span><span class="o">:</span>
<span class="nx">parser</span> <span class="o">=</span> <span class="nx">ganttParser</span><span class="p">;</span>
<span class="nx">parser</span><span class="p">.</span><span class="nx">parser</span><span class="p">.</span><span class="nx">yy</span> <span class="o">=</span> <span class="nx">ganttDb</span><span class="p">;</span>
<span class="k">break</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">try</span><span class="p">{</span>
<span class="nx">parser</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">text</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">catch</span><span class="p">(</span><span class="nx">err</span><span class="p">){</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="nx">exports</span><span class="p">.</span><span class="nx">parse</span> <span class="o">=</span> <span class="nx">parse</span><span class="p">;</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs"><div class="dox">
<div class="summary"><div class="pilwrap" id="version">
<h1>
<a href="#version" name="version" class="pilcrow">¶</a>
version</h1>
</div>
<p>Function returning version information</p>
</div>
<div class="body">
</div>
<div class="details">
<div class="dox_tag_title">Returns</div>
<div class="dox_tag_detail">
<span class="dox_tag_name"></span>
<span class="dox_type">string</span>
<span>A string containing the version info
</span>
</div>
</div>
</div>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">exports</span><span class="p">.</span><span class="nx">version</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
<span class="k">return</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'../package.json'</span><span class="p">).</span><span class="nx">version</span><span class="p">;</span>
<span class="p">};</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs"><div class="dox">
<div class="summary"><div class="pilwrap" id="render">
<h1>
<a href="#render" name="render" class="pilcrow">¶</a>
render</h1>
</div>
<p>Function that renders an svg with a graph from a chart definition. Usage example below.</p>
</div>
<div class="body">
<div class="highlight"><pre><code><span class="nx">mermaidAPI</span><span class="p">.</span><span class="nx">initialize</span><span class="p">({</span>
<span class="nx">startOnLoad</span><span class="o">:</span><span class="kc">true</span>
<span class="p">});</span>
<span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
<span class="kd">var</span> <span class="nx">graphDefinition</span> <span class="o">=</span> <span class="s1">'graph TB\na--b'</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">cb</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">svgGraph</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">svgGraph</span><span class="p">);</span>
<span class="p">};</span>
<span class="nx">mermaidAPI</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">'id1'</span><span class="p">,</span><span class="nx">graphDefinition</span><span class="p">,</span><span class="nx">cb</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div>
</div>
<div class="details">
<div class="dox_tag_title">Params</div>
<div class="dox_tag_detail">
<span class="dox_tag_name">id</span>
<span>the id of the element to be rendered
</span>
</div>
<div class="dox_tag_detail">
<span class="dox_tag_name">txt</span>
<span>the graph definition
</span>
</div>
<div class="dox_tag_detail">
<span class="dox_tag_name">cb</span>
<span>callback which is called after rendering is finished with the svg code as inparam.
</span>
</div>
<div class="dox_tag_detail">
<span class="dox_tag_name">container</span>
<span>selector to element in which a div with the graph temporarily will be inserted. In one is
provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
completed.
</span>
</div>
</div>
</div>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="kd">var</span> <span class="nx">render</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span> <span class="nx">txt</span><span class="p">,</span> <span class="nx">cb</span><span class="p">,</span> <span class="nx">container</span><span class="p">){</span>
<span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">container</span> <span class="o">!==</span> <span class="s1">'undefined'</span><span class="p">){</span>
<span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="nx">container</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s1">'div'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'id'</span><span class="p">,</span> <span class="s1">'d'</span><span class="o">+</span><span class="nx">id</span><span class="p">)</span>
<span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">'svg'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'id'</span><span class="p">,</span> <span class="nx">id</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'width'</span><span class="p">,</span><span class="s1">'100%'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'xmlns'</span><span class="p">,</span><span class="s1">'http://www.w3.org/2000/svg'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">'g'</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span><span class="p">{</span>
<span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s1">'body'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s1">'div'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'id'</span><span class="p">,</span> <span class="s1">'d'</span><span class="o">+</span><span class="nx">id</span><span class="p">)</span>
<span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">'svg'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'id'</span><span class="p">,</span> <span class="nx">id</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'width'</span><span class="p">,</span><span class="s1">'100%'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'xmlns'</span><span class="p">,</span><span class="s1">'http://www.w3.org/2000/svg'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">'g'</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s1">'#d'</span><span class="o">+</span><span class="nx">id</span><span class="p">).</span><span class="nx">node</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">graphType</span> <span class="o">=</span> <span class="nx">utils</span><span class="p">.</span><span class="nx">detectType</span><span class="p">(</span><span class="nx">txt</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">classes</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">switch</span><span class="p">(</span><span class="nx">graphType</span><span class="p">){</span>
<span class="k">case</span> <span class="s1">'graph'</span><span class="o">:</span>
<span class="nx">flowRenderer</span><span class="p">.</span><span class="nx">setConf</span><span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">flowchart</span><span class="p">);</span>
<span class="nx">flowRenderer</span><span class="p">.</span><span class="nx">draw</span><span class="p">(</span><span class="nx">txt</span><span class="p">,</span> <span class="nx">id</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
<span class="k">if</span><span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">cloneCssStyles</span><span class="p">){</span>
<span class="nx">classes</span> <span class="o">=</span> <span class="nx">flowRenderer</span><span class="p">.</span><span class="nx">getClasses</span><span class="p">(</span><span class="nx">txt</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
<span class="nx">utils</span><span class="p">.</span><span class="nx">cloneCssStyles</span><span class="p">(</span><span class="nx">element</span><span class="p">.</span><span class="nx">firstChild</span><span class="p">,</span> <span class="nx">classes</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">graph</span><span class="p">.</span><span class="nx">bindFunctions</span><span class="p">();</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s1">'dotGraph'</span><span class="o">:</span>
<span class="nx">flowRenderer</span><span class="p">.</span><span class="nx">setConf</span><span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">flowchart</span><span class="p">);</span>
<span class="nx">flowRenderer</span><span class="p">.</span><span class="nx">draw</span><span class="p">(</span><span class="nx">txt</span><span class="p">,</span> <span class="nx">id</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
<span class="k">if</span><span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">cloneCssStyles</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">classes</span> <span class="o">=</span> <span class="nx">flowRenderer</span><span class="p">.</span><span class="nx">getClasses</span><span class="p">(</span><span class="nx">txt</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
<span class="nx">utils</span><span class="p">.</span><span class="nx">cloneCssStyles</span><span class="p">(</span><span class="nx">element</span><span class="p">.</span><span class="nx">firstChild</span><span class="p">,</span> <span class="nx">classes</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s1">'sequenceDiagram'</span><span class="o">:</span>
<span class="nx">seq</span><span class="p">.</span><span class="nx">setConf</span><span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">sequenceDiagram</span><span class="p">);</span>
<span class="nx">seq</span><span class="p">.</span><span class="nx">draw</span><span class="p">(</span><span class="nx">txt</span><span class="p">,</span><span class="nx">id</span><span class="p">);</span>
<span class="k">if</span><span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">cloneCssStyles</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">utils</span><span class="p">.</span><span class="nx">cloneCssStyles</span><span class="p">(</span><span class="nx">element</span><span class="p">.</span><span class="nx">firstChild</span><span class="p">,</span> <span class="p">[]);</span>
<span class="p">}</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s1">'gantt'</span><span class="o">:</span>
<span class="nx">gantt</span><span class="p">.</span><span class="nx">setConf</span><span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">gantt</span><span class="p">);</span>
<span class="nx">gantt</span><span class="p">.</span><span class="nx">draw</span><span class="p">(</span><span class="nx">txt</span><span class="p">,</span><span class="nx">id</span><span class="p">);</span>
<span class="k">if</span><span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">cloneCssStyles</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">utils</span><span class="p">.</span><span class="nx">cloneCssStyles</span><span class="p">(</span><span class="nx">element</span><span class="p">.</span><span class="nx">firstChild</span><span class="p">,</span> <span class="p">[]);</span>
<span class="p">}</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s1">'info'</span><span class="o">:</span>
<span class="nx">info</span><span class="p">.</span><span class="nx">draw</span><span class="p">(</span><span class="nx">txt</span><span class="p">,</span><span class="nx">id</span><span class="p">,</span><span class="nx">exports</span><span class="p">.</span><span class="nx">version</span><span class="p">());</span>
<span class="k">if</span><span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">cloneCssStyles</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">utils</span><span class="p">.</span><span class="nx">cloneCssStyles</span><span class="p">(</span><span class="nx">element</span><span class="p">.</span><span class="nx">firstChild</span><span class="p">,</span> <span class="p">[]);</span>
<span class="p">}</span>
<span class="k">break</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">cb</span> <span class="o">!==</span> <span class="s1">'undefined'</span><span class="p">){</span>
<span class="nx">cb</span><span class="p">(</span><span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s1">'#d'</span><span class="o">+</span><span class="nx">id</span><span class="p">).</span><span class="nx">node</span><span class="p">().</span><span class="nx">innerHTML</span><span class="p">,</span><span class="nx">graph</span><span class="p">.</span><span class="nx">bindFunctions</span><span class="p">);</span>
<span class="p">}</span><span class="k">else</span><span class="p">{</span>
<span class="nx">log</span><span class="p">.</span><span class="nx">warn</span><span class="p">(</span><span class="s1">'CB = undefined'</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s1">'#d'</span><span class="o">+</span><span class="nx">id</span><span class="p">).</span><span class="nx">node</span><span class="p">();</span>
<span class="k">if</span><span class="p">(</span><span class="nx">node</span> <span class="o">!==</span> <span class="kc">null</span> <span class="o">&&</span> <span class="k">typeof</span> <span class="nx">node</span><span class="p">.</span><span class="nx">remove</span> <span class="o">===</span> <span class="s1">'function'</span><span class="p">){</span>
<span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s1">'#d'</span><span class="o">+</span><span class="nx">id</span><span class="p">).</span><span class="nx">node</span><span class="p">().</span><span class="nx">remove</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="nx">exports</span><span class="p">.</span><span class="nx">render</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span> <span class="nx">text</span><span class="p">,</span> <span class="nx">cb</span><span class="p">,</span> <span class="nx">containerElement</span><span class="p">){</span>
<span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nb">document</span> <span class="o">===</span> <span class="s1">'undefined'</span><span class="p">){</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-35" id="section-35">¶</a>
</div>
<p>Todo handle rendering serverside using phantomjs</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="p">}</span>
<span class="k">else</span><span class="p">{</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-36" id="section-36">¶</a>
</div>
<p>In browser</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="nx">render</span><span class="p">(</span> <span class="nx">id</span><span class="p">,</span> <span class="nx">text</span><span class="p">,</span> <span class="nx">cb</span><span class="p">,</span> <span class="nx">containerElement</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">setConf</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">cnf</span><span class="p">){</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-37" id="section-37">¶</a>
</div>
<p>Top level initially mermaid, gflow, sequenceDiagram and gantt</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="kd">var</span> <span class="nx">lvl1Keys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">cnf</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">i</span><span class="p">;</span>
<span class="k">for</span><span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="nx">lvl1Keys</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
<span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">cnf</span><span class="p">[</span><span class="nx">lvl1Keys</span><span class="p">[</span><span class="nx">i</span><span class="p">]]</span> <span class="o">===</span> <span class="s1">'object'</span> <span class="p">){</span>
<span class="kd">var</span> <span class="nx">lvl2Keys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">cnf</span><span class="p">[</span><span class="nx">lvl1Keys</span><span class="p">[</span><span class="nx">i</span><span class="p">]]);</span>
<span class="kd">var</span> <span class="nx">j</span><span class="p">;</span>
<span class="k">for</span><span class="p">(</span><span class="nx">j</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">j</span><span class="o"><</span><span class="nx">lvl2Keys</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">j</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="