Mermaid

Mermaid 是一个基于JavaScript的图表工具，可以将Markdown语法的内容渲染成流程图等 然而之前我的博客的编辑器是不支持这个的，所以昨天折腾了一番加入了这个功能（

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

例如上面的代码可以被渲染成下面的流图 !!! <pre class="mermaid"> graph TD; A-->B; A-->C; B-->D; C-->D; </pre> !!!

加入

首先需要在页面中引入JS文件，可以通过Script标签的形式（

<script type="module">
     import mermaid from 'https://npm.elemecdn.com/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
</script>

这里我使用的是国内的CDN，加载速度会快一些，当然也可以用JsDeliver的CDNhttps://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs

引入后会将页面中class=mermaid的元素内容自动渲染成流图，目前已知标签内必须是纯文本，不能有<br/>等,换行标记\n可以有

!!! <pre class="mermaid"> sequenceDiagram Alice->>Bob: Hello Bob, how are you ? Bob->>Alice: Fine, thank you. And you? create participant Carl Alice->>Carl: Hi Carl create actor D as Donald Carl->>D: Hi </pre> !!!