mermaid 在HUGO中使用
Hugo配置 配置Hugo ShortCode 在主题目录/layouts/shortcodes， 新增mermaid.html 1 2 {{ $_hugo_config := `{ "version": 1 }` }} <div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}">{{ safeHTML .Inner }}</div> 修改/layouts/partials/footer.html，新增如下配置 1 2 3 4 5 6 <script src="https://unpkg.com/mermaid@8.8.1/dist/mermaid.min.js"></script> <script> Array.from(document.getElementsByClassName('language-mermaid')).forEach(el => { el.parentElement.outerHTML = `<div class="mermaid">${el.innerText}</div>` }) </script> hugo 中使用mermaid 在写文章的时候， 使用{ {<mermaid>} } 和 { {</mermaid>} } 包围相应的代码即可 案例 (mermaid 官网)[https://mermaid-js.github.io/mermaid/#/] Flowchart 1 2 3 4 5 graph TD; A-->B; A-->C; B-->D; C-->D; graph TD; A-->B; A-->C; B-->D; C-->D; Sequence diagram 1 2 3 4 5 6 7 8 9 10 11 sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you?...