JSFiddle - React, Tailwind, and code Playground

by SpAm

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.4.8/mermaid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/codemirror.min.css">
<div class="row">
  <div class="col-sm-6">
    <textarea class="form-control" style="height:400px;border-radius:0;resize:none"></textarea>
  </div>
  <div class="col-sm-6">
    <div id="mermaid">
    </div>
  </div>
</div>

JavaScript

var editor = CodeMirror.fromTextArea($('textarea').get(0), {
    lineNumbers: true
  });
  
  editor.on('change', function(c, obj){
	console.log("Changed", c.getValue());
  mermaid.render('theGraph', c.getValue(), function(svgCode) {
  	console.log(svgCode);
    $('#mermaid').html(svgCode);
  });
})


mermaid.initialize({startOnLoad:false});