mermaid

<!DOCTYPE html> <html> <head> <title>usage.md</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/docs/usage.md", 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 h2"> <a href="#order: 1">order: 1</a> </div> <div class="heading h1"> <a href="#Installation">Installation</a> </div> <div class="heading h1"> <a href="#Usage">Usage</a> </div> <div class="heading h2"> <a href="#Calling `mermaid.init`">Calling <code>mermaid.init</code></a> </div> <div class="heading h1"> <a href="#Usage with browserify">Usage with browserify</a> </div> <div class="heading h1"> <a href="#API usage">API usage</a> </div> <div class="heading h1"> <a href="#Sample API usage with browserify">Sample API usage with browserify</a> </div> <div class="heading h1"> <a href="#Example of marked renderer">Example of marked renderer</a> </div> <div class="heading h2"> <a href="#Advanced usage">Advanced usage</a> </div> </div> </div> <div id="sidebar-toggle"></div> <div id="container"><div class="docs markdown"><hr> title: Usage <div class="pilwrap" id="order: 1"> <h2> <a href="#order: 1" name="order: 1" class="pilcrow">¶</a> order: 1</h2> </div> <div class="pilwrap" id="Installation"> <h1> <a href="#Installation" name="Installation" class="pilcrow">¶</a> Installation</h1> </div> Either use the npm or bower package managers as per below: <div class="highlight"><pre><code>bower install mermaid --save-dev </code></pre></div> <div class="highlight"><pre><code>npm install mermaid --save-dev </code></pre></div> Or download javascript files: <ul> <li><a href="https://cdn.rawgit.com/knsv/mermaid/0.d.0/dist/mermaid.min.js">mermaid including dependencies</a></li> </ul> There are some bundles to choose from: <ul> <li>mermaid.js, mermaid.min.js This bundle contains everything you need to run mermaid</li> <li>mermaid.slim.js, mermaid.slim.min.js This bundle does not contain d3 which is usefull for sites that already have d3 in place</li> <li>mermaidAPI.js, mermaidAPI.min.js, This bundle does not contain the web integration provided in the other packages but has a render function instead returns svg code.</li> </ul> Important: <blockquote> It's best to use a specific tag or commit hash in the URL (not a branch). Files are cached permanently after the first request. </blockquote> Read more about that at <a href="https://rawgit.com/">https://rawgit.com/</a> <div class="pilwrap" id="Usage"> <h1> <a href="#Usage" name="Usage" class="pilcrow">¶</a> Usage</h1> </div> Include mermaid on your web page: <div class="highlight"><pre><code>lt;script src=quot;mermaid.min.jsquot;gt;lt;/scriptgt; lt;scriptgt;mermaid.initialize({startOnLoad:true});lt;/scriptgt; </code></pre></div> Further down on your page mermaid will look for tags with <code>class="mermaid"</code>. From these tags mermaid will try to read the chart definiton which will be replaced with the svg chart. A chart defined like this: <div class="highlight"><pre><code>lt;div class=quot;mermaidquot;gt; CHART DEFINITION GOES HERE lt;/divgt; </code></pre></div> Would end up like this: <div class="highlight"><pre><code>lt;div class=quot;mermaidquot; id=quot;mermaidChart0quot;gt; lt;svggt; Chart ends up here lt;/svggt; lt;/divgt; </code></pre></div> An id is also added to mermaid tags without id. <div class="pilwrap" id="Calling `mermaid.init`"> <h2> <a href="#Calling `mermaid.init`" name="Calling `mermaid.init`" class="pilcrow">¶</a> Calling <code>mermaid.init</code></h2> </div> By default, <code>mermaid.init</code> will be called when the document is ready, finding all elements with <code>class="mermaid"</code>. If you are adding content after mermaid is loaded, or otherwise need finer-grained control of this behavior, you can call <code>init</code> yourself with: <ul> <li>a configuration object</li> <li>some nodes, as<ul> <li>a node</li> <li>an a array-like of nodes</li> <li>or W3C selector that will find your nodes</li> </ul> </li> </ul> Example: <div class="highlight"><pre><code>mermaid.init({noteMargin: 10}, .someOtherClass); </code></pre></div> Or with no config object, and a jQuery selection: <div class="highlight"><pre><code>mermaid.init(undefined, $(#someId .yetAnotherClass)); </code></pre></div> <div class="pilwrap" id="Usage with browserify"> <h1> <a href="#Usage with browserify" name="Usage with browserify" class="pilcrow">¶</a> Usage with browserify</h1> </div> Minimalistic javascript: <div class="highlight"><pre><code>mermaid = require('mermaid'); </code></pre></div> <div class="pilwrap" id="API usage"> <h1> <a href="#API usage" name="API usage" class="pilcrow">¶</a> API usage</h1> </div> Include mermaid on your web page: <div class="highlight"><pre><code>lt;script src=quot;mermaidAPI.jsquot;gt;lt;/scriptgt; lt;scriptgt; mermaidAPI.initialize({ startOnLoad:false }); $(function(){ var graphDefinition = 'graph TB\na--b'; var graph = mermaidAPI.render(graphDefinition); $(#graphDiv).html(graph); }); lt;/scriptgt; </code></pre></div> <div class="pilwrap" id="Sample API usage with browserify"> <h1> <a href="#Sample API usage with browserify" name="Sample API usage with browserify" class="pilcrow">¶</a> Sample API usage with browserify</h1> </div> <div class="highlight"><pre><code>$ = require('jquery'); mermaidAPI = require('mermaid').mermaidAPI; mermaidAPI.initialize({ startOnLoad:false }); $(function(){ var graphDefinition = 'graph TB\na--b'; var cb = function(html){ console.log(html); } mermaidAPI.render('id1',graphDefinition,cb); }); </code></pre></div> <div class="pilwrap" id="Example of marked renderer"> <h1> <a href="#Example of marked renderer" name="Example of marked renderer" class="pilcrow">¶</a> Example of marked renderer</h1> </div> This is the renderer used for transforming the documentation from markdown to html with mermaid diagrams in the html. <div class="highlight"><pre><code> var renderer = new marked.Renderer(); renderer.code = function (code, language) { if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){ return 'lt;div class=mermaid'+code+'lt;/div'; } else{ return 'lt;prelt;code'+code+'lt;/codelt;/pre'; } }; </code></pre></div> Another example in coffeescript that also includes the mermaid script tag into the generated markup. <div class="highlight"><pre><code>marked = require 'marked' module.exports = (options) - hasMermaid = false renderer = new marked.Renderer() renderer.defaultCode = renderer.code renderer.code = (code, language) - if language is 'mermaid' html = '' if not hasMermaid hasMermaid = true html += 'script src='+options.mermaidPath+'/script' html + 'div class=mermaid'+code+'/div' else @defaultCode(code, language) renderer </code></pre></div> <div class="pilwrap" id="Advanced usage"> <h2> <a href="#Advanced usage" name="Advanced usage" class="pilcrow">¶</a> Advanced usage</h2> </div> Error handling When the parser encounters invalid syntax the mermaid.parseError function is called. It is possible to override this function in order to handle the error in an application specific way. Parsing text without rendering It is also possible to validate the syntax before rendering in order to streamline the user experience. The function mermaid.parse(txt) takes a text string as an argument and returns true if the text is syntactically correct and false if it is not. The parseError function will be called when the parse function returns false. The code-example below in meta code illustrates how this could work: <div class="highlight"><pre><code>mermaid.parseError = function(err,hash){ displayErrorInGui(err); }; var textFieldUpdated = function(){ var textStr = getTextFromFormField('code'); if(mermaid.parse(textStr)){ reRender(textStr) } }; bindEventHandler('change', 'code', textFieldUpdated); </code></pre></div> </div> </div> </body> </html>