mermaid

<!DOCTYPE html> <html> <head> <title>mermaid.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/mermaid.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="#mermaid.js">mermaid.js</a> </div> <div class="heading h2"> <a href="#init">init</a> </div> <div class="heading h2"> <a href="#version">version</a> </div> <div class="heading h2"> <a href="#initialize">initialize</a> </div> <div class="heading h2"> <a href="#parseError">parseError</a> </div> <div class="heading h2"> <a href="#contentLoaded">contentLoaded</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="mermaid.js"> <h1> <a href="#mermaid.js" name="mermaid.js" class="pilcrow">¶</a>mermaid.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> (function (root, factory) { if (typeof exports === 'object') { // CommonJS module.exports = factory(require('b')); } else if (typeof define === 'function' && define.amd) { // AMD define(['b'], function (b) { return (root.returnExportsGlobal = factory(b)); }); } else { // Global Variables root.returnExportsGlobal = factory(root.b); } }(this, function (b) { <div class="dox"> <div class="summary">Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid functionality and to render the diagrams to svg code. </div> <div class="body"> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre>var mermaidAPI = require('./mermaidAPI'); var nextId = 0; var log = require('./logger').create(); module.exports.mermaidAPI = mermaidAPI; </pre></div> </td> </tr> <tr> <td class="docs"><div class="dox"> <div class="summary"><div class="pilwrap" id="init"> <h2> <a href="#init" name="init" class="pilcrow">¶</a> init</h2> </div> 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> <script>mermaid.initialize({startOnLoad:true});</script><div class="mermaid">graph LR; a(Find elements)-->b{Processed} b-->|Yes|c(Leave element) b-->|No |d(Transform)</div>Renders the mermaid diagrams </div> <div class="details"> <div class="dox_tag_title">Params</div> <div class="dox_tag_detail"> nodes a css selector or an array of nodes </div> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> var init = function () { log.debug('Starting rendering diagrams'); var nodes; if(arguments.length >= 2){ /*! sequence config was passed as #1 */ if(typeof arguments[0] !== 'undefined'){ mermaid.sequenceConfig = arguments[0]; } nodes = arguments[1]; } else{ nodes = arguments[0]; } </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3" id="section-3">¶</a> </div> if last argument is a function this is the callback function </td> <td class="code highlight"><div class="highlight"><pre> var callback; if(typeof arguments[arguments.length-1] === 'function'){ callback = arguments[arguments.length-1]; log.debug('Callback function found'); }else{ var conf= mermaidAPI.getConfig(); if(typeof conf.mermaid !== 'undefined'){ if(typeof conf.mermaid.callback === 'function'){ callback = conf.mermaid.callback; log.debug('Callback function found'); }else{ log.debug('No Callback function found'); } } } nodes = nodes === undefined ? document.querySelectorAll('.mermaid') : typeof nodes === "string" ? document.querySelectorAll(nodes) : nodes instanceof Node ? [nodes] /*! Last case - sequence config was passed pick next */ : nodes; var i; if(typeof mermaid_config !== 'undefined'){ mermaidAPI.initialize(mermaid_config); } log.debug('Start On Load before: '+mermaid.startOnLoad); if(typeof mermaid.startOnLoad !== 'undefined'){ log.debug('Start On Load inner: '+mermaid.startOnLoad); mermaidAPI.initialize({startOnLoad:mermaid.startOnLoad}); } if(typeof mermaid.ganttConfig !== 'undefined'){ mermaidAPI.initialize({gantt:mermaid.ganttConfig}); } var insertSvg = function(svgCode){ element.innerHTML = svgCode; if(typeof callback !== 'undefined'){ callback(id); } }; for (i = 0; i < nodes.length; i++) { var element = nodes[i]; /*! Check if previously processed */ if(!element.getAttribute("data-processed")) { element.setAttribute("data-processed", true); } else { continue; } var id = 'mermaidChart' + nextId++; var he = require('he'); var txt = element.innerHTML; txt = txt.replace(/>/g,'&gt;'); txt = txt.replace(/</g,'&lt;'); txt = he.decode(txt).trim(); mermaidAPI.render(id,txt,insertSvg, element); } }; exports.init = init; exports.parse = mermaidAPI.parse; </pre></div> </td> </tr> <tr> <td class="docs"><div class="dox"> <div class="summary"><div class="pilwrap" id="version"> <h2> <a href="#version" name="version" class="pilcrow">¶</a> version</h2> </div> 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 'v'+require('../package.json').version; }; </pre></div> </td> </tr> <tr> <td class="docs"><div class="dox"> <div class="summary"><div class="pilwrap" id="initialize"> <h2> <a href="#initialize" name="initialize" class="pilcrow">¶</a> initialize</h2> </div> This function overrides the default configuration. </div> <div class="body"> </div> <div class="details"> <div class="dox_tag_title">Params</div> <div class="dox_tag_detail"> config </div> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> exports.initialize = function(config){ log.debug('Initializing mermaid'); if(typeof config.mermaid !== 'undefined') { if (typeof config.mermaid.startOnLoad !== 'undefined') { global.mermaid.startOnLoad = config.mermaid.startOnLoad; } if (typeof config.mermaid.htmlLabels !== 'undefined') { global.mermaid.htmlLabels = config.mermaid.htmlLabels; } } mermaidAPI.initialize(config); }; var equals = function (val, variable){ if(typeof variable === 'undefined'){ return false; } else{ return (val === variable); } }; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6" id="section-6">¶</a> </div> <div class="dox"> <div class="summary">Global mermaid object. Contains the functions: <ul> <li>init</li> <li>initialize</li> <li>version</li> <li>parse</li> <li>parseError</li> <li>render</li> </ul> </div> <div class="body"> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> global.mermaid = { startOnLoad: true, htmlLabels: true, init: function(sequenceConfig, nodes) { init.apply(null, arguments); }, initialize: function(config) { exports.initialize(config); }, version: function() { return mermaidAPI.version(); }, parse: function(text) { return mermaidAPI.parse(text); }, parseError: function(err, hash) { log.debug('Mermaid Syntax error:'); log.debug(err); }, render:function(id, text,callback, element){ return mermaidAPI.render(id, text,callback, element); } }; </pre></div> </td> </tr> <tr> <td class="docs"><div class="dox"> <div class="summary"><div class="pilwrap" id="parseError"> <h2> <a href="#parseError" name="parseError" class="pilcrow">¶</a> parseError</h2> </div> This function overrides the default configuration. </div> <div class="body"> </div> <div class="details"> <div class="dox_tag_title">Params</div> <div class="dox_tag_detail"> config </div> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> exports.parseError = global.mermaid.parseError; </pre></div> </td> </tr> <tr> <td class="docs"><div class="dox"> <div class="summary"><div class="pilwrap" id="contentLoaded"> <h2> <a href="#contentLoaded" name="contentLoaded" class="pilcrow">¶</a> contentLoaded</h2> </div> Callback function that is called when page is loaded. This functions fetches configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the page. </div> <div class="body"> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> exports.contentLoaded = function(){ var config; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9" id="section-9">¶</a> </div> Check state of start config mermaid namespace </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(global.mermaid.startOnLoad) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10" id="section-10">¶</a> </div> For backwards compatability reasons also check mermaid_config variable </td> <td class="code highlight"><div class="highlight"><pre> if (typeof mermaid_config !== 'undefined') { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11" id="section-11">¶</a> </div> Check if property startOnLoad is set </td> <td class="code highlight"><div class="highlight"><pre> if (equals(true, mermaid_config.startOnLoad)) { global.mermaid.init(); } } else { mermaidAPI.initialize({startOnLoad:global.mermaid.startOnLoad}); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12" id="section-12">¶</a> </div> No config found, do check API config </td> <td class="code highlight"><div class="highlight"><pre> config = mermaidAPI.getConfig(); if(config.startOnLoad){ global.mermaid.init(); } } }else{ log.debug('In start, no config'); config = mermaidAPI.getConfig(); if(config.startOnLoad){ global.mermaid.init(); } } }; if(typeof document !== 'undefined'){ </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13" id="section-13">¶</a> </div> <div class="dox"> <div class="summary">! Wait for document loaded before starting the execution </div> <div class="body"> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> document.addEventListener('DOMContentLoaded', function(){ exports.contentLoaded(); }, false); } </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14" id="section-14">¶</a> </div> // Your actual module return module.exports; })); </td> <td class="code highlight"><div class="highlight"><pre> </pre></div> </td> </tr> </tbody> </table> </div> </body> </html>