Mermaid Diagram

script

const json = {"code":`${draft.content}`,"mermaid":{"theme":"default", "themeCSS": ".node rect, .node circle, .node ellipse, .node polygon, .node path { fill: #ECE7F6; stroke: #800080;} .cluster rect { fill: #CFE2F3; stroke: blue; } .label { color: black; } "}}
const url = "https://mermaid.ink/img/"
  .concat(Base64.encode(JSON.stringify(json)))
  
// Flowchart styles https://github.com/mermaid-js/mermaid/blob/5565aab4883145ac97ab756ccdebc4326a733d00/src/diagrams/flowchart/styles.js
// Color editor https://www.htmlcsscolor.com/hex/B0E0E6

const css = `<style>
html, body { margin: 0; max-width: 99%; }
img { 
  min-height: 100%;
  background: url(https://cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif) no-repeat center;
}
</style>`
//html, body { height: 100%; margin: 0; } // to show loading spinner, graph will zoom in

const h = HTMLPreview.create()
//h.hideInterface = true
h.show(`${css}<img src="${url}" />`)