mermaid

Info

🌱 來自: markdown-lab

mermaid 怎麼用

Use mermaid with code fences - tips & tricks - HUGO

When using code fences syntax for mermaid code blocks, you’ll notice that Hugo turns this into …. Turns out it’s possible to tell mermaid which classes to look for when searching for graph definitions.

flowchart LR
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

Simply add this at the end of your body:

{{ $mermaid := resources.Get "/path/to/mermaid.min.js" }}
<script src="{{ $mermaid.RelPermalink }}"></script>
<script>
    window.onload = function() {
        mermaid.init(undefined, ".language-mermaid");
    };
</script>

• Adding Diagrams to Your Hugo Blog With Mermaid | Navendu Pottekkat
• 使用Mermaid在hugo的Markdown中繪製UML · 零壹軒·筆記
• Hugo部落格新增mermaid作圖 - 騰訊雲開發者社區-騰訊雲 給 Hugo 部落格新增 mermaid 短程式碼支援 :: /dev/ttyS3 — 回首向來蕭瑟處 也無荒野也無燈
• Add mermaid support to hugo code fences | anis
• Hugo code fences output two tags, pre and code - Stack Overflow

// mermaid loader by ttys3.dev
const loadMermaidOnNeed = () => {
if (document.querySelectorAll('.mermaid').length > 0) {
	loadScript('https://cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js', () => {
	document.head.insertAdjacentHTML("beforeend", `<style>.mermaid svg { background-color: #dadcd8 !important; }</style>`);
	// default, dark, neutral, forest
	mermaid.initialize({ startOnLoad: false, securityLevel: "strict", logLevel: 1, theme: "neutral" });
	// https://github.com/mermaid-js/mermaid/blob/e6e94ad57ea06ef8627bf91ddfbd88f5082952bf/src/mermaid.js#L153
	// mermaid.contentLoaded();
	mermaid.init();
	console.log("mermaid init done");
	})
	}
}