Mermaid.js

mermaid`

  stateDiagram-v2

    [*] --> Still

    Still --> [*]

    Still --> Moving

    Moving --> Still

    Moving --> Crash

    Crash --> [*]

`

mermaidJs = require('mermaid@8.7/dist/mermaid.min.js')

viewof mermaidContainer = html`<div id="mermaid" />`

mermaid = function (...values) {

  const div = (viewof mermaidContainer); //document.getElementById('mermaid');

  if (!div) {

    throw 'Cannot find div with id "mermaid"';

  }

  const src = String.raw(...values).trim();

  const id = "mmd" + Math.round(Math.random() * 10000);

  div.append(html`<div id="${id}" />`);

  try {

    const result = mermaidJs.render(id, src, undefined);

    return svg([result]);

  } catch (ex) {

    console.error(ex);

    throw ex;

  }

}