UNPKG

mermaid

Version:

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

github.com/knsv/mermaid

knsv/mermaid

721 lines • 53.4 kB
<!DOCTYPE html>
<html>
<head>
  <title>main.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/main.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="#main.js">main.js</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="main.js">
          <h1>
              <a href="#main.js" name="main.js" class="pilcrow">&#182;</a>main.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">&#182;</a>
</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">&#39;./diagrams/flowchart/graphDb&#39;</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">&#39;./diagrams/flowchart/parser/flow&#39;</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">&#39;./utils&#39;</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">&#39;./diagrams/flowchart/flowRenderer&#39;</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">&#39;./diagrams/sequenceDiagram/sequenceRenderer&#39;</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">&#39;./diagrams/example/exampleRenderer&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">he</span>             <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;he&#39;</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">&#39;./diagrams/example/parser/example&#39;</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">&#39;./diagrams/flowchart/parser/flow&#39;</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">&#39;./diagrams/flowchart/parser/dot&#39;</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">&#39;./diagrams/sequenceDiagram/parser/sequenceDiagram&#39;</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">&#39;./diagrams/sequenceDiagram/sequenceDb&#39;</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">&#39;./diagrams/example/exampleDb&#39;</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">&#39;./diagrams/gantt/ganttRenderer&#39;</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">&#39;./diagrams/gantt/parser/gantt&#39;</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">&#39;./diagrams/gantt/ganttDb&#39;</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">&#39;./d3&#39;</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">&#39;./logger&#39;</span><span class="p">).</span><span class="nx">create</span><span class="p">();</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-2" id="section-2">&#182;</a>
</div>
<div class="dox">
  <div class="summary"><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">&#39;graph&#39;</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">&#39;dotGraph&#39;</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">&#39;sequenceDiagram&#39;</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">&#39;info&#39;</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">&#39;gantt&#39;</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>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-3" id="section-3">&#182;</a>
</div>
<div class="dox">
  <div class="summary"><p>Function that goes through the document to find the chart definitions in there and render them.</p>

  </div>
  <div class="body"><p>The function tags the processed attributes with the attribute data-processed and ignores found elements with the
attribute already set. This way the init function can be triggered several times.</p>
<p>Optionally, <code>init</code> can accept in the second argument one of the following:</p>
<ul>
<li>a DOM Node</li>
<li>an array of DOM nodes (as would come from a jQuery selector)</li>
<li>a W3C selector, a la <code>.mermaid</code></li>
</ul>

<div class="highlight"><pre><code><span class="nx">graph</span> <span class="nx">LR</span><span class="p">;</span>
 <span class="nx">a</span><span class="p">(</span><span class="nx">Find</span> <span class="nx">elements</span><span class="p">)</span><span class="o">--</span><span class="nx">b</span><span class="p">{</span><span class="nx">Processed</span><span class="p">};</span>
 <span class="nx">b</span><span class="o">--|</span><span class="nx">Yes</span><span class="o">|</span><span class="nx">c</span><span class="p">(</span><span class="nx">Leave</span> <span class="nx">element</span><span class="p">);</span>
 <span class="nx">c</span><span class="o">--|</span><span class="nx">No</span> <span class="o">|</span><span class="nx">d</span><span class="p">(</span><span class="nx">Transform</span><span class="p">);</span>
</code></pre></div>


  </div>
</div>

        </td>
        <td class="code highlight"><div class="highlight"><pre>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-4" id="section-4">&#182;</a>
</div>
<div class="dox">
  <div class="summary"><p>Renders the mermaid diagrams</p>

  </div>
  <div class="body">
  </div>
  <div class="details">
    <div class="dox_tag_title">*</div>
    <div class="dox_tag_detail">
      <span>param nodes- a css selector or an array of nodes
</span>
    </div>
  </div>
</div>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
<span class="kd">var</span> <span class="nx">init</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">nodes</span><span class="p">;</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">arguments</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">2</span><span class="p">){</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-5" id="section-5">&#182;</a>
</div>
<p>sequence config was passed as #1</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">arguments</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">){</span>
            <span class="nx">mermaid</span><span class="p">.</span><span class="nx">sequenceConfig</span> <span class="o">=</span> <span class="nx">arguments</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>      
        <span class="p">}</span>

        <span class="nx">nodes</span> <span class="o">=</span> <span class="nx">arguments</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span>
    <span class="p">}</span>
    <span class="k">else</span><span class="p">{</span>
        <span class="nx">nodes</span> <span class="o">=</span> <span class="nx">arguments</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="p">}</span>
    
    <span class="nx">nodes</span> <span class="o">=</span> <span class="nx">nodes</span> <span class="o">===</span> <span class="kc">undefined</span> <span class="o">?</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">&#39;.mermaid&#39;</span><span class="p">)</span>
        <span class="o">:</span> <span class="k">typeof</span> <span class="nx">nodes</span> <span class="o">===</span> <span class="s2">&quot;string&quot;</span> <span class="o">?</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="nx">nodes</span><span class="p">)</span>
        <span class="o">:</span> <span class="nx">nodes</span> <span class="k">instanceof</span> <span class="nx">Node</span> <span class="o">?</span> <span class="p">[</span><span class="nx">nodes</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">&#182;</a>
</div>
<p>Last case  - sequence config was passed pick next </p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="o">:</span> <span class="nx">nodes</span><span class="p">;</span>
    
    <span class="kd">var</span> <span class="nx">i</span><span class="p">;</span>
    
    <span class="nx">log</span><span class="p">.</span><span class="nx">debug</span><span class="p">(</span><span class="s1">&#39;Found &#39;</span><span class="p">,</span><span class="nx">nodes</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span><span class="s1">&#39; nodes&#39;</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">&lt;</span> <span class="nx">nodes</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="p">{</span>
        <span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nx">nodes</span><span class="p">[</span><span class="nx">i</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">&#182;</a>
</div>
<p>Check if previously processed</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">element</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s2">&quot;data-processed&quot;</span><span class="p">))</span> <span class="p">{</span>
            <span class="nx">element</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s2">&quot;data-processed&quot;</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="k">continue</span><span class="p">;</span>
        <span class="p">}</span>

        <span class="kd">var</span> <span class="nx">id</span> <span class="o">=</span> <span class="s1">&#39;mermaidChart&#39;</span> <span class="o">+</span> <span class="nx">nextId</span><span class="o">++</span><span class="p">;</span>

        <span class="kd">var</span> <span class="nx">txt</span> <span class="o">=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">;</span>
        <span class="nx">txt</span> <span class="o">=</span> <span class="nx">txt</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/&gt;/g</span><span class="p">,</span><span class="s1">&#39;&amp;gt;&#39;</span><span class="p">);</span>
        <span class="nx">txt</span> <span class="o">=</span> <span class="nx">txt</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/&lt;/g</span><span class="p">,</span><span class="s1">&#39;&amp;lt;&#39;</span><span class="p">);</span>
        <span class="nx">txt</span> <span class="o">=</span> <span class="nx">he</span><span class="p">.</span><span class="nx">decode</span><span class="p">(</span><span class="nx">txt</span><span class="p">).</span><span class="nx">trim</span><span class="p">();</span>

        <span class="nx">element</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">&#39;&lt;svg id=&quot;&#39;</span> <span class="o">+</span> <span class="nx">id</span> <span class="o">+</span> <span class="s1">&#39;&quot; width=&quot;100%&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;&#39;</span> <span class="o">+</span>
            <span class="s1">&#39;&lt;g /&gt;&#39;</span> <span class="o">+</span>
            <span class="s1">&#39;&lt;/svg&gt;&#39;</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">&#39;graph&#39;</span><span class="o">:</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="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">mermaid</span><span class="p">.</span><span class="nx">flowchartConfig</span> <span class="o">===</span> <span class="s1">&#39;object&#39;</span><span class="p">){</span>
                    <span class="nx">flowRenderer</span><span class="p">.</span><span class="nx">setConf</span><span class="p">(</span><span class="nx">mermaid</span><span class="p">.</span><span class="nx">flowchartConfig</span><span class="p">);</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="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="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">&#39;dotGraph&#39;</span><span class="o">:</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">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="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="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="s1">&#39;sequenceDiagram&#39;</span><span class="o">:</span>
                <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">mermaid</span><span class="p">.</span><span class="nx">sequenceConfig</span> <span class="o">===</span> <span class="s1">&#39;object&#39;</span><span class="p">){</span>
                    <span class="nx">seq</span><span class="p">.</span><span class="nx">setConf</span><span class="p">(</span><span class="nx">mermaid</span><span class="p">.</span><span class="nx">sequenceConfig</span><span class="p">);</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="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="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="s1">&#39;gantt&#39;</span><span class="o">:</span>
                <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">mermaid</span><span class="p">.</span><span class="nx">ganttConfig</span> <span class="o">===</span> <span class="s1">&#39;object&#39;</span><span class="p">){</span>
                    <span class="nx">gantt</span><span class="p">.</span><span class="nx">setConf</span><span class="p">(</span><span class="nx">mermaid</span><span class="p">.</span><span class="nx">ganttConfig</span><span class="p">);</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="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="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="s1">&#39;info&#39;</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="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="k">break</span><span class="p">;</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">tester</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){};</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-8" id="section-8">&#182;</a>
</div>
<div class="dox">
  <div class="summary"><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">&#39;../package.json&#39;</span><span class="p">).</span><span class="nx">version</span><span class="p">;</span>
<span class="p">};</span>

<span class="kd">var</span> <span class="nx">equals</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">val</span><span class="p">,</span> <span class="nx">variable</span><span class="p">){</span>
    <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">variable</span> <span class="o">===</span> <span class="s1">&#39;undefined&#39;</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="k">else</span><span class="p">{</span>
        <span class="k">return</span> <span class="p">(</span><span class="nx">val</span> <span class="o">===</span> <span class="nx">variable</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">};</span>

<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>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-9" id="section-9">&#182;</a>
</div>

<div class="highlight"><pre><code>   <span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;svg&#39;</span><span class="p">);</span>
   <span class="nx">element</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;id&#39;</span><span class="p">,</span><span class="nx">id</span><span class="p">);</span>
   <span class="nx">element</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;width&#39;</span><span class="p">,</span><span class="s1">&#39;100%&#39;</span><span class="p">);</span>
   <span class="nx">element</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;xmlns&#39;</span><span class="p">,</span><span class="s1">&#39;http://www.w3.org/2000/svg&#39;</span><span class="p">);</span>
   <span class="nx">element</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">&#39;g /&#39;</span><span class="p">;</span>
</code></pre></div>


        </td>
        <td class="code highlight"><div class="highlight"><pre>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-10" id="section-10">&#182;</a>
</div>
<p>var element = doc.createElement(&#39;div&#39;);
element.setAttribute(&#39;id&#39;,&#39;d&#39;+id);</p>
<p>element.innerHTML = &#39;<svg id="' + id + '" width="100%" xmlns="http://www.w3.org/2000/svg">&#39; +
   &#39;<g />&#39; +
   &#39;</svg>&#39;;
document.body.appendChild(element);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s1">&#39;body&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">)</span>
        <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;id&#39;</span><span class="p">,</span> <span class="s1">&#39;d&#39;</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">&#39;svg&#39;</span><span class="p">)</span>
        <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;id&#39;</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">&#39;width&#39;</span><span class="p">,</span><span class="s1">&#39;100%&#39;</span><span class="p">)</span>
        <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;xmlns&#39;</span><span class="p">,</span><span class="s1">&#39;http://www.w3.org/2000/svg&#39;</span><span class="p">)</span>
        <span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">&#39;g&#39;</span><span class="p">);</span>



        <span class="nx">log</span><span class="p">.</span><span class="nx">debug</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">&#39;#d&#39;</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="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">&#39;#d&#39;</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">&#39;graph&#39;</span><span class="o">:</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="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">mermaid</span><span class="p">.</span><span class="nx">flowchartConfig</span> <span class="o">===</span> <span class="s1">&#39;object&#39;</span><span class="p">){</span>
                    <span class="nx">flowRenderer</span><span class="p">.</span><span class="nx">setConf</span><span class="p">(</span><span class="nx">mermaid</span><span class="p">.</span><span class="nx">flowchartConfig</span><span class="p">);</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="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="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">&#39;dotGraph&#39;</span><span class="o">:</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">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="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="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="s1">&#39;sequenceDiagram&#39;</span><span class="o">:</span>
                <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">mermaid</span><span class="p">.</span><span class="nx">sequenceConfig</span> <span class="o">===</span> <span class="s1">&#39;object&#39;</span><span class="p">){</span>
                    <span class="nx">seq</span><span class="p">.</span><span class="nx">setConf</span><span class="p">(</span><span class="nx">mermaid</span><span class="p">.</span><span class="nx">sequenceConfig</span><span class="p">);</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="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="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="s1">&#39;gantt&#39;</span><span class="o">:</span>
                <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">mermaid</span><span class="p">.</span><span class="nx">ganttConfig</span> <span class="o">===</span> <span class="s1">&#39;object&#39;</span><span class="p">){</span>
                    <span class="nx">gantt</span><span class="p">.</span><span class="nx">setConf</span><span class="p">(</span><span class="nx">mermaid</span><span class="p">.</span><span class="nx">ganttConfig</span><span class="p">);</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="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="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="s1">&#39;info&#39;</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="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="k">break</span><span class="p">;</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">&#182;</a>
</div>
<p>log.debug(document.body.innerHTML);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <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">&#39;#d&#39;</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">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s1">&#39;#d&#39;</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="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="kd">var</span> <span class="nx">callback</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">svgText</span><span class="p">){</span>
        <span class="nx">log</span><span class="p">.</span><span class="nx">debug</span><span class="p">(</span><span class="nx">svgText</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="nb">document</span> <span class="o">===</span> <span class="s1">&#39;undefined&#39;</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">&#182;</a>
</div>
<p>jsdom = require(&#39;jsdom&#39;).jsdom;
log.debug(jsdom);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-13" id="section-13">&#182;</a>
</div>
<p>htmlStub = &#39;<html><head></head><body><div class="mermaid">&#39;+text+&#39;</div><script src="dist/mermaid.full.js"></script><script>var mermaid_config = {startOnLoad:true}</script></body></html>&#39;;</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="nx">htmlStub</span> <span class="o">=</span> <span class="s1">&#39;&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;&#39;</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">&#182;</a>
</div>

<div class="highlight"><pre><code>   <span class="c1">// html file skull with a container div for the d3 dataviz</span>
</code></pre></div>

<p>pass the html stub to jsDom</p>
<p><div class="dox">
  <div class="summary"><p>jsdom.env({ 
features : { QuerySelectorAll : true },
html : htmlStub,
done : function(errors, win) {
// process the html document, like if we were at client side
// code to generate the dataviz and process the resulting html file to be added here
//var d3 = require(&#39;d3&#39;);
//log.debug(&#39;Here we go: &#39;+JSON.stringify(d3));</p></p>
<p>  </div>
  <div class="body"><p>global.document = win.document;
global.window = win;</p></p>
<p>var element = win.document.createElement(&#39;div&#39;);
element.setAttribute(&#39;id&#39;,&#39;did&#39;);
//document.
log.debug(document.body.innerHTML);
//log.debug(&#39;Element:&#39;,element);
//log.debug(win);
//mermaid.init();
//render(win.document, &#39;myId&#39;, text, callback);</p>
<p>}
});  </p>

<p>  </div>
</div>
var jsdom = require(&#39;jsdom&#39;).jsdom;
global.document = jsdom(htmlStub);
global.window = document.parentWindow;</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">callback</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">&#182;</a>
</div>
<p>var element = win.document.createElement(&#39;div&#39;);
element.setAttribute(&#39;id&#39;,&#39;did&#39;);
document.</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-16" id="section-16">&#182;</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">callback</span><span class="p">);</span>
    <span class="p">}</span>
    
    
    
<span class="p">};</span>

<span class="nx">global</span><span class="p">.</span><span class="nx">mermaid</span> <span class="o">=</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">htmlLabels</span><span class="o">:</span>     <span class="kc">true</span><span class="p">,</span>
    
    <span class="nx">init</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sequenceConfig</span><span class="p">,</span> <span class="nx">nodes</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">init</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</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="p">{</span>
        <span class="k">return</span> <span class="nx">exports</span><span class="p">.</span><span class="nx">version</span><span class="p">();</span>
    <span class="p">},</span>
    <span class="nx">getParser</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="k">return</span> <span class="nx">flow</span><span class="p">.</span><span class="nx">parser</span><span class="p">;</span>
    <span class="p">},</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="p">{</span>
        <span class="k">return</span> <span class="nx">parse</span><span class="p">(</span><span class="nx">text</span><span class="p">);</span>
    <span class="p">},</span>
    <span class="nx">parseError</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">hash</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">log</span><span class="p">.</span><span class="nx">debug</span><span class="p">(</span><span class="s1">&#39;Mermaid Syntax error:&#39;</span><span class="p">);</span>
        <span class="nx">log</span><span class="p">.</span><span class="nx">debug</span><span class="p">(</span><span class="nx">err</span><span class="p">);</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="k">return</span> <span class="nx">exports</span><span class="p">.</span><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="p">}</span>
<span class="p">};</span>

<span class="nx">exports</span><span class="p">.</span><span class="nx">contentLoaded</span> <span class="o">=</span> <span class="kd">function</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">&#182;</a>
</div>
<p>Check state of start config mermaid namespace
log.debug(&#39;global.mermaid.startOnLoad&#39;,global.mermaid.startOnLoad);
log.debug(&#39;mermaid_config&#39;,mermaid_config);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">mermaid_config</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">equals</span><span class="p">(</span><span class="kc">false</span><span class="p">,</span> <span class="nx">mermaid_config</span><span class="p">.</span><span class="nx">htmlLabels</span><span class="p">))</span> <span class="p">{</span>
            <span class="nx">global</span><span class="p">.</span><span class="nx">mermaid</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>
    <span class="p">}</span>

    <span class="k">if</span><span class="p">(</span><span class="nx">global</span><span class="p">.</span><span class="nx">mermaid</span><span class="p">.</span><span class="nx">startOnLoad</span><span class="p">)</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">&#182;</a>
</div>
<p>For backwards compatability reasons also check mermaid_config variable</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">mermaid_config</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</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">&#182;</a>
</div>
<p>Check if property startOnLoad is set</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="k">if</span> <span class="p">(</span><span class="nx">equals</span><span class="p">(</span><span class="kc">true</span><span class="p">,</span> <span class="nx">mermaid_config</span><span class="p">.</span><span class="nx">startOnLoad</span><span class="p">))</span> <span class="p">{</span>
                <span class="nx">global</span><span class="p">.</span><span class="nx">mermaid</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
            <span class="p">}</span>
        <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-20" id="section-20">&#182;</a>
</div>
<p>No config found, do autostart in this simple case</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="nx">global</span><span class="p">.</span><span class="nx">mermaid</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
        <span class="p">}</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="nb">document</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">){</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-21" id="section-21">&#182;</a>
</div>
<div class="dox">
  <div class="summary"><p>Wait for document loaded before starting the execution</p>

  </div>
  <div class="body">
  </div>
</div>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;DOMContentLoaded&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span>
        <span class="nx">exports</span><span class="p">.</span><span class="nx">contentLoaded</span><span class="p">();</span>
    <span class="p">},</span> <span class="kc">false</span><span class="p">);</span>
<span class="p">}</span>
</pre></div>
        </td>
      </tr>
  </tbody>
</table>
  </div>
</body>
</html>