代码旅行

How to Integrate Mermaid in Hugo

你正在阅读的是本文 2023-03-09 18:24:45 的历史版本，内容可能已经过时。

→ 阅读本文的最新版本

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>

  • 最后通过下面代码引用

     
    
    ...

    这里的省略号是需要画的内容的 markdown 文本，比如

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

    这个流程的写法是

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

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