Mermaid Demo

index.html

<div>
  This Pen makes use of 
  <a href="https://knsv.github.io/mermaid" target="_blank">mermaid.js</a> to describe diagrams like a <a href="https://en.wikipedia.org/wiki/Gantt_chart" target="_blank">Gantt</a> with Markdown. The example code is taken from <a href="https://knsv.github.io/mermaid/live_editor/" target="_blank">their live editor</a>.
</div>
<div>
  <textarea name="" id="input" cols="30" rows="10">
sequenceDiagram
A->> B: Query
B->> C: Forward query
Note right of C: Thinking...
C->> B: Response
B->> A: Forward response
  </textarea>
</div>
<div>
  Your code (for debugging): <pre id="preview"></pre>
</div>
<div>
  <button type="button" id="render">Render</button>
</div>
<div>Graph:
  <div id="output"></div>
</div>

mermaid-demo.markdown

Mermaid Demo

Inspired by mermaid-js/mermaid#323 of a friend of mine.

A Pen by mctouch on CodePen.

License.

script.js

var input = document.getElementById("input");
var preview = document.getElementById("preview");
var output = document.getElementById("output");
var renderBtn = document.getElementById("render");

mermaidAPI.initialize({startOnLoad: false});

render.onclick = function() {
    preview.innerHTML = input.value;
    mermaidAPI.render('theGraph', input.value, function(svgCode) {
        output.innerHTML = svgCode;
    });
}

scripts

<script src="https://cdn.rawgit.com/knsv/mermaid/0.5.8/dist/mermaidAPI.js"></script>

style.css

* {
  color: #000;
  background: #fff;
}

styles

<link href="https://knsv.github.io/mermaid/css/mermaid.css" rel="stylesheet" />