UNPKG

mermaid

Version:

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

github.com/knsv/mermaid

knsv/mermaid

1,076 lines • 85.6 kB
<!DOCTYPE html>
<html>
<head>
  <title>flowRenderer.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/diagrams/flowchart/flowRenderer.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="#flowRenderer.js">flowRenderer.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="flowRenderer.js">
          <h1>
              <a href="#flowRenderer.js" name="flowRenderer.js" class="pilcrow">&#182;</a>flowRenderer.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>
<div class="dox">
  <div class="summary"><p>Created by knut on 14-12-11.</p>

  </div>
  <div class="body">
  </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">&#39;./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;./parser/flow&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">dot</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./parser/dot&#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">dagreD3</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./dagre-d3&#39;</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>

<span class="kd">var</span> <span class="nx">conf</span> <span class="o">=</span> <span class="p">{</span>
<span class="p">};</span>
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="p">.</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>
    <span class="kd">var</span> <span class="nx">keys</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">&lt;</span><span class="nx">keys</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="nx">conf</span><span class="p">[</span><span class="nx">keys</span><span class="p">[</span><span class="nx">i</span><span class="p">]]</span> <span class="o">=</span> <span class="nx">cnf</span><span class="p">[</span><span class="nx">keys</span><span class="p">[</span><span class="nx">i</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-2" id="section-2">&#182;</a>
</div>
<div class="dox">
  <div class="summary"><p>Function that adds the vertices found in the graph definition to the graph to be rendered.</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">vert</span>
      <span>Object containing the vertices.
</span>
    </div>
    <div class="dox_tag_detail">
      <span class="dox_tag_name">g</span>
      <span>The graph that is to be drawn.
</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">addVertices</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">vert</span><span class="p">,</span> <span class="nx">g</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">keys</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">vert</span><span class="p">);</span>

    <span class="kd">var</span> <span class="nx">styleFromStyleArr</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">styleStr</span><span class="p">,</span><span class="nx">arr</span><span class="p">){</span>
        <span class="kd">var</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-3" id="section-3">&#182;</a>
</div>
<p>Create a compound style definition from the style definitions found for the node in the graph definition</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <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">arr</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="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">arr</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">styleStr</span> <span class="o">=</span> <span class="nx">styleStr</span> <span class="o">+</span> <span class="nx">arr</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">+</span> <span class="s1">&#39;;&#39;</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">}</span>

        <span class="k">return</span> <span class="nx">styleStr</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-4" id="section-4">&#182;</a>
</div>
<p>Iterate through each item in the vertice object (containing all the vertices found) in the graph definition</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">keys</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">vertice</span> <span class="o">=</span> <span class="nx">vert</span><span class="p">[</span><span class="nx">id</span><span class="p">];</span>
        <span class="kd">var</span> <span class="nx">verticeText</span><span class="p">;</span>

        <span class="kd">var</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-5" id="section-5">&#182;</a>
</div>
<div class="dox">
  <div class="summary"><p>Variable for storing the classes for the vertice</p>

  </div>
  <div class="body">
  </div>
  <div class="details">
    <div class="dox_tag_title">Type</div>
    <div class="dox_tag_detail">
      <span class="dox_type">string
</span>
    </div>
  </div>
</div>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="kd">var</span> <span class="nx">classStr</span> <span class="o">=</span> <span class="s1">&#39;&#39;</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>log.debug(vertice.classes);</p>

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

        <span class="k">if</span><span class="p">(</span><span class="nx">vertice</span><span class="p">.</span><span class="nx">classes</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span><span class="mi">0</span><span class="p">){</span>
            <span class="nx">classStr</span> <span class="o">=</span> <span class="nx">vertice</span><span class="p">.</span><span class="nx">classes</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot; &quot;</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-7" id="section-7">&#182;</a>
</div>
<div class="dox">
  <div class="summary"><p>Variable for storing the extracted style for the vertice</p>

  </div>
  <div class="body">
  </div>
  <div class="details">
    <div class="dox_tag_title">Type</div>
    <div class="dox_tag_detail">
      <span class="dox_type">string
</span>
    </div>
  </div>
</div>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="kd">var</span> <span class="nx">style</span> <span class="o">=</span> <span class="s1">&#39;&#39;</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>
<p>Create a compound style definition from the style definitions found for the node in the graph definition</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="nx">style</span> <span class="o">=</span> <span class="nx">styleFromStyleArr</span><span class="p">(</span><span class="nx">style</span><span class="p">,</span> <span class="nx">vertice</span><span class="p">.</span><span class="nx">styles</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>
<p>Use vertice id as text in the box if no text is provided by the graph definition</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">vertice</span><span class="p">.</span><span class="nx">text</span> <span class="o">===</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">verticeText</span> <span class="o">=</span> <span class="nx">vertice</span><span class="p">.</span><span class="nx">id</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="p">{</span>
            <span class="nx">verticeText</span> <span class="o">=</span> <span class="nx">vertice</span><span class="p">.</span><span class="nx">text</span><span class="p">;</span>
        <span class="p">}</span>

        <span class="kd">var</span> <span class="nx">labelTypeStr</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
        <span class="k">if</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">htmlLabels</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">labelTypeStr</span> <span class="o">=</span> <span class="s1">&#39;html&#39;</span><span class="p">;</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="nx">verticeText</span> <span class="o">=</span> <span class="nx">verticeText</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/&lt;br&gt;/g</span><span class="p">,</span> <span class="s2">&quot;\n&quot;</span><span class="p">);</span>
            <span class="nx">labelTypeStr</span> <span class="o">=</span> <span class="s1">&#39;text&#39;</span><span class="p">;</span>
        <span class="p">}</span>

        <span class="kd">var</span> <span class="nx">radious</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">_shape</span> <span class="o">=</span> <span class="s1">&#39;&#39;</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">&#182;</a>
</div>
<p>Set the shape based parameters</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="k">switch</span><span class="p">(</span><span class="nx">vertice</span><span class="p">.</span><span class="nx">type</span><span class="p">){</span>
            <span class="k">case</span> <span class="s1">&#39;round&#39;</span><span class="o">:</span>
                <span class="nx">radious</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span>
                <span class="nx">_shape</span> <span class="o">=</span> <span class="s1">&#39;rect&#39;</span><span class="p">;</span>
                <span class="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="s1">&#39;square&#39;</span><span class="o">:</span>
                <span class="nx">_shape</span> <span class="o">=</span> <span class="s1">&#39;rect&#39;</span><span class="p">;</span>
                <span class="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="s1">&#39;diamond&#39;</span><span class="o">:</span>
                <span class="nx">_shape</span> <span class="o">=</span> <span class="s1">&#39;question&#39;</span><span class="p">;</span>
                <span class="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="s1">&#39;odd&#39;</span><span class="o">:</span>
                <span class="nx">_shape</span> <span class="o">=</span> <span class="s1">&#39;rect_left_inv_arrow&#39;</span><span class="p">;</span>
                <span class="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="s1">&#39;odd_right&#39;</span><span class="o">:</span>
                <span class="nx">_shape</span> <span class="o">=</span> <span class="s1">&#39;rect_left_inv_arrow&#39;</span><span class="p">;</span>
                <span class="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="s1">&#39;circle&#39;</span><span class="o">:</span>
                <span class="nx">_shape</span> <span class="o">=</span> <span class="s1">&#39;circle&#39;</span><span class="p">;</span>
                <span class="k">break</span><span class="p">;</span>
            <span class="k">default</span><span class="o">:</span>
                <span class="nx">_shape</span> <span class="o">=</span> <span class="s1">&#39;rect&#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-11" id="section-11">&#182;</a>
</div>
<p>Add the node</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="nx">g</span><span class="p">.</span><span class="nx">setNode</span><span class="p">(</span><span class="nx">vertice</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="p">{</span><span class="nx">labelType</span><span class="o">:</span> <span class="nx">labelTypeStr</span><span class="p">,</span> <span class="nx">shape</span><span class="o">:</span><span class="nx">_shape</span><span class="p">,</span> <span class="nx">label</span><span class="o">:</span> <span class="nx">verticeText</span><span class="p">,</span> <span class="nx">rx</span><span class="o">:</span> <span class="nx">radious</span><span class="p">,</span> <span class="nx">ry</span><span class="o">:</span> <span class="nx">radious</span><span class="p">,</span> <span class="kr">class</span><span class="o">:</span> <span class="nx">classStr</span><span class="p">,</span> <span class="nx">style</span><span class="o">:</span> <span class="nx">style</span><span class="p">,</span> <span class="nx">id</span><span class="o">:</span><span class="nx">vertice</span><span class="p">.</span><span class="nx">id</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-12" id="section-12">&#182;</a>
</div>
<div class="dox">
  <div class="summary"><p>Add edges to graph based on parsed graph defninition</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">edges</span>
      <span class="dox_type">Object</span>
      <span>The edges to add to the graph
</span>
    </div>
    <div class="dox_tag_detail">
      <span class="dox_tag_name">g</span>
      <span class="dox_type">Object</span>
      <span>The graph object
</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">addEdges</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">edges</span><span class="p">,</span> <span class="nx">g</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">cnt</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">aHead</span><span class="p">;</span>
    
    <span class="kd">var</span> <span class="nx">defaultStyle</span><span class="p">;</span>
    <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">edges</span><span class="p">.</span><span class="nx">defaultStyle</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">){</span>
        <span class="nx">defaultStyle</span> <span class="o">=</span> <span class="nx">edges</span><span class="p">.</span><span class="nx">defaultStyle</span><span class="p">.</span><span class="nx">toString</span><span class="p">().</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/,/g</span> <span class="p">,</span> <span class="s1">&#39;;&#39;</span><span class="p">);</span>

    <span class="p">}</span>

    <span class="nx">edges</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">edge</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">cnt</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-13" id="section-13">&#182;</a>
</div>
<p>Set link type for rendering</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="k">if</span><span class="p">(</span><span class="nx">edge</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s1">&#39;arrow_open&#39;</span><span class="p">){</span>
            <span class="nx">aHead</span> <span class="o">=</span> <span class="s1">&#39;none&#39;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span><span class="p">{</span>
            <span class="nx">aHead</span> <span class="o">=</span> <span class="s1">&#39;normal&#39;</span><span class="p">;</span>
        <span class="p">}</span>

        <span class="kd">var</span> <span class="nx">style</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>


        <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">edge</span><span class="p">.</span><span class="nx">style</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">){</span>
            <span class="nx">edge</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">s</span><span class="p">){</span>
                <span class="nx">style</span> <span class="o">=</span> <span class="nx">style</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span><span class="s1">&#39;;&#39;</span><span class="p">;</span>
            <span class="p">});</span>
        <span class="p">}</span>
        <span class="k">else</span><span class="p">{</span>
            <span class="k">switch</span><span class="p">(</span><span class="nx">edge</span><span class="p">.</span><span class="nx">stroke</span><span class="p">){</span>
                <span class="k">case</span> <span class="s1">&#39;normal&#39;</span><span class="o">:</span>
                    <span class="nx">style</span> <span class="o">=</span> <span class="s1">&#39;fill:none&#39;</span><span class="p">;</span>
                    <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">defaultStyle</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">){</span>
                        <span class="nx">style</span> <span class="o">=</span> <span class="nx">defaultStyle</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;dotted&#39;</span><span class="o">:</span>
                    <span class="nx">style</span> <span class="o">=</span> <span class="s1">&#39;stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;&#39;</span><span class="p">;</span>
                    <span class="k">break</span><span class="p">;</span>
                <span class="k">case</span> <span class="s1">&#39;thick&#39;</span><span class="o">:</span>
                    <span class="nx">style</span> <span class="o">=</span> <span class="s1">&#39;stroke: #333; stroke-width: 3.5px;fill:none&#39;</span><span class="p">;</span>
                    <span class="k">break</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-14" id="section-14">&#182;</a>
</div>
<p>Add the edge to the graph</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">edge</span><span class="p">.</span><span class="nx">text</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="k">typeof</span> <span class="nx">edge</span><span class="p">.</span><span class="nx">style</span> <span class="o">===</span> <span class="s1">&#39;undefined&#39;</span><span class="p">){</span>
                <span class="nx">g</span><span class="p">.</span><span class="nx">setEdge</span><span class="p">(</span><span class="nx">edge</span><span class="p">.</span><span class="nx">start</span><span class="p">,</span> <span class="nx">edge</span><span class="p">.</span><span class="nx">end</span><span class="p">,{</span> <span class="nx">style</span><span class="o">:</span> <span class="nx">style</span><span class="p">,</span> <span class="nx">arrowhead</span><span class="o">:</span> <span class="nx">aHead</span><span class="p">},</span><span class="nx">cnt</span><span class="p">);</span>
            <span class="p">}</span><span class="k">else</span><span class="p">{</span>
                <span class="nx">g</span><span class="p">.</span><span class="nx">setEdge</span><span class="p">(</span><span class="nx">edge</span><span class="p">.</span><span class="nx">start</span><span class="p">,</span> <span class="nx">edge</span><span class="p">.</span><span class="nx">end</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">style</span><span class="o">:</span> <span class="nx">style</span><span class="p">,</span> <span class="nx">arrowheadStyle</span><span class="o">:</span> <span class="s2">&quot;fill: #333&quot;</span><span class="p">,</span> <span class="nx">arrowhead</span><span class="o">:</span> <span class="nx">aHead</span>
                <span class="p">},</span><span class="nx">cnt</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-15" id="section-15">&#182;</a>
</div>
<p>Edge with text</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="k">else</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">edgeText</span> <span class="o">=</span> <span class="nx">edge</span><span class="p">.</span><span class="nx">text</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/&lt;br&gt;/g</span><span class="p">,</span> <span class="s2">&quot;\n&quot;</span><span class="p">);</span>
            <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">edge</span><span class="p">.</span><span class="nx">style</span> <span class="o">===</span> <span class="s1">&#39;undefined&#39;</span><span class="p">){</span>
                <span class="k">if</span> <span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">htmlLabels</span><span class="p">){</span>
                    <span class="nx">g</span><span class="p">.</span><span class="nx">setEdge</span><span class="p">(</span><span class="nx">edge</span><span class="p">.</span><span class="nx">start</span><span class="p">,</span> <span class="nx">edge</span><span class="p">.</span><span class="nx">end</span><span class="p">,{</span><span class="nx">labelType</span><span class="o">:</span> <span class="s2">&quot;html&quot;</span><span class="p">,</span><span class="nx">style</span><span class="o">:</span> <span class="nx">style</span><span class="p">,</span> <span class="nx">labelpos</span><span class="o">:</span><span class="s1">&#39;c&#39;</span><span class="p">,</span> <span class="nx">label</span><span class="o">:</span> <span class="s1">&#39;&lt;span style=&quot;background:#e8e8e8&quot;&gt;&#39;</span><span class="o">+</span><span class="nx">edge</span><span class="p">.</span><span class="nx">text</span><span class="o">+</span><span class="s1">&#39;&lt;/span&gt;&#39;</span><span class="p">,</span> <span class="nx">arrowheadStyle</span><span class="o">:</span> <span class="s2">&quot;fill: #333&quot;</span><span class="p">,</span> <span class="nx">arrowhead</span><span class="o">:</span> <span class="nx">aHead</span><span class="p">},</span><span class="nx">cnt</span><span class="p">);</span>
                <span class="p">}</span><span class="k">else</span><span class="p">{</span>
                    <span class="nx">g</span><span class="p">.</span><span class="nx">setEdge</span><span class="p">(</span><span class="nx">edge</span><span class="p">.</span><span class="nx">start</span><span class="p">,</span> <span class="nx">edge</span><span class="p">.</span><span class="nx">end</span><span class="p">,{</span><span class="nx">labelType</span><span class="o">:</span> <span class="s2">&quot;text&quot;</span><span class="p">,</span> <span class="nx">style</span><span class="o">:</span> <span class="s2">&quot;stroke: #333; stroke-width: 1.5px;fill:none&quot;</span><span class="p">,</span> <span class="nx">labelpos</span><span class="o">:</span><span class="s1">&#39;c&#39;</span><span class="p">,</span> <span class="nx">label</span><span class="o">:</span> <span class="nx">edgeText</span><span class="p">,</span> <span class="nx">arrowheadStyle</span><span class="o">:</span> <span class="s2">&quot;fill: #333&quot;</span><span class="p">,</span> <span class="nx">arrowhead</span><span class="o">:</span> <span class="nx">aHead</span><span class="p">},</span><span class="nx">cnt</span><span class="p">);</span>
                <span class="p">}</span>
             <span class="p">}</span><span class="k">else</span><span class="p">{</span>
                <span class="nx">g</span><span class="p">.</span><span class="nx">setEdge</span><span class="p">(</span><span class="nx">edge</span><span class="p">.</span><span class="nx">start</span><span class="p">,</span> <span class="nx">edge</span><span class="p">.</span><span class="nx">end</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">labelType</span><span class="o">:</span> <span class="s2">&quot;text&quot;</span><span class="p">,</span> <span class="nx">style</span><span class="o">:</span> <span class="nx">style</span><span class="p">,</span> <span class="nx">arrowheadStyle</span><span class="o">:</span> <span class="s2">&quot;fill: #333&quot;</span><span class="p">,</span> <span class="nx">label</span><span class="o">:</span> <span class="nx">edgeText</span><span class="p">,</span> <span class="nx">arrowhead</span><span class="o">:</span> <span class="nx">aHead</span>
                <span class="p">},</span><span class="nx">cnt</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="pilwrap">
  <a class="pilcrow" href="#section-16" id="section-16">&#182;</a>
</div>
<div class="dox">
  <div class="summary"><p>Returns the all the styles from classDef statements in the graph definition.</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">object</span>
      <span>classDef styles
</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">getClasses</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="nx">isDot</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">parser</span><span class="p">;</span>
    <span class="nx">graph</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">isDot</span><span class="p">){</span>
        <span class="nx">parser</span> <span class="o">=</span> <span class="nx">dot</span><span class="p">.</span><span class="nx">parser</span><span class="p">;</span>

    <span class="p">}</span><span class="k">else</span><span class="p">{</span>
        <span class="nx">parser</span> <span class="o">=</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">parser</span><span class="p">.</span><span class="nx">yy</span> <span class="o">=</span> <span class="nx">graph</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>Parse the graph definition</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <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="kd">var</span> <span class="nx">classDefStylesObj</span> <span class="o">=</span> <span class="p">{};</span>
    <span class="kd">var</span> <span class="nx">classDefStyleStr</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>

    <span class="kd">var</span> <span class="nx">classes</span> <span class="o">=</span> <span class="nx">graph</span><span class="p">.</span><span class="nx">getClasses</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>Add default class if undefined</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="p">(</span><span class="nx">classes</span><span class="p">.</span><span class="k">default</span><span class="p">)</span> <span class="o">===</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">classes</span><span class="p">.</span><span class="k">default</span> <span class="o">=</span> <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="s1">&#39;default&#39;</span><span class="p">};</span>
        <span class="nx">classes</span><span class="p">.</span><span class="k">default</span><span class="p">.</span><span class="nx">styles</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;fill:#ffa&#39;</span><span class="p">,</span><span class="s1">&#39;stroke:#666&#39;</span><span class="p">,</span><span class="s1">&#39;stroke-width:3px&#39;</span><span class="p">];</span>
        <span class="nx">classes</span><span class="p">.</span><span class="k">default</span><span class="p">.</span><span class="nx">clusterStyles</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;rx:4px&#39;</span><span class="p">,</span><span class="s1">&#39;fill: rgb(255, 255, 222)&#39;</span><span class="p">,</span><span class="s1">&#39;rx: 4px&#39;</span><span class="p">,</span><span class="s1">&#39;stroke: rgb(170, 170, 51)&#39;</span><span class="p">,</span><span class="s1">&#39;stroke-width: 1px&#39;</span><span class="p">];</span>
        <span class="nx">classes</span><span class="p">.</span><span class="k">default</span><span class="p">.</span><span class="nx">nodeLabelStyles</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;fill:#000&#39;</span><span class="p">,</span><span class="s1">&#39;stroke:none&#39;</span><span class="p">,</span><span class="s1">&#39;font-weight:300&#39;</span><span class="p">,</span><span class="s1">&#39;font-family:&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serf&#39;</span><span class="p">,</span><span class="s1">&#39;font-size:14px&#39;</span><span class="p">];</span>
        <span class="nx">classes</span><span class="p">.</span><span class="k">default</span><span class="p">.</span><span class="nx">edgeLabelStyles</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;fill:#000&#39;</span><span class="p">,</span><span class="s1">&#39;stroke:none&#39;</span><span class="p">,</span><span class="s1">&#39;font-weight:300&#39;</span><span class="p">,</span><span class="s1">&#39;font-family:&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serf&#39;</span><span class="p">,</span><span class="s1">&#39;font-size:14px&#39;</span><span class="p">];</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="nx">classes</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>
<div class="dox">
  <div class="summary"><p>Draws a flowchart in the tag with id: id based on the graph definition in text.</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 class="dox_tag_detail">
      <span class="dox_tag_name">id
</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">draw</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="nx">id</span><span class="p">,</span><span class="nx">isDot</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;Drawing flowchart&#39;</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">parser</span><span class="p">;</span>
    <span class="nx">graph</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">isDot</span><span class="p">){</span>
        <span class="nx">parser</span> <span class="o">=</span> <span class="nx">dot</span><span class="p">.</span><span class="nx">parser</span><span class="p">;</span>

    <span class="p">}</span><span class="k">else</span><span class="p">{</span>
        <span class="nx">parser</span> <span class="o">=</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">parser</span><span class="p">.</span><span class="nx">yy</span> <span class="o">=</span> <span class="nx">graph</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>Parse the graph definition</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <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="p">}</span>
    <span class="k">catch</span><span class="p">(</span><span class="nx">err</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-21" id="section-21">&#182;</a>
</div>
<p>Fetch the default direction, use TD if none was found</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="kd">var</span> <span class="nx">dir</span><span class="p">;</span>
    <span class="nx">dir</span> <span class="o">=</span> <span class="nx">graph</span><span class="p">.</span><span class="nx">getDirection</span><span class="p">();</span>
    <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">dir</span> <span class="o">===</span> <span class="s1">&#39;undefined&#39;</span><span class="p">){</span>
        <span class="nx">dir</span><span class="o">=</span><span class="s1">&#39;TD&#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-22" id="section-22">&#182;</a>
</div>
<p>Create the input mermaid.graph</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="kd">var</span> <span class="nx">g</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">dagreD3</span><span class="p">.</span><span class="nx">graphlib</span><span class="p">.</span><span class="nx">Graph</span><span class="p">({</span>
        <span class="nx">multigraph</span><span class="o">:</span><span class="kc">true</span><span class="p">,</span>
        <span class="nx">compound</span><span class="o">:</span> <span class="kc">true</span>
    <span class="p">})</span>
        <span class="p">.</span><span class="nx">setGraph</span><span class="p">({</span>
            <span class="nx">rankdir</span><span class="o">:</span> <span class="nx">dir</span><span class="p">,</span>
            <span class="nx">marginx</span><span class="o">:</span> <span class="mi">20</span><span class="p">,</span>
            <span class="nx">marginy</span><span class="o">:</span> <span class="mi">20</span>

        <span class="p">})</span>
        <span class="p">.</span><span class="nx">setDefaultEdgeLabel</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="k">return</span> <span class="p">{};</span>
        <span class="p">});</span>

    <span class="kd">var</span> <span class="nx">subG</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">subGraphs</span> <span class="o">=</span> <span class="nx">graph</span><span class="p">.</span><span class="nx">getSubGraphs</span><span class="p">();</span>
    <span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</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="nx">subGraphs</span><span class="p">.</span><span class="nx">length</span><span class="o">-</span><span class="mi">1</span><span class="p">;</span><span class="nx">i</span><span class="o">&gt;=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o">--</span><span class="p">){</span>
        <span class="nx">subG</span> <span class="o">=</span> <span class="nx">subGraphs</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
        <span class="nx">graph</span><span class="p">.</span><span class="nx">addVertex</span><span class="p">(</span><span class="nx">subG</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span><span class="kc">undefined</span><span class="p">,</span><span class="kc">undefined</span><span class="p">,</span><span class="kc">undefined</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-23" id="section-23">&#182;</a>
</div>
<p>Fetch the verices/nodes and edges/links from the parsed graph definition</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="kd">var</span> <span class="nx">vert</span> <span class="o">=</span> <span class="nx">graph</span><span class="p">.</span><span class="nx">getVertices</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">&#182;</a>
</div>
<p>log.debug(vert);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="kd">var</span> <span class="nx">edges</span> <span class="o">=</span> <span class="nx">graph</span><span class="p">.</span><span class="nx">getEdges</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="kd">var</span> <span class="nx">j</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="nx">subGraphs</span><span class="p">.</span><span class="nx">length</span><span class="o">-</span><span class="mi">1</span><span class="p">;</span><span class="nx">i</span><span class="o">&gt;=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o">--</span><span class="p">){</span>
        <span class="nx">subG</span> <span class="o">=</span> <span class="nx">subGraphs</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>

        <span class="nx">d3</span><span class="p">.</span><span class="nx">selectAll</span><span class="p">(</span><span class="s1">&#39;cluster&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s1">&#39;text&#39;</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">&lt;</span><span class="nx">subG</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="nx">j</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-25" id="section-25">&#182;</a>
</div>
<p>log.debug(&#39;Setting node&#39;,subG.nodes[j],&#39; to subgraph &#39;+id);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="nx">g</span><span class="p">.</span><span class="nx">setParent</span><span class="p">(</span><span class="nx">subG</span><span class="p">.</span><span class="nx">nodes</span><span class="p">[</span><span class="nx">j</span><span class="p">],</span><span class="nx">subG</span><span class="p">.</span><span class="nx">id</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">addVertices</span><span class="p">(</span><span class="nx">vert</span><span class="p">,</span> <span class="nx">g</span><span class="p">);</span>
    <span class="nx">exports</span><span class="p">.</span><span class="nx">addEdges</span><span class="p">(</span><span class="nx">edges</span><span class="p">,</span> <span class="nx">g</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">&#182;</a>
</div>
<p>Create the renderer</p>

        </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="k">new</span> <span class="nx">dagreD3</span><span class="p">.</span><span class="nx">render</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">&#182;</a>
</div>
<p>Add custom shape for rhombus type of boc (decision)</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">render</span><span class="p">.</span><span class="nx">shapes</span><span class="p">().</span><span class="nx">question</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">parent</span><span class="p">,</span> <span class="nx">bbox</span><span class="p">,</span> <span class="nx">node</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">w</span> <span class="o">=</span> <span class="nx">bbox</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span>
            <span class="nx">h</span> <span class="o">=</span> <span class="nx">bbox</span><span class="p">.</span><span class="nx">height</span><span class="p">,</span>
            <span class="nx">s</span> <span class="o">=</span> <span class="p">(</span><span class="nx">w</span> <span class="o">+</span> <span class="nx">h</span><span class="p">)</span> <span class="o">*</span> <span class="mf">0.8</span><span class="p">,</span>
            <span class="nx">points</span> <span class="o">=</span> <span class="p">[</span>
                <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="nx">s</span> <span class="o">/</span> <span class="mi">2</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="mi">0</span><span class="p">},</span>
                <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="o">-</span><span class="nx">s</span> <span class="o">/</span> <span class="mi">2</span><span class="p">},</span>
                <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="nx">s</span> <span class="o">/</span> <span class="mi">2</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="o">-</span><span class="nx">s</span><span class="p">},</span>
                <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="o">-</span><span class="nx">s</span> <span class="o">/</span> <span class="mi">2</span><span class="p">}</span>
            <span class="p">];</span>
        <span class="kd">var</span> <span class="nx">shapeSvg</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">insert</span><span class="p">(</span><span class="s2">&quot;polygon&quot;</span><span class="p">,</span> <span class="s2">&quot;:first-child&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;points&quot;</span><span class="p">,</span> <span class="nx">points</span><span class="p">.</span><span class="nx">map</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">x</span> <span class="o">+</span> <span class="s2">&quot;,&quot;</span> <span class="o">+</span> <span class="nx">d</span><span class="p">.</span><span class="nx">y</span><span class="p">;</span>
            <span class="p">}).</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot; &quot;</span><span class="p">))</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;rx&quot;</span><span class="p">,</span> <span class="mi">5</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;ry&quot;</span><span class="p">,</span> <span class="mi">5</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;transform&quot;</span><span class="p">,</span> <span class="s2">&quot;translate(&quot;</span> <span class="o">+</span> <span class="p">(</span><span class="o">-</span><span class="nx">s</span> <span class="o">/</span> <span class="mi">2</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;,&quot;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">s</span> <span class="o">*</span> <span class="mi">2</span> <span class="o">/</span> <span class="mi">4</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span><span class="p">);</span>
        <span class="nx">node</span><span class="p">.</span><span class="nx">intersect</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">point</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">return</span> <span class="nx">dagreD3</span><span class="p">.</span><span class="nx">intersect</span><span class="p">.</span><span class="nx">polygon</span><span class="p">(</span><span class="nx">node</span><span class="p">,</span> <span class="nx">points</span><span class="p">,</span> <span class="nx">point</span><span class="p">);</span>
        <span class="p">};</span>
        <span class="k">return</span> <span class="nx">shapeSvg</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-28" id="section-28">&#182;</a>
</div>
<p>Add custom shape for box with inverted arrow on left side</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">render</span><span class="p">.</span><span class="nx">shapes</span><span class="p">().</span><span class="nx">rect_left_inv_arrow</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">parent</span><span class="p">,</span> <span class="nx">bbox</span><span class="p">,</span> <span class="nx">node</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">w</span> <span class="o">=</span> <span class="nx">bbox</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span>
            <span class="nx">h</span> <span class="o">=</span> <span class="nx">bbox</span><span class="p">.</span><span class="nx">height</span><span class="p">,</span>
            <span class="nx">points</span> <span class="o">=</span> <span class="p">[</span>
                <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="o">-</span><span class="nx">h</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="mi">0</span><span class="p">},</span>
                <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="nx">w</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="mi">0</span><span class="p">},</span>
                <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="nx">w</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="o">-</span><span class="nx">h</span><span class="p">},</span>
                <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="o">-</span><span class="nx">h</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="o">-</span><span class="nx">h</span><span class="p">},</span>
                <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="o">-</span><span class="nx">h</span><span class="o">/</span><span class="mi">2</span><span class="p">},</span>
            <span class="p">];</span>
        <span class="kd">var</span> <span class="nx">shapeSvg</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">insert</span><span class="p">(</span><span class="s2">&quot;polygon&quot;</span><span class="p">,</span> <span class="s2">&quot;:first-child&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;points&quot;</span><span class="p">,</span> <span class="nx">points</span><span class="p">.</span><span class="nx">map</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">x</span> <span class="o">+</span> <span class="s2">&quot;,&quot;</span> <span class="o">+</span> <span class="nx">d</span><span class="p">.</span><span class="nx">y</span><span class="p">;</span>
            <span class="p">}).</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot; &quot;</span><span class="p">))</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;transform&quot;</span><span class="p">,</span> <span class="s2">&quot;translate(&quot;</span> <span class="o">+</span> <span class="p">(</span><span class="o">-</span><span class="nx">w</span> <span class="o">/</span> <span class="mi">2</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;,&quot;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">h</span> <span class="o">*</span> <span class="mi">2</span> <span class="o">/</span> <span class="mi">4</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span><span class="p">);</span>
        <span class="nx">node</span><span class="p">.</span><span class="nx">intersect</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">point</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">return</span> <span class="nx">dagreD3</span><span class="p">.</span><span class="nx">intersect</span><span class="p">.</span><span class="nx">polygon</span><span class="p">(</span><span class="nx">node</span><span class="p">,</span> <span class="nx">points</span><span class="p">,</span> <span class="nx">point</span><span class="p">);</span>
        <span class="p">};</span>
        <span class="k">return</span> <span class="nx">shapeSvg</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-29" id="section-29">&#182;</a>
</div>
<p>Add custom shape for box with inverted arrow on right side</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">render</span><span class="p">.</span><span class="nx">shapes</span><span class="p">().</span><span class="nx">rect_right_inv_arrow</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">parent</span><span class="p">,</span> <span class="nx">bbox</span><span class="p">,</span> <span class="nx">node</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">w</span> <span class="o">=</span> <span class="nx">bbox</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span>
            <span class="nx">h</span> <span class="o">=</span> <span class="nx">bbox</span><span class="p">.</span><span class="nx">height</span><span class="p">,</span>
            <span class="nx">points</span> <span class="o">=</span> <span class="p">[</span>
                <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="mi">0</span><span class="p">},</span>
                <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="nx">w</span><span class="o">+</span><span class="nx">h</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="mi">0</span><span class="p">},</span>
                <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="nx">w</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="o">-</span><span class="nx">h</span><span class="o">/</span><span class="mi">2</span><span class="p">},</span>
                <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="nx">w</span><span class="o">+</span><span class="nx">h</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="o">-</span><span class="nx">h</span><span class="p">},</span>
                <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">y</span><span class="o">:</span> <span class="o">-</span><span class="nx">h</span><span class="p">},</span>
            <span class="p">];</span>
        <span class="kd">var</span> <span class="nx">shapeSvg</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">insert</span><span class="p">(</span><span class="s2">&quot;polygon&quot;</span><span class="p">,</span> <span class="s2">&quot;:first-child&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;points&quot;</span><span class="p">,</span> <span class="nx">points</span><span class="p">.</span><span class="nx">map</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">x</span> <span class="o">+</span> <span class="s2">&quot;,&quot;</span> <span class="o">+</span> <span class="nx">d</span><span class="p">.</span><span class="nx">y</span><span class="p">;</span>
            <span class="p">}).</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot; &quot;</span><span class="p">))</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;transform&quot;</span><span class="p">,</span> <span class="s2">&quot;translate(&quot;</span> <span class="o">+</span> <span class="p">(</span><span class="o">-</span><span class="nx">w</span> <span class="o">/</span> <span class="mi">2</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;,&quot;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">h</span> <span class="o">*</span> <span class="mi">2</span> <span class="o">/</span> <span class="mi">4</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span><span class="p">);</span>
        <span class="nx">node</span><span class="p">.</span><span class="nx">intersect</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">point</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">return</span> <span class="nx">dagreD3</span><span class="p">.</span><span class="nx">intersect</span><span class="p">.</span><span class="nx">polygon</span><span class="p">(</span><span class="nx">node</span><span class="p">,</span> <span class="nx">points</span><span class="p">,</span> <span class="nx">point</span><span class="p">);</span>
        <span class="p">};</span>
        <span class="k">return</span> <span class="nx">shapeSvg</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-30" id="section-30">&#182;</a>
</div>
<p>Add our custom arrow - an empty arrowhead</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">render</span><span class="p">.</span><span class="nx">arrows</span><span class="p">().</span><span class="nx">none</span> <span class="o">=</span> <span class="kd">function</span> <span class="nx">normal</span><span class="p">(</span><span class="nx">parent</span><span class="p">,</span> <span class="nx">id</span><span class="p">,</span> <span class="nx">edge</span><span class="p">,</span> <span class="nx">type</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">marker</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;marker&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;id&quot;</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="s2">&quot;viewBox&quot;</span><span class="p">,</span> <span class="s2">&quot;0 0 10 10&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;refX&quot;</span><span class="p">,</span> <span class="mi">9</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;refY&quot;</span><span class="p">,</span> <span class="mi">5</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;markerUnits&quot;</span><span class="p">,</span> <span class="s2">&quot;strokeWidth&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;markerWidth&quot;</span><span class="p">,</span> <span class="mi">8</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;markerHeight&quot;</span><span class="p">,</span> <span class="mi">6</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;orient&quot;</span><span class="p">,</span> <span class="s2">&quot;auto&quot;</span><span class="p">);</span>

        <span class="kd">var</span> <span class="nx">path</span> <span class="o">=</span> <span class="nx">marker</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;path&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;d&quot;</span><span class="p">,</span> <span class="s2">&quot;M 0 0 L 0 0 L 0 0 z&quot;</span><span class="p">);</span>
        <span class="nx">dagreD3</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">applyStyle</span><span class="p">(</span><span class="nx">path</span><span class="p">,</span> <span class="nx">edge</span><span class="p">[</span><span class="nx">type</span> <span class="o">+</span> <span class="s2">&quot;Style&quot;</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-31" id="section-31">&#182;</a>
</div>
<p>Set up an SVG group so that we can translate the final graph.</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="kd">var</span> <span class="nx">svg</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="s2">&quot;#&quot;</span> <span class="o">+</span> <span class="nx">id</span><span class="p">);</span>
    <span class="nx">svgGroup</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="s2">&quot;#&quot;</span> <span class="o">+</span> <span class="nx">id</span> <span class="o">+</span> <span class="s2">&quot; g&quot;</span><span class="p">);</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-32" id="section-32">&#182;</a>
</div>
<p>Run the renderer. This is what draws the final graph.</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">render</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="s2">&quot;#&quot;</span> <span class="o">+</span> <span class="nx">id</span> <span class="o">+</span> <span class="s2">&quot; g&quot;</span><span class="p">),</span> <span class="nx">g</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">svgb</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">&quot;#&quot;</span> <span class="o">+</span> <span class="nx">id</span><span class="p">);</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-33" id="section-33">&#182;</a>
</div>
<div class="dox">
  <div class="summary"><p>var xPos = document.querySelectorAll(&#39;.clusters rect&#39;)[0].x.baseVal.value;
var width = document.querySelectorAll(&#39;.clusters rect&#39;)[0].width.baseVal.value;
var cluster = d3.selectAll(&#39;.cluster&#39;);
var te = cluster.append(&#39;text&#39;);
te.attr(&#39;x&#39;, xPos+width/2);
te.attr(&#39;y&#39;, 12);
//te.stroke(&#39;black&#39;);
te.attr(&#39;id&#39;, &#39;apa12&#39;);
te.style(&#39;text-anchor&#39;, &#39;middle&#39;);
te.text(&#39;Title for cluster&#39;);</p>

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

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="k">if</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">useMaxWidth</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-34" id="section-34">&#182;</a>
</div>
<p>Center the graph</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="nx">svg</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;height&quot;</span><span class="p">,</span> <span class="s1">&#39;100%&#39;</span><span class="p">);</span>
        <span class="nx">svg</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;width&quot;</span><span class="p">,</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">width</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">&#182;</a>
</div>
<p>svg.attr(&quot;viewBox&quot;, svgb.getBBox().x + &#39; 0 &#39;+ g.graph().width+&#39; &#39;+ g.graph().height);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="nx">svg</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;viewBox&quot;</span><span class="p">,</span> <span class="s1">&#39;0 0 &#39;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">g</span><span class="p">.</span><span class="nx">graph</span><span class="p">().</span><span class="nx">width</span> <span class="o">+</span> <span class="mi">20</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39; &#39;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">g</span><span class="p">.</span><span class="nx">graph</span><span class="p">().</span><span class="nx">height</span> <span class="o">+</span> <span class="mi">20</span><span class="p">));</span>
        <span class="nx">svg</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;style&#39;</span><span class="p">,</span> <span class="s1">&#39;max-width:&#39;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">g</span><span class="p">.</span><span class="nx">graph</span><span class="p">().</span><span class="nx">width</span> <span class="o">+</span> <span class="mi">20</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39;px;&#39;</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-36" id="section-36">&#182;</a>
</div>
<p>Center the graph</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="nx">svg</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;height&quot;</span><span class="p">,</span> <span class="nx">g</span><span class="p">.</span><span class="nx">graph</span><span class="p">().</span><span class="nx">height</span> <span class="p">);</span>
        <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">width</span> <span class="o">===</span> <span class="s1">&#39;undefined&#39;</span><span class="p">){</span>
            <span class="nx">svg</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;width&quot;</span><span class="p">,</span> <span class="nx">g</span><span class="p">.</span><span class="nx">graph</span><span class="p">().</span><span class="nx">width</span> <span class="p">);</span>
        <span class="p">}</span><span class="k">else</span><span class="p">{</span>
            <span class="nx">svg</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;width&quot;</span><span class="p">,</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">width</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-37" id="section-37">&#182;</a>
</div>
<p>svg.attr(&quot;viewBox&quot;, svgb.getBBox().x + &#39; 0 &#39;+ g.graph().width+&#39; &#39;+ g.graph().height);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="nx">svg</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;viewBox&quot;</span><span class="p">,</span>  <span class="s1">&#39;0 0 &#39;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">g</span><span class="p">.</span><span class="nx">graph</span><span class="p">().</span><span class="nx">width</span><span class="o">+</span><span class="mi">20</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39; &#39;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">g</span><span class="p">.</span><span class="nx">graph</span><span class="p">().</span><span class="nx">height</span><span class="o">+</span><span class="mi">20</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-38" id="section-38">&#182;</a>
</div>
<p>Index nodes</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">graph</span><span class="p">.</span><span class="nx">indexNodes</span><span class="p">(</span><span class="s1">&#39;sunGraph&#39;</span><span class="o">+</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">&lt;</span><span class="nx">subGraphs</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="kd">var</span> <span class="nx">pos</span> <span class="o">=</span> <span class="nx">graph</span><span class="p">.</span><span class="nx">getDepthFirstPos</span><span class="p">(</span><span class="nx">i</span><span class="p">);</span>
        <span class="nx">subG</span> <span class="o">=</span> <span class="nx">subGraphs</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>

        <span class="k">if</span> <span class="p">(</span><span class="nx">subG</span><span class="p">.</span><span class="nx">title</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">clusterRects</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;#&#39;</span> <span class="o">+</span> <span class="nx">id</span> <span class="o">+</span> <span class="s1">&#39; #&#39;</span> <span class="o">+</span> <span class="nx">subG</span><span class="p">.</span><span class="nx">id</span> <span class="o">+</span> <span class="s1">&#39; rect&#39;</span><span class="p">);</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-39" id="section-39">&#182;</a>
</div>
<p>log.debug(&#39;looking up: #&#39; + id + &#39; #&#39; + subG.id)</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="kd">var</span> <span class="nx">clusterEl</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;#&#39;</span> <span class="o">+</span> <span class="nx">id</span> <span class="o">+</span> <span class="s1">&#39; #&#39;</span> <span class="o">+</span> <span class="nx">subG</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>

            <span class="kd">var</span> <span class="nx">xPos</span> <span class="o">=</span> <span class="nx">clusterRects</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">x</span><span class="p">.</span><span class="nx">baseVal</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
            <span class="kd">var</span> <span class="nx">yPos</span> <span class="o">=</span> <span class="nx">clusterRects</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">y</span><span class="p">.</span><span class="nx">baseVal</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
            <span class="kd">var</span> <span class="nx">width</span> <span class="o">=</span> <span class="nx">clusterRects</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">width</span><span class="p">.</span><span class="nx">baseVal</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
            <span class="kd">var</span> <span class="nx">cluster</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="nx">clusterEl</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span>
            <span class="kd">var</span> <span class="nx">te</span> <span class="o">=</span> <span class="nx">cluster</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">&#39;text&#39;</span><span class="p">);</span>
            <span class="nx">te</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;x&#39;</span><span class="p">,</span> <span class="nx">xPos</span> <span class="o">+</span> <span class="nx">width</span> <span class="o">/</span> <span class="mi">2</span><span class="p">);</span>
            <span class="nx">te</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;y&#39;</span><span class="p">,</span> <span class="nx">yPos</span> <span class="o">+</span> <span class="mi">14</span><span class="p">);</span>
            <span class="nx">te</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;fill&#39;</span><span class="p">,</span> <span class="s1">&#39;black&#39;</span><span class="p">);</span>
            <span class="nx">te</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;stroke&#39;</span><span class="p">,</span> <span class="s1">&#39;none&#39;</span><span class="p">);</span>
            <span class="nx">te</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="o">+</span> <span class="s1">&#39;Text&#39;</span><span class="p">);</span>
            <span class="nx">te</span><span class="p">.</span><span class="nx">style</span><span class="p">(</span><span class="s1">&#39;text-anchor&#39;</span><span class="p">,</span> <span class="s1">&#39;middle&#39;</span><span class="p">);</span>

            <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">subG</span><span class="p">.</span><span class="nx">title</span> <span class="o">===</span> <span class="s1">&#39;undefined&#39;</span><span class="p">){</span>
                <span class="nx">te</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="s1">&#39;Undef&#39;</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-40" id="section-40">&#182;</a>
</div>
<p>te.text(subGraphs[subGraphs.length-i-1].title);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="nx">te</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nx">subG</span><span class="p">.</span><span class="nx">title</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>
  </tbody>
</table>
  </div>
</body>
</html>