Action

Mermaid Diagram

Posted by @galtenberg, Last update 3 days ago

Generate a mermaid.js diagram from current draft.

Steps

  • 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}" />`)

Options

  • After Success Nothing
    Notification Error
    Log Level Error
Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.