发现2022年居然一篇博客都没写，一方面是疫情原因实在太糟心，另外一方面是环境使然，2022年一年都在适应新环境和拼命的推动项目前行。立个Flag，保证明年至少一个季度有一篇文章吧。
这篇文章是为了提示如何在hugo中添加mermaid支持，mermaid是一个流程图的工具，可以在markdown中直接使用，非常方便。其实在hugo官方文档中已经有了说明，但是我在使用的时候发现对新人不是特别友好，所以这里记录一下，顺便水一个。
官方文档中，第一步是在主题目录下创建对应Mermaid文件，这个按照官方文档操作即可，但是第二步其实说的有点模糊。最开始我按照官方文档进行添加，发现实际并未生效。我猜测是主题不支持的原因。因此我换了一种实现方式。
其实第二个步主要说的是在.Content内容之后进行添加代码。我们可以搜索一下主题中哪里使用了{{ .Content。为什么添加了一下前面的{{ ？因为这个是Go的模版语法，因为每个主题不一样，可能存在其他叫做.Content的变量或者内容，为了尽量排除干扰项可以这样搜索。当然如果你还是没搜索到，可能需要使用.Content再来一次。
在我的主题中，可以看到在layouts/partials/article/components/content.html文件中使用了.Content，因此我们可以在这个文件添加代码：
{{ .Content | replaceRE "(<table>(?:.|\n)+?</table>)" $wrappedTable | safeHTML }}
+ {{ if .Page.Store.Get "hasMermaid" }}
+ <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+ <script>
+ mermaid.initialize({ startOnLoad: true });
+ </script>
+ {{ end }}
实际效果如下：
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
当然，你也可以图省事使用第三方服务，比如说我之前推荐过的Kroki。
