Mermaid 是一个能通过 markdown 画流程图，甘特图等图表的库，我很喜欢。今天尝试将它集成到 hugo 的系统里。

• 在主题中引入 mermaid 的库文件，比如在 footer.html 文件中引入该库文件

  <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.4.3/mermaid.min.js"></script>
  

• 利用 hugo 中的 shortcodes 来实现对 mermaid 的载入，在 shortcodes 里创建 mermaid.html，并将下面的代码输入进去

  <div class="mermaid"> 
      {{ safeHTML .Inner }}
  </div>
  

• 最后看效果，比如

  graph LR A(Hello)-->B(One) A-->C(Two)

  这个流程的写法是

  graph LR
  A(Hello)-->B(One)
  A-->C(Two)
  

  当然需要用 <mermaid> 和 </mermaid> 将上面代码包含在里面。

至于 mermaid 还有哪些用法，去其官网看吧。

• 官网地址：https://mermaid.js.org

---

本文由 Bin Hua 发表于 2023-03-09 18:10:41

> 可在 Twitter/X 上评论该篇文章或在下面留言（需要有 GitHub 账号）