前言

Mermaid是一个用文本语法来描述文档图形 (流程图、 时序图、甘特图) 的工具，这里主要讲如何引入使用 。

安装

首先引入

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/mermaid/8.14.0/mermaid.min.js" type="application/javascript"></script>

这里使用的是字节跳动提供的源。
然后加入代码

mermaid.initialize({startOnLoad:true});

现在这个时候已经基本完成了，但最重要的一点就是mermaid默认是查找文章中所有类为mermaid包裹的内容，所以这个时候你需要将使用mermaid的内容包裹起来，例如：

<div class="mermaid">Mermaid</div>

问题解答

这个时候就有同学问了，如果我不想要这个mermaid，想要更改这个类名怎么处理。
也好办，把下面这串代码加到刚才那串代码的后面：

mermaid.init(".test");

这个test就是你可以自定义的类名

Typecho文章中可能会对HTML标签进行过滤，所以也需要进行相应的处理。

如果不想这么麻烦的话已经有一款插件给你解决了这个问题。

mrgeneralgoo/typecho-markdown
A markdown parse plugin for typecho.
Github149 17

这个插件默认是使用mermaid类，若要更改可修改该插件目录下的ParsedownExtension.php第228行'class' => 'mermaid'，把这个mermaid更改为你想要的即可。

Pjax下需要将以下代码放入Pjax的complete或end
mermaid.init(".类名");
这个类名是你自己自定义的类名，若是使用默认的mermaid，直接mermaid.init();即可