mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.
216 lines (202 loc) • 9.38 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>API Reference</title>
<link href="stylesheets/screen.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print"/>
<link href="stylesheets/mermaid.forest.css" rel="stylesheet" type="text/css"/>
<link href="stylesheets/solarized_light.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="javascripts/lib/mermaid.js"></script>
<script src="javascripts/all.js" type="text/javascript"></script>
<script src="javascripts/highlight.pack.js" type="text/javascript"></script>
<script>
var g = function (hljs) {
var r = "[a-z'][a-zA-Z0-9_']*", c = "(" + r + ":" + r + "|" + r + ")";
var keyw = {
keyword: 'graph sequenceDiagram participant loop end',
typename: 'Note',
literal: "false true left right"
};
return {
case_insensitive: false,
aliases: ["mermaid"],
k: keyw,
i: 'for',
c: [{
cN: "function",
b: "^" + r + "\\s*\\(",
e: "->",
rB: !0,
i: "\\(|#|//|/\\*|\\\\|:|;",
starts: {
e: ";|\\.", k: keyw, c: [
{cN: "comment", b: "%", e: "$"}
]
}
},
{cN: "comment", b: "%", e: "$"}
]
};
};
hljs.registerLanguage('mermaid', g);
hljs.initHighlightingOnLoad();
$(function () {
setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
});
</script>
</head>
<body class="index">
<a href="#" id="nav-button">
<span>
NAV
<img src="images/navbar.png"/>
</span>
</a>
<div class="tocify-wrapper">
<img src="images/logo.png"/>
<div class="lang-selector">
<a href="#" data-language-name="shell">shell</a>
<a href="#" data-language-name="ruby">ruby</a>
<a href="#" data-language-name="python">python</a>
</div>
<div class="search">
<input type="text" class="search" id="input-search" placeholder="Search">
</div>
<ul class="search-results"></ul>
<div id="toc">
</div>
<ul class="toc-footer">
<li><a href='#'>Sign Up for a Developer Key</a></li>
<li><a href='http://github.com/tripit/slate'>Documentation Powered by Slate</a></li>
</ul>
</div>
<div class="page-wrapper">
<div class="dark-box"></div>
<div class="content">
<h1 id="installation">Installation</h1>
<p>Either use the npm or bower package managers as per below:</p>
<pre class="css"><code>bower install mermaid --save-dev</code></pre><pre class="css"><code>npm install mermaid --save-dev</code></pre><p>Or download javascript files:</p>
<ul>
<li><a href="https://cdn.rawgit.com/knsv/mermaid/0.d.0/dist/mermaid.min.js">mermaid including dependencies</a></li>
</ul>
<p>There are some bundles to choose from:</p>
<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>
<p><strong> Important: </strong></p>
<blockquote>
<p>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.</p>
</blockquote>
<p>Read more about that at <a href="https://rawgit.com/">https://rawgit.com/</a></p>
<h1 id="usage">Usage</h1>
<p>Include mermaid on your web page:</p>
<pre class="css"><code><script src="mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script></code></pre><p>Further down on your page mermaid will look for tags with <code>class="mermaid"</code>. From these tags mermaid will try to<br>read the chart definiton which will be replaced with the svg chart.</p>
<p>A chart defined like this:</p>
<pre class="css"><code><div class="mermaid">
CHART DEFINITION GOES HERE
</div></code></pre><p>Would end up like this:</p>
<pre class="css"><code><div class="mermaid" id="mermaidChart0">
<svg>
Chart ends up here
</svg>
</div></code></pre><p>An id is also added to mermaid tags without id.</p>
<h2 id="calling-mermaid-init-">Calling <code>mermaid.init</code></h2>
<p>By default, <code>mermaid.init</code> will be called when the document is ready, finding all elements with<br><code>class="mermaid"</code>. If you are adding content after mermaid is loaded, or otherwise need<br>finer-grained control of this behavior, you can call <code>init</code> yourself with:</p>
<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>
<p>Example:</p>
<pre class="css"><code>mermaid.init({noteMargin: 10}, ".someOtherClass");</code></pre><p>Or with no config object, and a jQuery selection:</p>
<pre class="css"><code>mermaid.init(undefined, $("#someId .yetAnotherClass"));</code></pre><h1 id="usage-with-browserify">Usage with browserify</h1>
<p>Minimalistic javascript:</p>
<pre class="css"><code>
mermaid = require('mermaid');</code></pre><h1 id="api-usage">API usage</h1>
<p>Include mermaid on your web page:</p>
<pre class="css"><code><script src="mermaidAPI.js"></script>
<script>
mermaidAPI.initialize({
startOnLoad:false
});
$(function(){
var graphDefinition = 'graph TB\na-->b';
var graph = mermaidAPI.render(graphDefinition);
$("#graphDiv").html(graph);
});
</script></code></pre><h1 id="sample-api-usage-with-browserify">Sample API usage with browserify</h1>
<pre class="css"><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><h1 id="example-of-marked-renderer">Example of marked renderer</h1>
<p>This is the renderer used for transforming the documentation from markdown to html with mermaid diagrams in the html.</p>
<pre class="css"><code> var renderer = new marked.Renderer();
renderer.code = function (code, language) {
if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
return '<div class="mermaid">'+code+'</div>';
}
else{
return '<pre><code>'+code+'</code></pre>';
}
};</code></pre><p>Another example in coffeescript that also includes the mermaid script tag into the generated markup.</p>
<pre class="css"><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><h2 id="advanced-usage">Advanced usage</h2>
<p><strong>Error handling</strong></p>
<p>When the parser encounters invalid syntax the <strong>mermaid.parseError</strong> function is called. It is possible to override this<br>function in order to handle the error in an application specific way.</p>
<p><strong>Parsing text without rendering</strong></p>
<p>It is also possible to validate the syntax before rendering in order to streamline the user experience. The function<br><strong>mermaid.parse(txt)</strong> takes a text string as an argument and returns true if the text is syntactically correct and<br>false if it is not. The parseError function will be called when the parse function returns false.</p>
<p>The code-example below in meta code illustrates how this could work:</p>
<pre class="css"><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 class="dark-box">
<div class="lang-selector">
<a href="#" data-language-name="shell">shell</a>
<a href="#" data-language-name="ruby">ruby</a>
<a href="#" data-language-name="python">python</a>
</div>
</div>
</div>
</body>
</html>