Mermaid + Marked Example

HTML

<script src="https://rawgit.com/chjj/marked/master/lib/marked.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/0.4.0/mermaid.slim.js"></script>
<div id="content"></div>

JavaScript

var renderer = new marked.Renderer();
renderer.code = function (code, language) {
    if(language == 'mermaid') {
        mermaid.init(code);
        return '<pre class="mermaid">'+code+'</pre>';
    }
    else
        return '<pre><code>'+code+'</code></pre>';
};

$(document).ready(function(){
    var html = 
        marked(
            [
                'Markdown Mermaid Example',
                '------------------------',
                '',
                '```mermaid',
                'graph TD',
                '  A-->B',
                '  A-->C',
                '  B-->D',
                '  C-->D',
                'end!',
                '```',
                'SequenceDiagram',
                '```mermaid',
                'sequenceDiagram',
                '  participant John',
                '  participant Alice',
                '  Alice->>John: Hello',
                '  John-->Alice: Hi',
                '',
                '```'
            ].join('\n'), 
            { renderer: renderer }
        );
    
    $('#content').html(html);
    console.log(html);
    mermaid.init();
});