mermaid

<!DOCTYPE html> <html> <head> <title>main.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="../doc-style.css" /> <script src="../doc-filelist.js"></script> <script> var relativeDir = "../", thisFile = "Users/knut/Documents/source/mermaid/src/main.js", defaultSidebar = true; </script> <script src="../doc-script.js"></script> <script src="../mermaid.js"></script> <link rel="stylesheet" href="../mermaid.css" /> </head> <body> <div id="sidebar_wrapper"> <div id="sidebar_switch"> Files Headings </div> <div id="tree"></div> <div id="headings"> <div class="heading h1"> <a href="#main.js">main.js</a> </div> </div> </div> <div id="sidebar-toggle"></div> <div id="container"><div class="background highlight"></div> <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="docs"> <div class="pilwrap" id="main.js"> <h1> <a href="#main.js" name="main.js" class="pilcrow">¶</a>main.js </h1> </div> </td> <td class="code highlight"></td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1" id="section-1">¶</a> </div> </td> <td class="code highlight"><div class="highlight"><pre>var graph = require('./diagrams/flowchart/graphDb'); var flow = require('./diagrams/flowchart/parser/flow'); var utils = require('./utils'); var flowRenderer = require('./diagrams/flowchart/flowRenderer'); var seq = require('./diagrams/sequenceDiagram/sequenceRenderer'); var info = require('./diagrams/example/exampleRenderer'); var he = require('he'); var infoParser = require('./diagrams/example/parser/example'); var flowParser = require('./diagrams/flowchart/parser/flow'); var dotParser = require('./diagrams/flowchart/parser/dot'); var sequenceParser = require('./diagrams/sequenceDiagram/parser/sequenceDiagram'); var sequenceDb = require('./diagrams/sequenceDiagram/sequenceDb'); var infoDb = require('./diagrams/example/exampleDb'); var gantt = require('./diagrams/gantt/ganttRenderer'); var ganttParser = require('./diagrams/gantt/parser/gantt'); var ganttDb = require('./diagrams/gantt/ganttDb'); var d3 = require('./d3'); var nextId = 0; var log = require('./logger').create(); </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">Function that parses a mermaid diagram defintion. If parsing fails the parseError callback is called and an error is thrown and </div> <div class="body"> </div> <div class="details"> <div class="dox_tag_title">Params</div> <div class="dox_tag_detail"> text </div> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> var parse = function(text){ var graphType = utils.detectType(text); var parser; switch(graphType){ case 'graph': parser = flowParser; parser.parser.yy = graph; break; case 'dotGraph': parser = dotParser; parser.parser.yy = graph; break; case 'sequenceDiagram': parser = sequenceParser; parser.parser.yy = sequenceDb; break; case 'info': parser = infoParser; parser.parser.yy = infoDb; break; case 'gantt': parser = ganttParser; parser.parser.yy = ganttDb; break; } try{ parser.parse(text); return true; } catch(err){ return false; } }; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3" id="section-3">¶</a> </div> <div class="dox"> <div class="summary">Function that goes through the document to find the chart definitions in there and render them. </div> <div class="body">The function tags the processed attributes with the attribute data-processed and ignores found elements with the attribute already set. This way the init function can be triggered several times. Optionally, <code>init</code> can accept in the second argument one of the following: <ul> <li>a DOM Node</li> <li>an array of DOM nodes (as would come from a jQuery selector)</li> <li>a W3C selector, a la <code>.mermaid</code></li> </ul> <div class="highlight"><pre><code>graph LR; a(Find elements)--b{Processed}; b--|Yes|c(Leave element); c--|No |d(Transform); </code></pre></div> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4" id="section-4">¶</a> </div> <div class="dox"> <div class="summary">Renders the mermaid diagrams </div> <div class="body"> </div> <div class="details"> <div class="dox_tag_title">*</div> <div class="dox_tag_detail"> param nodes- a css selector or an array of nodes </div> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> var init = function () { var nodes; if(arguments.length === 2){ </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5" id="section-5">¶</a> </div> sequence config was passed as #1 </td> <td class="code highlight"><div class="highlight"><pre> if(typeof arguments[0] !== 'undefined'){ mermaid.sequenceConfig = arguments[0]; } nodes = arguments[1]; } else{ nodes = arguments[0]; } nodes = nodes === undefined ? document.querySelectorAll('.mermaid') : typeof nodes === "string" ? document.querySelectorAll(nodes) : nodes instanceof Node ? [nodes] </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6" id="section-6">¶</a> </div> Last case - sequence config was passed pick next </td> <td class="code highlight"><div class="highlight"><pre> : nodes; var i; log.debug('Found ',nodes.length,' nodes'); for (i = 0; i < nodes.length; i++) { var element = nodes[i]; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7" id="section-7">¶</a> </div> Check if previously processed </td> <td class="code highlight"><div class="highlight"><pre> if(!element.getAttribute("data-processed")) { element.setAttribute("data-processed", true); } else { continue; } var id = 'mermaidChart' + nextId++; var txt = element.innerHTML; txt = txt.replace(/>/g,'&gt;'); txt = txt.replace(/</g,'&lt;'); txt = he.decode(txt).trim(); element.innerHTML = '<svg id="' + id + '" width="100%" xmlns="http://www.w3.org/2000/svg">' + '<g />' + '</svg>'; var graphType = utils.detectType(txt); var classes = {}; switch(graphType){ case 'graph': classes = flowRenderer.getClasses(txt, false); if(typeof mermaid.flowchartConfig === 'object'){ flowRenderer.setConf(mermaid.flowchartConfig); } flowRenderer.draw(txt, id, false); utils.cloneCssStyles(element.firstChild, classes); graph.bindFunctions(); break; case 'dotGraph': classes = flowRenderer.getClasses(txt, true); flowRenderer.draw(txt, id, true); utils.cloneCssStyles(element.firstChild, classes); break; case 'sequenceDiagram': if(typeof mermaid.sequenceConfig === 'object'){ seq.setConf(mermaid.sequenceConfig); } seq.draw(txt,id); utils.cloneCssStyles(element.firstChild, []); break; case 'gantt': if(typeof mermaid.ganttConfig === 'object'){ gantt.setConf(mermaid.ganttConfig); } gantt.draw(txt,id); utils.cloneCssStyles(element.firstChild, []); break; case 'info': info.draw(txt,id,exports.version()); utils.cloneCssStyles(element.firstChild, []); break; } } }; exports.tester = function(){}; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8" id="section-8">¶</a> </div> <div class="dox"> <div class="summary">Function returning version information </div> <div class="body"> </div> <div class="details"> <div class="dox_tag_title">Returns</div> <div class="dox_tag_detail"> string A string containing the version info </div> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> exports.version = function(){ return require('../package.json').version; }; var equals = function (val, variable){ if(typeof variable === 'undefined'){ return false; } else{ return (val === variable); } }; var render = function(id, txt,cb){ </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9" id="section-9">¶</a> </div> <div class="highlight"><pre><code> var element = doc.createElement('svg'); element.setAttribute('id',id); element.setAttribute('width','100%'); element.setAttribute('xmlns','http://www.w3.org/2000/svg'); element.innerHTML = 'g /'; </code></pre></div> </td> <td class="code highlight"><div class="highlight"><pre> </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10" id="section-10">¶</a> </div> var element = doc.createElement('div'); element.setAttribute('id','d'+id); element.innerHTML = '<svg id="' + id + '" width="100%" xmlns="http://www.w3.org/2000/svg">' + '<g />' + '</svg>'; document.body.appendChild(element); </td> <td class="code highlight"><div class="highlight"><pre> d3.select('body').append('div') .attr('id', 'd'+id) .append('svg') .attr('id', id) .attr('width','100%') .attr('xmlns','http://www.w3.org/2000/svg') .append('g'); log.debug(d3.select('#d'+id).node().innerHTML); var element = d3.select('#d'+id).node(); var graphType = utils.detectType(txt); var classes = {}; switch(graphType){ case 'graph': classes = flowRenderer.getClasses(txt, false); if(typeof mermaid.flowchartConfig === 'object'){ flowRenderer.setConf(mermaid.flowchartConfig); } flowRenderer.draw(txt, id, false); utils.cloneCssStyles(element.firstChild, classes); graph.bindFunctions(); break; case 'dotGraph': classes = flowRenderer.getClasses(txt, true); flowRenderer.draw(txt, id, true); utils.cloneCssStyles(element.firstChild, classes); break; case 'sequenceDiagram': if(typeof mermaid.sequenceConfig === 'object'){ seq.setConf(mermaid.sequenceConfig); } seq.draw(txt,id); utils.cloneCssStyles(element.firstChild, []); break; case 'gantt': if(typeof mermaid.ganttConfig === 'object'){ gantt.setConf(mermaid.ganttConfig); } gantt.draw(txt,id); utils.cloneCssStyles(element.firstChild, []); break; case 'info': info.draw(txt,id,exports.version()); utils.cloneCssStyles(element.firstChild, []); break; } </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11" id="section-11">¶</a> </div> log.debug(document.body.innerHTML); </td> <td class="code highlight"><div class="highlight"><pre> cb(d3.select('#d'+id).node().innerHTML); d3.select('#d'+id).node().remove(); }; exports.render = function(id, text){ var callback = function(svgText){ log.debug(svgText); }; if(typeof document === 'undefined'){ </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12" id="section-12">¶</a> </div> jsdom = require('jsdom').jsdom; log.debug(jsdom); </td> <td class="code highlight"><div class="highlight"><pre> </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13" id="section-13">¶</a> </div> htmlStub = '<html><head></head><body><div class="mermaid">'+text+'</div><script src="dist/mermaid.full.js"></script><script>var mermaid_config = {startOnLoad:true}</script></body></html>'; </td> <td class="code highlight"><div class="highlight"><pre> htmlStub = '<html><head></head><body></body></html>'; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14" id="section-14">¶</a> </div> <div class="highlight"><pre><code> // html file skull with a container div for the d3 dataviz </code></pre></div> pass the html stub to jsDom <div class="dox"> <div class="summary">jsdom.env({ features : { QuerySelectorAll : true }, html : htmlStub, done : function(errors, win) { // process the html document, like if we were at client side // code to generate the dataviz and process the resulting html file to be added here //var d3 = require('d3'); //log.debug('Here we go: '+JSON.stringify(d3)); </div> <div class="body">global.document = win.document; global.window = win; var element = win.document.createElement('div'); element.setAttribute('id','did'); //document. log.debug(document.body.innerHTML); //log.debug('Element:',element); //log.debug(win); //mermaid.init(); //render(win.document, 'myId', text, callback); } }); </div> </div> var jsdom = require('jsdom').jsdom; global.document = jsdom(htmlStub); global.window = document.parentWindow; </td> <td class="code highlight"><div class="highlight"><pre> render(id, text, callback); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15" id="section-15">¶</a> </div> var element = win.document.createElement('div'); element.setAttribute('id','did'); document. </td> <td class="code highlight"><div class="highlight"><pre> } else{ </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16" id="section-16">¶</a> </div> In browser </td> <td class="code highlight"><div class="highlight"><pre> render( id, text, callback); } }; global.mermaid = { startOnLoad: true, htmlLabels: true, init: function(sequenceConfig, nodes) { init.apply(null, arguments); }, version: function() { return exports.version(); }, getParser: function() { return flow.parser; }, parse: function(text) { return parse(text); }, parseError: function(err, hash) { log.debug('Mermaid Syntax error:'); log.debug(err); }, render:function(id, text){ return exports.render(id, text); } }; exports.contentLoaded = function(){ </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17" id="section-17">¶</a> </div> Check state of start config mermaid namespace log.debug('global.mermaid.startOnLoad',global.mermaid.startOnLoad); log.debug('mermaid_config',mermaid_config); </td> <td class="code highlight"><div class="highlight"><pre> if (typeof mermaid_config !== 'undefined') { if (equals(false, mermaid_config.htmlLabels)) { global.mermaid.htmlLabels = false; } } if(glo