Action
Mermaid Diagram
Posted by @galtenberg,
Last update
about 4 years 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.