mermaid

<!DOCTYPE html> <html> <head> <title>utils.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/utils.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="#utils.js">utils.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="utils.js"> <h1> <a href="#utils.js" name="utils.js" class="pilcrow">¶</a>utils.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">Created by knut on 14-11-23. </div> <div class="body"> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre>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"> </div> <div class="body"> </div> <div class="details"> <div class="dox_tag_title">function</div> <div class="dox_tag_detail"> detectType Detects the type of the graph text. <script>mermaid.initialize({startOnLoad:true});</script><div class="mermaid">graph LR a-->b b-->c c-->d d-->e e-->f f-->g g-->h</div> </div> <div class="dox_tag_title">Params</div> <div class="dox_tag_detail"> text string The text defining the graph </div> <div class="dox_tag_detail"> text string The second text defining the graph </div> <div class="dox_tag_title">Returns</div> <div class="dox_tag_detail"> string A graph definition key </div> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> module.exports.detectType = function(text,a){ if(text.match(/^\s*sequenceDiagram/)){ return "sequenceDiagram"; } if(text.match(/^\s*sequence/)){ </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"><div class="mermaid">graph TB a-->b b-->c</div> </div> <div class="body"> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> return "sequence"; } if(text.match(/^\s*digraph/)) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4" id="section-4">¶</a> </div> log.debug('Detected dot syntax'); </td> <td class="code highlight"><div class="highlight"><pre> return "dotGraph"; } if(text.match(/^\s*info/)) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5" id="section-5">¶</a> </div> log.debug('Detected info syntax'); </td> <td class="code highlight"><div class="highlight"><pre> return "info"; } if(text.match(/^\s*gantt/)) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6" id="section-6">¶</a> </div> log.debug('Detected info syntax'); </td> <td class="code highlight"><div class="highlight"><pre> return "gantt"; } return "graph"; }; </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">Copies all relevant CSS content into the graph SVG. This allows the SVG to be copied as is while keeping class based styling </div> <div class="body"> </div> <div class="details"> <div class="dox_tag_title">Params</div> <div class="dox_tag_detail"> svg element The root element of the SVG </div> <div class="dox_tag_detail"> Hash object table of class definitions from the graph definition </div> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> module.exports.cloneCssStyles = function(svg, classes){ var usedStyles = ""; var sheets = document.styleSheets; for (var i = 0; i < sheets.length; i++) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8" id="section-8">¶</a> </div> Avoid multiple inclusion on pages with multiple graphs </td> <td class="code highlight"><div class="highlight"><pre> if (sheets[i].title !== 'mermaid-svg-internal-css') { try { var rules = sheets[i].cssRules; if (rules !== null) { for (var j = 0; j < rules.length; j++) { var rule = rules[j]; if (typeof(rule.style) !== 'undefined') { var elems; elems = svg.querySelectorAll(rule.selectorText); if (elems.length > 0) { usedStyles += rule.selectorText + " { " + rule.style.cssText + " }\n"; } } } } } catch(err) { if(typeof console !== 'undefined'){ if(console.warn !== 'undefined'){ if(rule !== 'undefined'){ console.warn('Invalid CSS selector "' + rule.selectorText + '"', err); } } } } } } var defaultStyles = ""; var embeddedStyles = ""; for (var className in classes) { if (classes.hasOwnProperty(className) && typeof(className) != "undefined") { if (className === 'default') { if (classes.default.styles instanceof Array) { defaultStyles += "#" + svg.id.trim() + ' .node' + ' { ' + classes[className].styles.join("; ") + '; }\n'; } if (classes.default.nodeLabelStyles instanceof Array) { defaultStyles += "#" + svg.id.trim() + ' .node text ' + ' { ' + classes[className].nodeLabelStyles.join("; ") + '; }\n'; } if (classes.default.edgeLabelStyles instanceof Array) { defaultStyles += "#" + svg.id.trim() + ' .edgeLabel text ' + ' { ' + classes[className].edgeLabelStyles.join("; ") + '; }\n'; } if (classes.default.clusterStyles instanceof Array) { defaultStyles += "#" + svg.id.trim() + ' .cluster rect ' + ' { ' + classes[className].clusterStyles.join("; ") + '; }\n'; } } else { if (classes[className].styles instanceof Array) { embeddedStyles += "#" + svg.id.trim() + ' .' + className + ' { ' + classes[className].styles.join("; ") + '; }\n'; } } } } if (usedStyles !== "" || defaultStyles !== "" || embeddedStyles !== "") { var s = document.createElement('style'); s.setAttribute('type', 'text/css'); s.setAttribute('title', 'mermaid-svg-internal-css'); s.innerHTML = "/* <![CDATA[ */\n"; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9" id="section-9">¶</a> </div> Make this CSS local to this SVG </td> <td class="code highlight"><div class="highlight"><pre> if (defaultStyles !== "") { s.innerHTML += defaultStyles; } if (usedStyles !== "") { s.innerHTML += usedStyles; } if (embeddedStyles !== "") { s.innerHTML += embeddedStyles; } s.innerHTML += "/* ]]> */\n"; svg.insertBefore(s, svg.firstChild); } }; </pre></div> </td> </tr> </tbody> </table> </div> </body> </html>