nodeがインストールできない環境でもmermaid.jsのSVGをゲットしたい #SVG

尚且つ、公式のライブエディターを使うのがはばかられる場合に備えて

を混ぜて簡易エディターをでっち上げてみました。

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="all.min.css">
  <style>
  textarea#diagram {
    width: 50%;
    height: 50vh
  }
  textarea#svgCode {
    width: 90%;
    height: 20vh
  }
  .flex {
    display: flex;
  }
  .mermaid {
    width: 50%;
  }
  </style>
</head>
<body>
  <div class="flex">
    <textarea id="diagram" onchange="changeContainer()">
graph TD
  あ-->B
  あ-->C
  B-->D
  C-->D
    </textarea>
    <div id="mermaidContainer" class="mermaid"></div>
  </div>
  <textarea id="svgCode"></textarea>
  <br />
  <button>Save SVG</button>

  <script src="mermaid.min.js"></script>
  <script>mermaid.initialize({startOnLoad:false});</script>

  <script>
const container = document.getElementById("mermaidContainer")
const svgCode = document.getElementById("svgCode")

function changeContainer (){
    container.removeAttribute('data-processed')
    let diagram = document.getElementById("diagram").value
    if (!diagram) return
    container.innerHTML = diagram.replace(/</g, '&lt;')
    mermaid.init()
    
    svgCode.innerText = container.innerHTML
}
changeContainer()
  </script>
  
  <script>
const button = document.querySelector('button')

button.addEventListener('click', async () => {
  const opts = {
    suggestedName: 'diagram',
    types: [{
      description: 'Text file',
      accept: {'text/plain': ['.svg']},
    }],
  };
  const handle = await window.showSaveFilePicker(opts);
  const writable = await handle.createWritable()
  await writable.write(svgCode.value)
  await writable.close()
})
  </script>
<body>
</html>

ダイアグラムを書いたらtextarea外をポチっとすると絵が更新されます。
Save SVGボタンを押すとsvgがゲットできます。

これがローコードプログラミングって奴ですよね（違

追記：

classDiagram
class Shape{
    <<interface>>
    noOfVertices
    draw()
}
class Color{
    <<enumeration>>
    RED
    BLUE
    GREEN
    WHITE
    BLACK
}

で

を表示させようとするとsyntax errorになってしまっていたのを修正しました。