Lightweight Mermaid live editor

by thirdender

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.8.4/mermaid.min.js"></script>
<textarea>
graph TB
a-->b
</textarea>
<div></div>

CSS

body {
  display: flex;
  margin: 8px;
}
textarea {
  padding: 8px;
  border: 1px solid #333;
  height: calc(100vh - 34px);
  resize: horizontal;
  width: 70%;
}
body > div {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript

mermaid.mermaidAPI.initialize({ startOnLoad: false });
mermaid.parseError = console.error;
const element = document.querySelector('div');
document.querySelector('textarea').addEventListener('keyup', (e) => {
  const value = e.target.value;
  if (mermaid.parse(value)) {
    mermaid.mermaidAPI.render(
      'graph',
      e.target.value,
      (svgCode) => element.innerHTML = svgCode,
    );
  }
});