mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.
751 lines (646 loc) • 85.6 kB
HTML
<!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">¶</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">¶</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">'./graphDb'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">flow</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./parser/flow'</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">'./parser/dot'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">d3</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'../../d3'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">dagreD3</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./dagre-d3'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">log</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'../../logger'</span><span class="p">).</span><span class="nx">create</span><span class="p">();</span>
<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"><</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">¶</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">¶</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"><</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">'undefined'</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">';'</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">¶</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">¶</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">''</span><span class="p">;</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-6" id="section-6">¶</a>
</div>
<p>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">></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">" "</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">¶</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">''</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">¶</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">¶</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">'undefined'</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">''</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">'html'</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">/<br>/g</span><span class="p">,</span> <span class="s2">"\n"</span><span class="p">);</span>
<span class="nx">labelTypeStr</span> <span class="o">=</span> <span class="s1">'text'</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">''</span><span class="p">;</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-10" id="section-10">¶</a>
</div>
<p>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">'round'</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">'rect'</span><span class="p">;</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s1">'square'</span><span class="o">:</span>
<span class="nx">_shape</span> <span class="o">=</span> <span class="s1">'rect'</span><span class="p">;</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s1">'diamond'</span><span class="o">:</span>
<span class="nx">_shape</span> <span class="o">=</span> <span class="s1">'question'</span><span class="p">;</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s1">'odd'</span><span class="o">:</span>
<span class="nx">_shape</span> <span class="o">=</span> <span class="s1">'rect_left_inv_arrow'</span><span class="p">;</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s1">'odd_right'</span><span class="o">:</span>
<span class="nx">_shape</span> <span class="o">=</span> <span class="s1">'rect_left_inv_arrow'</span><span class="p">;</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s1">'circle'</span><span class="o">:</span>
<span class="nx">_shape</span> <span class="o">=</span> <span class="s1">'circle'</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">'rect'</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">¶</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">¶</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">'undefined'</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">';'</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">¶</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">'arrow_open'</span><span class="p">){</span>
<span class="nx">aHead</span> <span class="o">=</span> <span class="s1">'none'</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">'normal'</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">''</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">'undefined'</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">';'</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">'normal'</span><span class="o">:</span>
<span class="nx">style</span> <span class="o">=</span> <span class="s1">'fill:none'</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">'undefined'</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">'dotted'</span><span class="o">:</span>
<span class="nx">style</span> <span class="o">=</span> <span class="s1">'stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;'</span><span class="p">;</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s1">'thick'</span><span class="o">:</span>
<span class="nx">style</span> <span class="o">=</span> <span class="s1">'stroke: #333; stroke-width: 3.5px;fill:none'</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">¶</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">'undefined'</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">'undefined'</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">"fill: #333"</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">¶</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">/<br>/g</span><span class="p">,</span> <span class="s2">"\n"</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">'undefined'</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">"html"</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">'c'</span><span class="p">,</span> <span class="nx">label</span><span class="o">:</span> <span class="s1">'<span style="background:#e8e8e8">'</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">'</span>'</span><span class="p">,</span> <span class="nx">arrowheadStyle</span><span class="o">:</span> <span class="s2">"fill: #333"</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">"text"</span><span class="p">,</span> <span class="nx">style</span><span class="o">:</span> <span class="s2">"stroke: #333; stroke-width: 1.5px;fill:none"</span><span class="p">,</span> <span class="nx">labelpos</span><span class="o">:</span><span class="s1">'c'</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">"fill: #333"</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">"text"</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">"fill: #333"</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">¶</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">¶</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">''</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">¶</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">'undefined'</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">'default'</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">'fill:#ffa'</span><span class="p">,</span><span class="s1">'stroke:#666'</span><span class="p">,</span><span class="s1">'stroke-width:3px'</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">'rx:4px'</span><span class="p">,</span><span class="s1">'fill: rgb(255, 255, 222)'</span><span class="p">,</span><span class="s1">'rx: 4px'</span><span class="p">,</span><span class="s1">'stroke: rgb(170, 170, 51)'</span><span class="p">,</span><span class="s1">'stroke-width: 1px'</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">'fill:#000'</span><span class="p">,</span><span class="s1">'stroke:none'</span><span class="p">,</span><span class="s1">'font-weight:300'</span><span class="p">,</span><span class="s1">'font-family:"Helvetica Neue",Helvetica,Arial,sans-serf'</span><span class="p">,</span><span class="s1">'font-size:14px'</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">'fill:#000'</span><span class="p">,</span><span class="s1">'stroke:none'</span><span class="p">,</span><span class="s1">'font-weight:300'</span><span class="p">,</span><span class="s1">'font-family:"Helvetica Neue",Helvetica,Arial,sans-serf'</span><span class="p">,</span><span class="s1">'font-size:14px'</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">¶</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">'Drawing flowchart'</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">¶</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">¶</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">'undefined'</span><span class="p">){</span>
<span class="nx">dir</span><span class="o">=</span><span class="s1">'TD'</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">¶</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">>=</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">¶</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">¶</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">>=</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">'cluster'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s1">'text'</span><span class="p">);</span>
<span class="k">for</span><span class="p">(</span><span class="nx">j</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">j</span><span class="o"><</span><span class="nx">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">¶</a>
</div>
<p>log.debug('Setting node',subG.nodes[j],' to subgraph '+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">¶</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">¶</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</