mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.
181 lines (159 loc) • 8.42 kB
HTML
<html>
<head>
<title>exampleRenderer.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/example/exampleRenderer.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="#exampleRenderer.js">exampleRenderer.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="exampleRenderer.js">
<h1>
<a href="#exampleRenderer.js" name="exampleRenderer.js" class="pilcrow">¶</a>exampleRenderer.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">db</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./exampleDb'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">exampleParser</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./parser/example.js'</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">log</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'../../logger'</span><span class="p">).</span><span class="nx">create</span><span class="p">();</span>
</pre></div>
</td>
</tr>
<tr>
<td class="docs">
<div class="pilwrap">
<a class="pilcrow" href="#section-2" id="section-2">¶</a>
</div>
<div class="dox">
<div class="summary"><p>Draws a an info picture 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">txt</span><span class="p">,</span> <span class="nx">id</span><span class="p">,</span> <span class="nx">ver</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">parser</span> <span class="o">=</span> <span class="nx">exampleParser</span><span class="p">.</span><span class="nx">parser</span><span class="p">;</span>
<span class="nx">parser</span><span class="p">.</span><span class="nx">yy</span> <span class="o">=</span> <span class="nx">db</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>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">txt</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>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">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="s1">'#'</span><span class="o">+</span><span class="nx">id</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">textstring</span> <span class="o">=</span> <span class="s2">"mermaid!"</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">g</span> <span class="o">=</span> <span class="nx">svg</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">"g"</span><span class="p">);</span>
<span class="nx">g</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">"text"</span><span class="p">)</span> <span class="c1">// text label for the x axis</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"x"</span><span class="p">,</span> <span class="mi">100</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"y"</span><span class="p">,</span> <span class="mi">40</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'class'</span><span class="p">,</span><span class="s1">'version'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'font-size'</span><span class="p">,</span><span class="s1">'32px'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">style</span><span class="p">(</span><span class="s2">"text-anchor"</span><span class="p">,</span> <span class="s2">"middle"</span><span class="p">)</span>
<span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="s1">'mermaid '</span><span class="o">+</span> <span class="nx">ver</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>var box = exports.bounds.getBounds();</p>
</div>
<div class="body"><p>var height = box.stopy-box.starty+2<em>conf.diagramMarginY;
var width = box.stopx-box.startx+2</em>conf.diagramMarginX; </p>
</div>
</div>
</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">"height"</span><span class="p">,</span><span class="mi">100</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">"width"</span><span class="p">,</span> <span class="mi">400</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>svg.attr("viewBox", '0 0 300 150');</p>
</td>
<td class="code highlight"><div class="highlight"><pre>
<span class="p">};</span>
</pre></div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>