JSFiddle - React, Tailwind, and code Playground

by Chinmay Pendharkar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/knsv/mermaid/7.0.0/dist/mermaid.css">
<textarea class="diagram">
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
</textarea>

<textarea class="config">
{
  "theme": "default"
}
</textarea>

<div id="preview" style="height=100%"></div>

JavaScript

preview = document.querySelector("#preview");
configta = document.querySelector(".config");
diagramta = document.querySelector(".diagram");

configta.addEventListener('change', updatePreview);
diagramta.addEventListener('change', updatePreview);

updatePreview()

function updatePreview(){
	mermaid.initialize(configta.innerHTML)
	mermaid.mermaidAPI.render("preview",diagramta.value,(svgGraph) => {preview.innerHTML = svgGraph})
}